2.2　Vue.js快速开发环境

本节主要介绍在Windows 10系统平台下，如何通过Visual Studio Code搭建Vue.js框架的快速开发环境。

2.2.1　直接通过<script>引入本地Vue.js

Vue.js框架本质上还是一个JavaScript开发库，因此仍旧可以直接通过<script>标签引入本地的Vue.js文件，这也是最原始的开发方式。如果读者打算使用该方式，就需要将Vue.js库文件下载到本地。

首先，访问Vue.js的中文官方网站（https://cn.vuejs.org/），在介绍“安装”方法的页面中可以找到Vue.js的库文件。Vue.js库文件包含两个版本，分别是“开发版本”和“生产版本”。“开发版本”的下载地址为https://cn.vuejs.org/js/vue.js，该版本包含完整的警告信息和调试模式。“生产版本”的下载地址为https://cn.vuejs.org/js/vue.min.js，该版本删除了相关警告信息（体积更小、运行更快），用于最终打包发布时使用。

接下来，我们创建一个简单的Vue单页面文件，就是在HTML 5页面中直接引入Vue.js库文件，在页面中输出一行简单的欢迎信息（“Hello Vue.js!”），代码如下：

【代码2-1】（详见源代码hellovue目录中的hellovue-script.html文件）

【代码说明】

• 第06行代码中，通过<script>标签引入了本地的vue.min.js库文件。
• 第10～12行代码中，通过<div>标签定义了一个层元素及其id属性值（id="app"）。第11行代码中的双大括号“{{ }}”是Vue.js框架专用的模板语法（Mustache语法），双大括号内的message为数据绑定对象。（后文中会对Vue.js语法进行系统的介绍）
• 第13～20行代码定义的是Vue.js脚本语言，通过“new Vue()”构造函数实例化Vue对象，这是创建Vue对象的入口。具体内容如下：

■　第15行代码通过el属性绑定DOM元素（"#app"），注意“#”前缀标识符的使用。

■　第16～18行代码通过data属性定义具体数据，第17行代码定义的message属性对应第11行代码定义的数据绑定对象（message），从而实现将数据内容渲染到页面中指定的DOM元素上。

在上面的代码中，HTML页面代码与Vue.js脚本代码是写在同一个页面文件中的，我们可以通过运行浏览器来进行测试，如图2.1所示。

图2.1　通过浏览器测试Vue.js代码

如图2.1中的箭头所示，【代码2-1】中第17行代码定义的message字符串信息被成功渲染到页面中显示了。

2.2.2　通过CDN方式引入Vue.js

对于CDN方式，相信大多数读者都比较熟悉，Vue.js框架支持多种CDN的使用方式，下面进行详细介绍。

第1种是cdnjs方式，具体如下：

https://cdnjs.cloudflare.com/ajax/libs/vue/2.x.xx/vue.js  // 注意版本号

第2种是unpkg方式，具体如下：

https://unpkg.com/vue@2.x.xx/dist/vue.js  // 注意版本号

第3种是Staticfile CDN（国内）方式，具体如下：

https://cdn.staticfile.org/vue/2.x.xx/vue.min.js  // 注意版本号

以上的3种方式中，前两种是国外的CDN源，最后一种是国内的CDN源，推荐使用国外的CDN源，相对稳定且保证及时更新。

2.2.3　兼容ES Module的方式

在Vue.js官网还推荐一种兼容ES Module的构建文件，适用于使用原生ES Modules的开发场景，具体如下：

<script type="module">
 import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.x.xx/dist/vue.esm.browser.js'
</script>

注意“type="module"”和import命令的使用，遵循的是ECMAScript 2015规范标准。另外，这种方式也支持使用CDN源，具体如下：

https://cdn.jsdelivr.net/npm/vue/dist/vue.js  // 开发环境
https://cdn.jsdelivr.net/npm/vue@2.6.11       // 生产环境，建议明确指定版本号