引言

開發 Vue 專案前，做好開發環境的相關配置非常重要，它可以提高我們的開發效率。

安裝 Vue CLI

Vue CLI 是 Vue 的腳手架工具，用於自動生成 Vue 專案骨架。

安裝 Vue CLI 前，首先要確保用於開發的電腦上具備 Node 環境。

首先，進入命令列，輸入下面的命令安裝 Vue CLI：

npm install -g @vue/cli

安裝好後，可以在命令列中使用 vue 命令。

現在，我們利用 vue 命令檢視一下 CLI 的版本：

如需升級全域性的 Vue CLI，可以輸入下面的命令：

npm update -g @vue/cli

建立一個 Vue 專案

我們可以在磁碟上新建一個 code\\vue 目錄，然後在命令列中輸入下面的命令來建立一個 Vue 專案，注意，專案名最好不要用中文：

vue create vue-guide

此時，會彈出一個選項介面，我們選擇第三項 Manually select features，按回車鍵，手動選擇特性來安裝：

接下來，我們會看到有許多選項（舊版本的 CLI 可能不會有這麼多選項），我們可以按鍵盤上的 a 鍵全選，i 鍵反選：

也可以按空格鍵對單一選項進行選中或取消。

然後按回車鍵進行下一步安裝，不過，先別急著進入下一步。

我們可以先了解每個選項的大概用意，然後根據需求選擇安裝。

Choose Vue version

如果選中它，會在下一步出現一個選擇列表，詢問我們將要安裝的 Vue 版本，主要有兩個 2.x 和 3.x (Preview)。

我們選擇這個選項，並在後續選項中選擇 2.x。

Babel

作用是轉碼。

如果選中它，在開發中我們可以寫 ES6（又或者叫 ES NEXT，有許多寫起來很爽的語法糖）程式碼，Babel 會將 ES6 程式碼轉換成 ES5。我們選擇這個選項。

TypeScript

支援用 TypeScript 書寫專案程式碼。我們暫時不需要選擇。

Progressive Web App (PWA) Support

漸進式 Web 應用程式，簡單來說，PWA 就是為了媲美原生 App 的流暢體驗，提升 Web App 效能，改善使用者使用 Web 的體驗，而應用了多種技術的 Web App。例如，利用 Web App 可以像原生 App 那樣離線也可以進行瀏覽。我們暫時不需要選擇。

Router

支援 vue-router，如果選擇該選項，會在後續安裝中出現一個選項，詢問我們是否使用歷史記錄模式的路由，該選項也可以在程式碼中進行配置。我們暫時不需要選擇，等到學習的時候再安裝。

Vuex

支援 Vuex，我們暫時不需要選擇，用到了再安裝。

CSS Pre-processors

支援 CSS 前處理器，如果您在專案計劃初期就決定用到例如 LESS、SASS 等 CSS 預處理工具，建議您選擇，但在這裡，我們暫時不需要選擇。

Linter / Formatter

程式碼風格檢查與格式化，例如 ESLint。我們選擇這個選項，並在後續選項中選擇 ESLint + Prettier 。

Unit Testing

單元測試，站在開發者的角度，把程式碼看成一個個的元件，在每個元件上進行單獨測試。我們暫時不需要選擇。

E2E Testing

端到端的測試，站在使用者的角度，不管內部怎麼實現，只管測試專案從頭到尾的流程是不是和最初設計的一樣。我們暫時不需要選擇。

我們的安裝只選擇下面三項：

接下來，會提示我們選擇在什麼時候進行程式碼的規則檢測，有兩個選項：

Lint on saveLint and fix on commit

第一項是儲存時進行檢測，第二項是提交時進行檢測，我們選擇第一項 Lint on save，儲存時進行檢測，按回車鍵：

然後，安裝會詢問我們：“你更喜歡將 Babel、ESLint 等的配置放在哪裡?”，有兩個選項：

In dedicated config filesIn package.json

第一項是單獨儲存在專用的檔案中，第二項是將配置寫在 package.json 檔案中，我們選擇第一項 In dedicated config files，單獨儲存在專用的檔案中，按回車鍵繼續安裝：

下面的步驟，會詢問我們是否將以上配置儲存為未來建立新專案的預置？我們選擇不儲存，輸入 n ，按回車鍵，專案開始安裝，靜靜等待安裝完成：

專案安裝完後，我們可以在命令列進入專案目錄，然後執行命令啟動專案：

專案啟動後，可以看到下面圖中顯示的提示資訊，這說明專案已經成功啟動了：

現在，我們可以開啟瀏覽器，輸入 http://localhost:8080 預覽頁面：

至此，基於 Vue 的專案骨架已經搭建好了。

Visual Studio Code

Visual Studio Code 簡稱 VS Code，具有免費、開源、自定義配置等特點，對前端開發非常友好，所以，我習慣採用 VS Code 作為預設的前端開發工具。

利用 VS Code 開發前，我們先看看需要配置的最基礎的東西有哪些？

首先，將我們建立好的專案拖入到 VS Code 中：

在 VS Code 左側我們可以看到專案的結構，其中 src 目錄為我們開發的原始碼目錄。

不過， VS Code 會在右下角提示我們是否安裝推薦的擴充套件：

手動修復程式碼

在一切配置之前，先試試 lint 命令。

先新增幾個屬性，在 <script> 部分中新增 data 函式，為例項增加些屬性，同時 <template> 模板部分為 HelloWorld 元件增加上這些屬性傳遞：

儲存程式碼時，可以看到命令列工具提示有 3 個警告，但專案依然可以正常執行，這說明我們安裝專案時的 ESLint 起作用了：

然後，我們修改一下程式碼的格式，讓程式碼看起來不那麼整齊，<template> 模板部分和 <script> 部分都可以修改，然後儲存，就像下面這樣：

此時，命令列應該報了更多的警告。

在命令列中，按 Ctrl + C 鍵，結束執行的專案，然後輸入下面的命令，讓程式為我們自動檢測並修復：

正如您所見，程式碼自動修復了。

如果在多人開發中，當我們拿到別人的程式碼時，一般可以進行一下 lint，但後面還有其它方法可以不用這麼麻煩的每次 lint。

安裝 Vetur 外掛

目前，我們的程式碼沒有高亮顯示，並且只能藉助手動格式化，不過，安裝了 Vetur 外掛後，情況會有所好轉，點選左側欄的 “擴充套件圖示”，在搜尋中輸入 Vetur，然後安裝外掛：

外掛安裝好後，可以重啟 VS Code。

現在，我們的 .vue 檔案可以高亮顯示了，並且在程式碼編輯區點選滑鼠右鍵，在彈出的選單中出現了 “Format Document”，格式化文件選項。

這是 Vetur 外掛的自帶的格式化功能。

注意觀察兩次格式化 <template> 模板部分的區別：

這是因為我們在安裝專案的時候採用的是 "Prettier" 形式美化程式碼，而 Vetur 則採用 "PrettyHtml" 的形式。

這一點可以通過依次點選頂部選單欄 file -> Preferences -> Settings （快捷鍵 Ctrl + ,），然後在搜尋框中搜索 Vetur， 檢視相關的配置。

不過，我們可以修改 Vetur 的配置，讓它和我們安裝專案時選擇的格式化形式一致。

建議直接修改 .json 配置檔案，而不是在圖形介面裡直接配置，因為這也會將配置寫入到配置檔案中，以後檢視配置檔案會很難看懂都改了哪些配置。

Workspace 代表僅對該專案應用的配置，這麼做是為了避免以後有更多的專案利用 VS Code 開發，而共享一份配置檔案，這樣會很棘手。

此時，可以看到，在資源管理器中出現了 settings.json 配置檔案，我們的專案配置就寫在這裡。

現在，我們來往 settings.json 檔案中輸入下面的程式碼，來讓 Vetur 格式化 <template> 模板部分時，採用 "Prettier" 形式，然後儲存檔案：

此時，按再進行 Vetur 格式化時，注意觀察 <template> 模板部分的變化：

Vetur 在格式化 JS 和 CSS 程式碼時，預設採用的是 "Preitter" ，所以不用修改。

其實，區分 ESLint 和 Preitter 有助於更好的理解上面的各種操作。

ESLint 是程式碼檢測工具，可以檢測出程式碼中潛在的問題。例如，使用了未定義的變數或變數定義了但未曾使用過。

Preitter 是程式碼格式化工具，它能夠統一個人或者團隊的程式碼編寫風格。

VS Code 配置當代碼儲存時自動進行程式碼格式化

如果我們在編寫程式碼儲存時，VS Code 能夠幫助我們自動檢測並格式化程式碼，那將是非常爽的一件事，這當然是可以實現的。

首先，我們需要給 VS Code 安裝 ESLint 外掛，點選左側欄的 “擴充套件圖示”，在搜尋中輸入 ESLint，然後安裝外掛：

安裝完後，我們開啟 App.vue，此時會出現一個彈窗：

這個彈窗的意思是 “這個 ESLint 擴充套件將使用 'node_modules/ ESlint' 進行驗證，它在本地 'vue-guide' 中被安裝。如果你相信這個版本的 ESLint，就點選 Allow 按鈕”。

現在，我們再次將程式碼打亂並儲存。

可以看到 VS Code 上面的程式碼會出現黃線。滑鼠移動到黃線上可以檢視程式碼出現的具體問題。ESLint 外掛生效了。

現在回到 settings.json 檔案上，繼續新增配置：

新加的配置是讓我們儲存程式碼時，自動進行程式碼檢測和格式化。

您甚至可以將所有 Vetur 格式化設定為 "none" ，從而讓 VS Code 在儲存程式碼時接管 Vetur 的格式化工作。

當然，如果這樣做，我們在程式碼中右鍵點選 “Format Document” 按鈕（快捷鍵 Shift + Alt + F）時，將不會有任何格式化效果，但這已經無關緊要了。

現在，我們可以修改下程式碼，然後按 Ctrl + S 儲存程式碼看看效果：

個性化配置 Prettier

我們現在的 Prettier 配置都是預設的，有時候，需要根據團隊的要求進行定製配置。

這時候，我們在專案根目錄建立 .prettierrc.js 檔案，個性化的配置都寫在這裡就行了，可以檢視 Prettier 相關的文件。

例如，這裡我們的需求是：

字串單引號處於末尾的屬性需要新增逗號tab 為 2 個空格長度不需要分號結尾

此時，我們在新建立的 .prettierrc.js 檔案中輸入下面的程式碼：

我們在 <script> 部分中修改程式碼，然後儲存，看看效果：

總結

關於 Vue CLI 安裝專案以及 VS Code 相關配置的知識暫告一段落，本期內容適合個人學習、開發，具體如何配置以及個性化需求還要看團隊統一的部署。