- Vue.js+Node.js全棧開發實戰（第2版）
- 王金柱編著
- 1896字
- 2024-12-31 20:26:04
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】是完全一致的。