本篇的內容包含

• 如何安裝Node.js
• 如何安裝Visual Studio Code
• 如何透過npm安裝Vue Cli
• 如何透過Vue Cli設定，產出專案框架

Vue Cli簡介

Vue Cli是一個Vue官方所推出、基於Vue.js的專案建立工具，
可以透過簡單的設定，產出一包基本的Vue專案。
其中主要包含幾個npm套件：

• @vue/cli：是一個安裝於全域的npm套件，提供終端機中的vue指令
• @vue/cli-service：cli服務框架，會部分安裝在每個Vue Cli的專案中。在開發環境需要依賴此框架協助我們處理有關WebPack等等部分。

事前準備

安裝Node.js

Vue Cli需要搭配Node.js 8.9 以上的版本(官方推薦8.11.0以上為最佳)，
可以直接前往官網下載

這邊可以選擇左邊的按鈕，10.16.3 的LTS(Recommended For Most Users，推薦給大多數用戶使用的版本)版本。

• 如果已經安裝過Node，卻不確定版本的話，可以透過本篇文章確認安裝狀態段落提供的指令進行版本確認。

下載完成後，可以直接透過精靈進行安裝

預設的路徑是C:\Program Files\nodejs\，基本上都按照預設的設定逐步執行即可。

確認安裝狀態

為了確定安裝是否有成功，可以打開命令提示字元來確認安裝狀態。

node --version

輸入以上指令，就會顯示出Node的版本，表示安裝成功。

延伸閱讀：nvm－幫助你在同一台電腦上，管理不同版本Node.js的工具
nvm GitHub

安裝Visual Studio Code

Visual Studio Code是微軟推出的跨平台程式碼編輯器，
可以在官網下載

基本上按照預設的設定安裝即可。

使用Node安裝Vue Cli

開啟Visual Studio Code，可以透過熱鍵ctrl＋‵，或者從檢視>終端機選單中叫出終端機

透過以下指令可以全域安裝@vue/cli套件(目前安裝版本：3.9.2)

npm install -g @vue/cli

安裝完成後，可以透過以下指令檢查安裝是否成功，

vue --version

若是有安裝成功，會出現Vue Cli的版本號

使用Vue Cli建立一個專案

移至想存放專案的目錄

一樣切換到終端機，使用cd指令可以切換至想用來存放Vue專案的目錄

cd C:\Users\使用者名稱\Documents

如果原本沒有適合的目錄，可以用mkdir新增一個資料夾，再用cd指令移至該目錄

mkdir vue_projects
cd vue_projects

建立一個專案

輸入以下指令，可以用來建立一個名為line_system的Vue Cli專案

vue create line_system

輸入後會出現Cli的設定選單：

• usually (vue-router, vuex, dart-sass, babel, eslint)：常用的設定，可以自己客制自己的常用Cli設定組合
• default (babel, eslint)：官方推薦的預設設定
• Manually select features：手動選擇需要的項目

用鍵盤上下移動選擇選項，選擇第三項Manually select features後，按下Enter來進入手動設定模式
(*)表示包含的設定，這邊的選擇方法是，移到需要的項目後按空白鍵選取

這邊選了幾個項目：

• Babel：搭配WebPack，用來將較新的JS語法編譯成目前支援度較高的ECMAScript 5（ES5）的工具
• Router：Vue路由管理器
• Vuex：Vue的狀態(資料)管理工具
• CSS Pre-proccessors：讓工程師可以用具有程式語言優點(如變數、function)的方式撰寫CSS的原始碼，最後會編譯成一般的CSS
• Linter / Formatter：檢查語法錯誤及程式碼排版是否符合設定的規範的工具

另一個選擇－圖形化建立專案的介面