Vue.js+Node.js全栈开发实战最新章节_王金柱著

2.2 Vue.js快速开发环境

本节主要介绍在Windows 10/11系统平台下，如何通过普通的代码编辑器搭建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://cdnjs.cloudflare.com/ajax/libs/vue/3.3.13/vue.cjs.js，该版本包含完整的警告信息和调试模式。“生产版本”的下载地址为https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.13/vue.cjs.min.js，该版本删除了相关警告信息（体积更小、运行更快），用于最终打包发布时使用。

提示： 一般情况下，JavaScript库文件为了区分“开发版本”和“生产版本”，会在“生产版本”的文件名中加入“min”字符串以示区别。

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

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

01  <!DOCTYPE html>
02  <html lang="en">
03  <head>
04    <meta charset="UTF-8">
05    <meta name="viewport" content="width=device-width, initial-scale=1.0">
06    <script src="vue.min.js"></script>
07    <title>Hello Vue.js</title>
08  </head>
09  <body>
10      <div id="app">
11          {{ message }}
12      </div>
13      <script>
14          var vApp = new Vue({
15              el: '#app',
16              data: {
17                  message: 'Hello Vue.js!'
18              }
19          })
20      </script>
21  </body>
22  </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种是unpkg方式（Vue官网推荐的方式），具体如下：

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

第3种是jsdelivr方式，具体如下：

https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js // 注意版本号

以上3种方式中，推荐使用第1种Vue官方给出的unpkg方式，它相对稳定且能保证及时更新。

下面，我们将【代码2-1】按照CDN方式进行改写，具体如下：

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

01  <!DOCTYPE html>
02  <html lang="en">
03  <head>
04      <meta charset="UTF-8">
05      <meta name="viewport" content="width=device-width, initial-scale=1.0">
06      <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
07      <title>Hello Vue.js</title>
08  </head>
09  <body>
10      <div id="app">
11          {{ message }}
12      </div>
13      <script>
14          const { createApp, ref } = Vue
15          createApp({
16              setup() {
17                  const message = ref('Hello Vue!')
18                  return {
19                      message
20                  }
21              }
22          }).mount('#app')
23      </script>
24  </body>
25  </html>

【代码说明】

· 在第06行代码中，通过<script>标签以unpkg方式引入了全局构建版本的Vue。

· 在第10～12行代码中，通过<div>标签定义一个分区元素及其id属性值（id="app"）。第11行代码中的双花括号（{{ }}）是Vue.js框架专用的模板语法（Mustache语法），双花括号内的message为数据绑定对象。

· 第13～23行代码定义的是Vue.js脚本语言，通过createApp方法实例化Vue组件，并通过setup钩子在组件中使用组合式API的入口。具体内容如下：

➢ 第17行代码通过ref引用定义一个字符串常量（message）。

➢ 第18～20行代码通过return关键字返回第17行代码定义的message常量。

➢ 第22行代码通过调用mount方法实现将数据内容渲染到页面中指定的DOM元素上。

读者可以自行测试一下【代码2-2】，页面效果与【代码2-1】是完全一致的。

2.2.3 兼容ES Module的方式

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

<script type="module">
   import Vue from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
</script>

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

<script type="module">
    import vue from 'https://cdn.jsdelivr.net/npm/vue@3.3.4/+esm'
</script>

下面，我们将【代码2-1】按照ES Module方式进行改写，具体如下：

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

01  <!DOCTYPE html>
02  <html lang="en">
03  <head>
04      <meta charset="UTF-8">
05      <meta name="viewport" content="width=device-width, initial-scale=1.0">
06      <title>Hello Vue.js</title>
07  </head>
08  <body>
09      <div id="app">
10          {{ message }}
11      </div>
12      <script type="module">
13          // import vue with ES module
14          import {createApp,ref} from
'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
15          // app
16          createApp({
17              setup() {
18                  const message = ref('Hello Vue!')
19                  return {
20                      message
21                  }
22              }
23          }).mount('#app')
24      </script>
25  </body>
26  </html>

【代码说明】

· 在第14行代码中，通过import命令以ES Module方式引入了全局构建版本的Vue。

· 在第09～11行代码中，通过<div>标签定义一个分区元素及其id属性值（id="app"）。第10行代码中的双花括号（{{ }}）是Vue.js框架专用的模板语法（Mustache语法），双花括号内的message为数据绑定对象。

· 第16～23行代码定义的是Vue.js脚本语言，通过createApp方法实例化Vue组件，并通过setup钩子在组件中使用组合式API的入口。具体内容如下：

➢ 第18行代码通过ref引用定义一个字符串常量（message）。

➢ 第19～21行代码通过return关键字返回第17行代码定义的message常量。

➢ 第23行代码通过调用mount方法实现将数据内容渲染到页面中指定的DOM元素上。

读者可以自行测试一下【代码2-3】，页面效果与【代码2-1】是完全一致的。