下载掌阅APP，畅读海量书库
立即打开
本节主要介绍Vue.js框架，包括它的下载、安装和简单使用，最后还会简单介绍一下其他页面显示框架，并分析它们的优缺点。
Vue.js是最近两年前端框架里最耀眼的一个，开发者是尤雨溪。Vue.js是构建Web界面的JavaScript库，通过简洁的API提供高效的数据绑定和灵活的组件系统。
与其他大型框架不同的是，Vue.js被设计为自底向上逐层应用。Vue.js的核心库只关注视图层，方便与第三方库或既有项目整合，非常容易学习。Vue.js的官方主页为https://cn.vuejs.org/，如图2-22所示。
图2-22 Vue.js官方主页
Vue.js是一个开源项目，截至笔者写作本书时（2020年年初），Vue.js项目在GitHub上获得了近15万颗星的成绩。如果使用Vue.js，首先需要了解大量相关的生态和一些官方的包，接下来向读者逐一介绍。
注意： Vue.js不支持IE 8及以下版本，因为它使用了IE 8无法模拟的ECMAScript 5特性，但它支持所有兼容ECMAScript 5的浏览器。
安装Vue.js有两种方法：
（1）类似于Bootstrap或jQuery，直接通过HTML文件中的<script></script>标签引用。
为了方便开发者使用，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"
}
}
2.3.2节介绍了安装Vue.js的两种方式，第一种是通过CDN方式或引入静态文件，通过CDN方式编写Hello World程序较为简单，下面直接演示。
【示例2-4】 用Vue.js编写HelloWorld——1。
新建HTML文件，命名为index.html，引入Vue.js。完整的代码如下：
01 <!DOCTYPE html>
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，网页效果如图2-23所示。
图2-23 直接通过CDN引入Vue.js的效果
对于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 </script>
其中，{{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": "",
……
}
在命令行窗口中使用如下命令完成打包操作，执行效果如图2-24所示。
npm run build
图2-24 打包完成
执行成功后，dist文件夹中会自动生成一个build.js文件。打开该文件后，发现其本身的代码已经经过了完整的编译。下面在HTML文件中引入该编译文件来查看效果。
（9）在dist文件夹下新建一个HTML文件index.html，用于引入build.js文件，代码如下：
01 <!DOCTYPE html>
02 <html lang="en">
03 <head>
04 <meta charset="UTF-8">
05 <title>Title</title>
06 </head>
07 <body>
08 <!--注意生成的JavaScript文件的地址-->
09 <script src="build.js"></script>
10 </body>
11 </html>
在浏览器中打开该HTML文件，页面效果如图2-25所示，这样就完成了Vue.js版本的Hello World示例。
图2-25 Vue.js版本的HelloWorld示例
注意： Webpack还存在很多不同的用法，读者可以参考官方文档https://webpack.js.org/。
Vue.js的API参考了AngularJS、KnockoutJS、Ractive.js和Rivets.js，因此作为一个后来者，Vue.js是对上述框架的总结和优化，不仅如此，它还增加了很多新的特性，所以非常流行。
除了Vue.js框架之外，值得一提的还有React.js框架，如图2-26所示。
图2-26 React.js界面
React.js和Vue.js这两个框架有许多相似之处，二者都是为了与根库一起使用而构建的，并且都是基于Virtual DOM模型，都使用组件化的结构。
Vue.js框架的优点如下：
·生态丰富，学习成本低；
·简单易用；
·官方库较多，程序开发风格统一且文档全面；
·轻量、高效；
·依赖其他开源模块较少，可以简单地实现功能重构。
Vue.js框架的缺点如下：
·使用者和贡献者较为单一，GitHub中的使用者大部分是中文使用者；
·非官方的小众库不一定支持Vue.js。
React.js的优点如下：
·灵活和优秀的响应性；
·虚拟DOM使性能得到极大提升；
·丰富的JavaScript库，面对全世界的贡献者；
·丰富、强大的扩展性；
·有Facebook等专业开发人员的支持；
·多平台的优势，并且React Native等技术已广泛使用。
React.js的缺点如下：
·功能复杂，体积庞大；
·学习难度比较高。