【九層之臺】Web開發教程：6. VueCli

6. VueCli

本章內容比較多，主要介紹VueCli的使用方法。VueCli是Vuejs團隊推出的一個開發輔助工具，被我們稱爲“腳手架”。如果說，上一章裏面用Vuejs前端框架控制網頁應用的邏輯好似開高達，那麼本章的VueCli可能就是坐在辦公室裏用程序開高達了。VueCli給我的感覺是，它已經脫離了開發輔助工具的範疇，而是發明了一種新的開發方法。下面我們就來看一看它的使用方法。

官網地址：https://cli.vuejs.org/

Nodejs & npm

在開始開發之前，我們要先介紹一些基礎內容。

Nodejs是一個軟件，它的功能是把JS代碼運行在本地命令行上。在之前的JS章節，我們就說過網頁JS是運行在瀏覽器上的，JS代碼也是通過瀏覽器來解析和編譯的。那麼，如何讓JS脫離瀏覽器工作呢？其中一個方法就是使用Nodejs。

以Windows操作系統爲例，首先我們去Nodejs官網下載一份安裝包，點擊運行並安裝。等它安裝好以後，我們就可以打開系統命令行，輸入node，然後就可以輸入JS代碼愉快玩耍了！如果使用node index.js命令，還可以運行一個JS腳本代碼文件。

與Nodejs一起被安裝的，其實還有我們最好的夥伴npm，它是Nodejs的包管理器。所有的Nodejs項目都是以“包”的形式存在的，我們把所有的代碼放在一個文件夾裏，附上這個項目所需要的依賴包。依賴包就是前人寫好的其他“包”，大量的代碼包一層一層地堆疊出一個Nodejs項目。

那麼，爲什麼需要Nodejs呢？我們想做的事情是，寫一些簡單的代碼，然後通過一個工具把簡單的代碼給打包，形成一個HTML、CSS、JS三部分代碼組成的網頁。我們說這個打包工具是VueCli，現在我要告訴你們，VueCli本身也是用JS代碼編寫的，它需要運行在Nodejs上（本地運行）。我們用一些運行在Nodejs上的代碼來打包另一些代碼，最後給出一份網頁應用的代碼，是不是很神奇？

安裝

按照官網上的安裝方法，打開本機命令行（Windows系統下按鍵盤上win + Enter並輸入powershell），輸入命令（並按回車）：

npm install -g @vue/cli

等待命令執行完畢，VueCli就安裝好啦。其實就是一個代碼包被下載到了你的電腦上。讓我們嘗試查看一下VueCli的版本號：

vue --version

如果你可以看到版本號，說明一切正常！

創建項目

官網上的教程主要講了命令行的方法，瞭解一下當然很好，但是從VueCli3開始，你就只需要記住一行命令，那就是：

vue ui

回車以後，稍等一下下就會發現你的瀏覽器自動打開並顯示了一個頁面。VueCli控制檯閃亮登場！
我就喜歡這種傻瓜又直接的開發工具。
歌頌它的偉大吧！VueCli的所有功能都可以在這個控制頁面上完成。

點擊創建項目，取個名字，選個文件夾保存，然後一路默認。選擇組件的時候（自定義）可以選一下Vue Router，也可以什麼都不選創建一個最最簡單的工程。

在一小段等待以後（可以在系統的命令行界面看到進度），我們的VueCli項目就創建完成啦！

VueCli項目控制檯

在VueCli控制檯上，可以看到左邊的標籤。其中大多是都很淺顯易懂，例如可以通過搜索並添加依賴，來添加別人寫好的組件庫等等。

這裏主要要介紹“任務”標籤上的兩個功能，serve和build。

• serve：熱更新的調試預覽。通過點擊serve任務的開始鍵，我們可以讓VueCli將我們的項目臨時打包，打包完成以後（前提是代碼裏面沒有錯誤），可以通過“打開應用”按鈕在另一個頁面上預覽我們網頁應用的效果。如果這個時候你修改了代碼，預覽頁面也會實時刷新。
• build：構建。點擊build任務的開始鍵，VueCli就會幫助我們把我們的代碼打包爲一個正常的網頁，默認會輸出到項目目錄下的dist文件夾中。構建出的網頁就是我們最終發佈的網頁文件。

我們在控制檯上開啓我們剛剛創建的新項目，開始serve，等它準備好以後點擊“打開應用”，就可以在新的頁面看到我們的項目的情況了！新創建的項目並不是完全空白的，而是有VueCli的默認項目內容。

同時，在VueCli控制檯的“配置”頁面上，有一些常用的配置。通常來說這些配置都不需要修改，如果有需要請自行百度！

VueCli項目目錄

打開新建的VueCli項目所在的文件夾，我們來看一看項目目錄下面都有些什麼。項目目錄下面大多數東西都是與Nodejs包有關的，例如package.json，我們只需要關注以下幾個內容：

• /public：這個文件夾存放了VueCli工程的構建模板，也就是說，VueCli工程最後構建的所有代碼都帶上這裏的index.html作爲網頁的入口。通常來說我們需要在其中的body元素上新增style="margin: 0;"來取消瀏覽器body元素自帶的邊距。
• /src：源碼，也就是主要的開發內容。
  • /asset：資源，存放一些圖片什麼的
  • /components：組件，通常是小組件（下一節詳述）
  • /router：（如果創建項目的時候選了Vue Router）路由設置（下面詳述）
  • /views：視圖組件
  • App.vue：主應用組件
  • main.js：應用主入口
• vue.config.js：需要自己創建，是一些VueCLi的高級配置

簡要介紹一下VueCli的文件之間的聯繫：

1. 首先/src/main.js中生成的Vue對象綁定了/public/index.html中那個具有屬性id="app"的塊元素，所以相當於頁面上所有的內容都由Vuejs框架接管。
2. 接下來，/src/main.js中的Vue對象使用渲染函數，指定渲染爲/src/App.vue中的主應用組件。簡單理解起來，就是在Vuejs框架下把HTML代碼中的塊元素替換爲了/src/App.vue組件。
3. 通過編寫/src/App.vue，並根據需求引入路由視圖（見下面詳述），或者直接引入/src/views中的視圖組件形成用戶界面的框架
4. 通過編寫/src/views文件夾中的視圖組件，在其中引入/src/components文件夾中的小組件，最終形成一個複雜的應用。

下一節中我們就會詳細介紹Vue組件。

Vue組件

如果說要給VueCli選一個關鍵詞的話，那就是“組件”了。其實，不需要VueCli輔助，Vuejs框架本身就支持了組件，只不過比較難用，寫起來不清晰。

在VueCli中，每一個組件都是固定的格式的.vue文件，舉個例子：

<template>
  <h1>{{ message }}</h1>
</template>

<script>
  export default {
    name: "MyComponent",
    data() {
      message: "Hello"
    }
  }
</script>

<style scoped>
  h1 {
    color: red;
  }
</style>

可以看得到，組件被三個HTML標籤分爲了三個部分：

• template：模板部分，使用HTML代碼標記該組件的內容。注意，template元素內部只能有一個子元素，如果需要有多個，請用一個塊元素把它們包裹起來。
• script：腳本部分，其中可能包含了引入其它組件，但一定包含有export default，大括號內部的內容相當於一個Vue對象的內部，但略有不同，下面詳細介紹。
• style：樣式部分，使用CSS代碼控制模板部分的元素的樣式，和正常的CSS一樣。默認情況下樣式部分的CSS會應用於整個應用，這是很不方便的，如果我們需要限制樣式只對當前組件生效，就需要在style的開始標籤上加一個scoped，就像上面的代碼裏一樣。

模板部分和樣式部分沒什麼好說的，都是以前學習並熟練的內容了。接下來我們着重介紹腳本部分，特別是export default內的內容。export default內部的內容類似於一個Vue對象，但略有不同。它經常包括以下一些內容：

• name：當前組件的名稱。用於給別的組件引用的時候使用，注意，以前Vue對象中的el變量不需要寫了，因爲這裏沒有顯式的綁定HTML元素，組件都是通過main.js中定義的渲染函數進行渲染的。
• data：與Vue對象中的data對象不同，這裏的data必須是一個函數，只不過這個函數返回當前組件需要使用的數據對象，就像上面的例子中一樣。
• components：在此對象中列舉當前組件使用的其他組件的組件名
• props：用於組件之間傳遞值（自行去官網學習）
• computed：計算屬性，與Vue對象中一樣
• methods：對象方法，與Vue對象一樣

下面，舉例看一看，如果另一個組件要引用這個組件，應該怎麼寫：

<script>
  import MyComponent from "@/components/MyComponent.vue";
  export default {
    name: "NewComponent",
    components: {
      MyComponent
    }
  }
</script>

可以看到，我們在這裏使用import語句從一個文件當中引用了MyComponent組件。VueCli中規定引用目錄@就是我們的/src目錄。然後在components對象當中列舉了引用的組件名，它們才真正被引用進當前組件。想要把這個組件放進當前組件的視圖中，我們可以在模板部分寫：

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

可以看到，我們的組件名會自動變成-連接的小寫單詞。

Vue Router

在VueCli中，不得不講一講Vue Router。首先，我們的VueCli構建出的網頁，默認都是單頁應用。也就是說，網頁只有一個HTML文件index.html，其他視圖的變化都是通過Vuejs框架控制的。從上一章我們知道，我們可以通過Vuejs的控制語句v-if來控制視圖的選擇性渲染，但是如果我們的應用需要多個不同的視圖，並實現它們之間的切換，單純通過v-if就比較麻煩。於是，VueCli提供了強大的Vue Router路由模塊。

我建議大家去官網上詳細學習，這裏我只做簡要介紹。

首先，我們發現我們在應用入口main.js當中會多一個router模塊，並且App.vue主應用組件中的模板部分會出現一個奇妙的組件<router-view></router-view>。這是什麼呢？這個組件的渲染控制權，會從當前的主應用組件移交到我們的router上。router會根據我們的網頁URL（網址）來判斷當前這個部分應該渲染爲什麼組件。

仔細觀察我們VueCli打包的網頁的URL，我們會發現網頁URL都形如：http://domain/.../#/.../，一定會出現一個#，這就是VueCli的路由管理所使用的機制，#之前的內容可以是網頁的相對路徑（在服務器上的存放位置），但是從#開始的部分就被Vuejs讀取並根據這些來控制網頁上顯示的組件。

通過配置router/index.js我們就可以實現對不同的路由（#後面的部分）顯示不同的組件。其中還支持路由組件的懶加載（不訪問不加載）和子路由等等，如有興趣請自行學習官網教程。

Vuejs相關的官網教程還是寫的非常好的。

組件間通信

對於兩個組件來說，它們之間如何交換信息呢？如果用戶在其中給一個組件中點擊了一個按鈕，如何讓另一個組件知道呢？一般來說有以下幾種方法：

• props：如果是一個組件想要傳遞信息給它內部引用了的組件，可以使用這種方法。子組件中，props數組中的名稱，可以通過在父組件的模板部分在組件標籤上以屬性的方式傳值。例如，如果子組件有props: ["name"]，那麼父組件可以通過<my-component name="test"></my-component>的方式傳入字符串test作爲子組件中name變量（根據props自動生成的變量）的值。當然，你也可以使用v-bind讓這個值動態變化。
• emit：子組件中的事件，可以通過emit方法傳遞到父組件。例如，子組件的JS代碼中調用了全局函數this.$emit("hey")，父組件可以在標籤上監聽hey事件，並連接一個處理函數：<my-component @hey="handle"></my-component>。
• 引用同一個管道模塊：這是JS的方案，通過引用同一個模塊（不一定是Vue組件）可以實現信息的傳遞，不常用，不做詳述。
• Vuex：噹噹噹當！隆重介紹Vuex！Vuex與Vue Router一樣，是官方出品的一個插件模塊。因爲大型的VueCli項目當中信息傳遞很難調度，所以誕生了Vuex。只要安裝了Vuex，所有的組件都可以引入Vuex中的工具函數，並且操作Vuex中存儲的數據，從而實現組件之間的數據共享。如果有興趣，當然要去自己學習啦！看官方教程這個部分：https://vuex.vuejs.org/zh/guide/state.html （建議使用上面的mapState之類的輔助函數！）再在默認生成的Vuex默認代碼上摸索一下吧！

開發輔助

首先，大多數文本編輯器都有針對VueCli開發的插件，例如Sublime中的Vue Syntax Highlight，這些插件可以大幅度減輕編寫Vue組件的壓力，因爲默認情況下把HTML、CSS、JS寫在一個文件當中，代碼的顏色和高亮是很不好看的。

其次，在Google Chrome瀏覽器中有一個非常好用的插件Vue Devtools，它可以在分析在調試模式中的Vue應用的很多數據，顯示每個組件的狀態和事件等等，有條件的同學可以安裝一下。

最後，必須要說一說項目目錄下的vue.config.js文件，通常來說我們會在裏面配置反向代理來解決前端網頁調試的時候出現的跨域問題（不懂沒問題，遇到的時候再回來）。例如：

module.exports = {
  devServer: {
    proxy: {
      '/api/': {
        target: 'http://url/',
        changeOrigin: true
      }
    }
  }
};

就可以轉發/api/開頭的網絡請求到http://url/api/上，我們大概會在網絡章節重新見到它。

引入組件庫

如果覺得自己寫所有的組件很累，又想要頁面變好看，怎麼辦呢？當然是拿前輩們做好的組件庫啦！遇到一個組件庫，只要支持Vue，按照它的指南去安裝，就可以在VueCli中很輕鬆地引入。你可以不花時間寫CSS就創造出漂亮的按鈕、輸入框、表格，你也可以輕輕鬆鬆地快速構建出你想要的功能。

什麼？要我推薦幾個？下面的章節會有的！

快速、分片、通用，這就是VueCli，一個無限可能的地方。