Vue.js项目开发实战最新章节_张帆著

1.4　Vue.js的安装

使用过jQuery等JavaScript框架的读者，应该都已经熟悉这类JavaScript框架的安装方式了，基本不出以下3种：

·下载.js文件用<script>标签引入；

·不下载直接使用CDN；

·不下载直接使用npm。

Vue.js也是这3种安装方式，通过普通网页引入的形式或者是各种包管理的形式均可以安装并使用Vue.js。但是对于不同的安装方法会存在不同的使用方式和项目的编写方式。下面详细介绍每一种方式。

注意：本书并不涉及太多的网页开发基础知识，包括但不仅限于HTML、CSS及基本的JavaScript，如果读者完全不了解网页基础开发，可以通过阅读相关的书籍或资料，进行深度的学习和练习。

1.4.1　使用独立版本

使用Vue.js可以通过引入<script></script>标签的方式进行引入，因为Vue.js同样也相当于JavaScript中的一个库，其使用的方式和jQuery一样简单。

Vue.js本身是不支持IE 8及其以下版本，因为其使用了不能被IE 8支持的ECMAScript 5特性。但是不用担心Vue.js的兼容性，如图1-7所示，现在所使用的大部分浏览器都已支持ES 5并且支持ES 6的标准，绿色部分（即图1-7中颜色较深的部分）为完全支持，可以看出，所有的流行浏览器均已完全支持ES 5语法。

图1-7　浏览器对于ES 5的支持程度

注意：关于浏览器是否支持某种技术，可以通过 http://caniuse.com/ 来查询。

下面开始搭建Vue.js的开发环境。当以标签形式引入Vue.js时，官方提供了两种不同的版本供用户和开发者选择：

·用于开发和测试环境的开发版；

·用于生产环境的最小压缩版，也就是Mini版。

和其他JavaScript插件的形式一致，使用.min.js的版本为最小压缩版，直接使用.js的环境为正式版。

注意：开发环境不要用最小压缩版，因为对于此版本的压缩版而言，去除了所有的错误提示和警告部分，可以使用开发版进行调试和开发。

（1）Vue.js开发版本地址为 https://vuejs.org/js/vue.js ，可以通过该地址将其下载至本地，再在页面中通过<script></script>标签进行引入。

（2）打开此地址可以看到Vue.js中的所有代码，复制所有的代码，然后在本地新建JS文件，再将代码粘贴进去。或者直接打开相关下载软件，新建任务下载，如图1-8所示。

（3）下载后的开发版本即为开发所需要的JS库。新建一个.html文件，这里命令为index.html，具体的目录结构如图1-9所示。

图1-8　新建下载任务

图1-9　项目结构

（4）在index.html中通过<script></script>标签来引入Vue.js。Vue.js的核心是允许采用简洁的模板语法声明将数据渲染进DOM，所以这里的示例通过数据来展示。

【示例1-1】引入本地Vue.js。

这里声明一个节点id为app，并且使用Vue.js将其绑定一个message变量，在JavaScript代码中将其赋值为Hello Vue.js。完整的代码如下，具体语法解析会随着本书的深入再逐步讲解。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<script src="vue.js"></script>
<!--HTML头部份-->
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
</div>
<script>
        // 逻辑部分代码，建立Vue实例
    var app=new Vue({
        el: '#app',
                // 逻辑部分代码，建立Vue实例
        data: {
            message: 'Hello Vue.js!'
        }
    })
</script>
</body>
</html>

本例网页打开后的显示效果如图1-10所示。

图1-10　显示效果

注意： Vue.js的核心功能仅仅是提供一个数据绑定的显示效果，所以可直接双击打开index.html页面，而非在服务器的条件下，其数据绑定功能依旧可以使用。

1.4.2　使用CDN安装

CDN（Content Delivery Network，内容分发网络）其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输得更快、更稳定，通过在网络各处放置节点服务器，构成在现有的互联网基础之上的一层智能虚拟网络。

CDN系统能够实时地根据网络流量和各节点的连接、负载状况，以及到用户的距离和响应时间等综合信息，将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可以就近取得所需内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度。

一般的网站利用CDN加速静态文件和资源，可能甚至引用的更多，这样将资源文件与业务代码一锅炖的方式适用于小型的、应用服务器压力并不大的系统（如并发、带宽、存储空间、资源等）。

CDN方式的优点是开发省力、发布省力、对服务器要求小、省钱、没有具体公网接入需求。许多小型、内部使用型的网站系统往往采取这种形式放置资源文件。

（1）有很多的网络服务或者是网站云主机商提供这类的服务，从收费到免费有各种不同形式，这里推荐一个国内常用的、免费的、前端开源的CDN加速服务，是由BootStrap中文网运作的，其地址为 http://www.bootcdn.cn/ ，主页如图1-11所示。

（2）在搜索框中搜索Vue.js后，这里会提供Vue.js及与Vue.js有关的开源JavaScript组件供开发者选择。

图1-11　开源的CDN主页

（3）单击进入Vue.js的选项，这里提供了最新版本和所有的历史版本，并且提供了很多相关的文件，如图1-12所示。

图1-12　最新版本的Vue.js

（4）本例暂时只需要Vue.js这个文件。为了方便用户的使用，BootCDN提供了两种复制方式：一种是复制链接地址，另一种是直接复制<script>标签。

【示例1-2】引入CDN中的Vue.js。

找到需要的 https://cdn.bootcss.com/vue/2.4.2/vue.js 标签，单击“复制<script>标签”按钮，在新页面index2.html中粘贴标签，替代本地Vue.js引入标签的位置。完整的代码如下：

<!DOCTYPE html>
<html lang="en">
<!--HTML页面代码部分-->
<head>
    <meta charset="UTF-8">
<title>Title</title>
<!--引入需要的Vue.js等相关的内容-->
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<!-- 定义显示的节点 -->
<div id="app">
    <p>{{ message }}</p>
</div>
<script>
// 逻辑部分代码，建立Vue实例
    var app=new Vue({
        el: '#app',
        data: {
// 定义相关的变量
            message: 'Hello Vue.js!'
        }
    })
</script>
</body>
</html>

运行该HTML文件，浏览器中的显示效果如图1-13所示，其效果和示例1-1中引入本地的Vue.js效果一致。

图1-13　实现效果

说明：可能读者会有疑问，仅仅是为了在网页中显示一行简单的Hello Vue.js，却需要如此烦琐的代码？Vue.js不是为了显示一个静态信息而出现的库，它提供了一个数据的双向绑定功能。也就是说，当动态更新message中的值时，并不需要刷新网页或更新节点，此节点的值会随着JavaScript中代码值的变动而改变，这就是Vue.js的强大之处。我们会在1.4.4节中介绍使用Chrome浏览器测试Vue.js的双向绑定，以此验证这个强大的功能。

1.4.3　“npm大法”安装

npm是一个非常有用的JavaScript包管理工具，通过npm可以非常迅速地进行Vue.js的安装、使用和升级，而不用担心由此所造成的混乱。在用Vue.js构建大型应用时推荐使用npm安装，它能很好地和Webpack或Browserify等模块打包器配合使用。

说明：第2章会详细介绍npm的安装和基本用法，读者如果不熟悉而且还没有安装npm，可以跳过本节，不影响读者继续阅读本节内容。

（1）Vue.js也提供了配套工具来开发单文件组件，在Windows中可以通过Win+R组合键运行CMD，Mac OS系统或者Linux系统中需先打开终端，然后在打开的CMD中输入以下命令安装相应的Vue.js。

npm install vue

安装效果如图1-14所示。

图1-14　CMD安装

（2）这样Vue.js就安装在了相关的项目中，也可以使用--global命令参数进行安装，Vue.js会自动全局安装。

（3）不仅如此，为了方便开发者开发相关的Vue.js大型应用，官方提供了一个非常方便的CLI命令行工具，该工具可以使用npm进行安装：

npm install --global vue-cli

安装完成后的效果如图1-15所示。

图1-15　安装CLI

注意：这里一定要进行全局安装，安装完成后，可以直接在命令行中使用，如果不能使用，提示无效的命令，请将其路径配置为全局路径。

（4）安装完毕后，使用以下命令进行测试：

vue –V

显示效果如图1-16所示，证明安装成功。

图1-16　安装成功

1.4.4　使用Chrome浏览器测试Vue.js的双向绑定

读者可以通过Chrome浏览器提供的调试功能来测试Vue.js提供的这个双向绑定功能。

（1）在Chrome浏览器中按F12键（苹果计算机需要在右键快捷菜单中选择“检查”命令），可以打开Chrome浏览器的控制台，选择Console选项卡，如图1-17所示。

图1-17　Chrome控制台

（2）控制台中提示需要安装vue-devtools调试工具，并且已经给了相关的下载GitHub地址，可以单击此地址进行下载。进入此地址后，可以看到其中提供的开源代码和不同版本的安装文件，拉至页面下方的readme部分，单击Get the Chrome Extension链接，即为Chrome版本的调试工具安装包，如图1-18所示。