Vue.js的安装
安装Vue.js有两种方法：
（1）类似于Bootstrap或jQuery，直接通过HTML文件中的标签引用。为了方便开发者使用，Vue.js提供了相关的CDN，通过如下代码可以引用最新版本的Vue.js：
` <script src="https://cdn.jsdelivr.net/npm/vue"></script>`
通过指定版本号，可以引用不同版本的Vue.js，这样项目工程不会因为新版本的Vue.js而出现不兼容的问题。
` <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>`
除了CDN方式外，还可以下载源代码直接引入。对于一个大型项目而言，直接引入JavaScript文件的方式可能并不便捷，所以笔者采用npm的安装方式。
（2）npm安装方式。
新建项目文件夹，使用npm init命令初始化项目，然后使用如下命令安装Vue.js，与Express的安装步骤一样。
npm install vue
package.json文件会自动添加Vue.js的依赖项，代码如下：
` { "name": "2-3-2", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "vue": "^2.6.10" } }` 用Vue.js编写Hello World——CDN方式
介绍了安装Vue.js的两种方式，第一种是通过CDN方式或引入静态文件，通过CDN方式编写Hello World程序较为简单，下面直接演示。
【示例】用Vue.js编写HelloWorld——1。
新建HTML文件，命名为index.html，引入Vue.js。完整的代码如下：
`
01 <!--HelloWorld--> 02 <html lang="en"> 03 <head> 04 <meta charset="UTF-8"> 05 <title>Title</title> 06 </head> 07 <body> 08 <div id="app"> 09 <!--显示文字内容--> 10 {{text}} 11 </div> 12 <!--引入Vue--> 13 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 14 <script> 15 <!--实例化Vue--> 16 var vm = new Vue({ 17 el: '#app', //指定属性id里的app 18 //数据内容 19 data: { 20 text: 'hello world!!!' 21 } 22 }) 23 </script> 24 </body> 25 </html> `
通过浏览器打开index.html，网页效果如图
用Vue.js编写Hello World——Webpack方式
对于Vue.js框架而言，输出一个简单的Hello World程序可能并不简单，浏览器本身不识别后缀为vue的文件，所以vue文件不能通过浏览器直接打开，类似于HTML这样的页面也无法直接引入vue文件。
如果想要使用Vue.js编写程序，需要Webpack打包工具将.vue文件编译成普通的JavaScript文件，再通过页面的引入去执行这个JavaScript文件。
【示例2-5】用Vue.js编写HelloWorld——2。
（1）新建项目工程，使用npm init初始化项目代码，此时生成package.json文件，接着安装Webpack，命令如下：
npm install webpack
（2）Webpack安装后需要再安装webpack-cli（一个使用Webpack的命令行工具），命令如下：
npm install webpack-cli
（3）安装Vue.js，命令如下：
npm install vue
（4）安装vue-loader和vue-template-compiler，这样才可以让Webpack识别Vue.js，安装命令如下：
npm install vue-loader
npm install vue-template-compiler
安装完成后的package.json文件如下：
`{ "name": "2-3-2", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "vue": "^2.6.10", "vue-loader": "^15.7.1", "vue-template-compiler": "^2.6.10" }, "devDependencies": { "webpack": "^4.39.3", "webpack-cli": "^3.3.7" }`
（5）新建一个webpack.config.js文件，用于配置Webpack打包工具。Webpack的配置需要指定入口文件并且引入vue-loader，完整的代码如下：
` 01 const path = require('path'); 02 const VueLoaderPlugin = require('vue-loader/lib/plugin'); 03 04 module.exports = { 05 //指定入口文件 06 entry:path.join(__dirname, 'app.js'), 07 //指定输出的文件位置和文件名称 08 output: { 09 path: path.join(__dirname,'dist'), 10 filename: 'build.js' 11 }, 12 plugins: [ 13 //在使用新版的vue-loader时，必须引入这个插件 14 new VueLoaderPlugin() 15 ], 16 module: { 17 //指定不同格式的规则 18 rules: [ 19 //解析.vue文件 20 { 21 test: /\.vue$/, 22 loader: 'vue-loader' 23 }, 24 ] 25 } 26 }`
这里指定了入口文件导出的位置和引入模块时的一些规则，通过这个配置让Webpack可以编译同级目录中的app.js文件，并且在dist文件夹中建立新的build.js作为导出的文件。
（6）编辑app.js中的内容。在app.js中需要引入Vue.js、获取页面中的body节点，并且将所有需要显示的内容挂载在上面，完整的代码如下：
` 01 //引入vue 02 import Vue from 'vue' 03 import Hello from './helloworld.vue'; 04 05 const root = document.createElement('div') 06 document.body.appendChild(root) 07 08 //mount将Hello模块挂载到root根节点中 09 new Vue({ 10 render: (h) => h(Hello) 11 }).$mount(root)`
（7）上述代码引入了一个还未建立的Hello模块，其文件名为helloworld.vue，也就是本例的Vue.js部分，该文件中指定了一个变量，赋值为HelloWorld并显示在页面上。
01 <template> 02 <div> 03 <p>{{text}}</p> 04 </div> 05 </template> 06 07 <script> 08 export default{ 09 name: "Hello", 10 data(){ 11 return { 12 text: 'HelloWorld!!!' 13 } 14 } 15 } 16
其中，{{text}}部分显示下方script/data中text的值“HelloWorld!!!”，而模板的部分将会被挂载在一个HTML文件的body节点中，最终将所有的内容显示在页面中。
（8）Hello World实例到此就完成了。在命令行中使用如下命令打包：
webpack --config webpack.config.js
也可以将此命令添加到package.json中，通过webpack-cli的方式使用，这样会更加方便。修改后的代码如下：
{ "name": "2-3-2", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config webpack.config.js" }, "author": "", …… }
在命令行窗口中使用如下命令完成打包操作，
npm run build
