第八節：Vue Cli簡介/安裝、兩種Create項目的方式、相關配置說明

一. Vue Cli簡介/安裝

1. 簡介

　Vue Cli用于快速生産Vue項目的基礎結構，也稱為：Vue腳手架。它提供兩種建立項目的方式：互動式指令行和圖形化界面。

　官網位址：https://cli.vuejs.org/zh/

2. 安裝

(1). 通過下面指令進行全局安裝

npm install -g @vue/cli

(2). 通過指令【vue -V】，檢視安裝版本。

二. Create項目方式-互動式指令行

1. 建立一個檔案夾VueProject，基于該檔案夾打開指令行，輸入指令【vue create mytest2】

PS: 這裡的項目命名不支援駝峰，但可以種-分割。

2. 選擇Manually select features(選擇特性以建立項目)

3. 勾選項目中所需要的特性，【空格鍵】選中，這裡選Babel、Router、Linter/Formatter等

4. 選擇Vue的版本，這裡采用2.x版本

5. 是否選用曆史模式，這裡輸入n，不選用

6. ESLint選擇：ESLint + Standard config

7.何時進行ESLint文法校驗：Lint on save

8. babel，postcss等配置檔案如何放置：In dedicated config files(單獨使用檔案進行配置)

9. 是否将上述配置儲存為模闆，這裡輸入n，不儲存

10. 等待安裝即可。

11. 下載下傳完成後，進入mytest2檔案夾下，運作指令【npm run serve】，編譯并啟動程式。輸入位址：http://localhost:8080/，進入下面頁面。

指令補充

【npm run serve】Compiles and hot-reloads for development

【npm run build】Compiles and minifies for production

【npm run test】Run your tests

【npm run lint】Lints and fixes files

三. Create項目方式-圖形化界面

1. 建立一個檔案夾VueProject，基于該檔案夾打開指令行，輸入指令【vue ui】，可視化UI頁面。

PS：如果之前在該路徑通過UI界面建立過項目，進入的xxx，需要xxx切換到項目管理器頁面。

2. 進入【建立】頁籤，建立1個新項目mytest3，并選擇包管理器為npm，然後下一步

3. 進入預設頁面，這裡我們選擇手動配置項目，如果你之前儲存了預設，在這裡可以選擇之前儲存過的。

4. 進入配置插件頁面。通常這裡我們要選的有： Choose Vue Version、Babel、Router、Linter/Formatter、使用配置檔案等等。

5. 選擇Vue版本、關閉history mode、選擇标準模式、選擇Lint on save，然後點選建立項目。

6. 會提示是否将上述配置儲存為預設，供下次使用，我們這裡儲存預設為 ypfconfig1，并且建立項目。

PS：預設的存儲位置

7. 等待建立項目，直到建立成功。

8. 建立成功後，我們會進入【http://localhost:8000/dashboard 】，圖像化配置頁面。

如何啟動項目？

　進入任務頁面→serve→運作，編譯完成後，點選啟動app，進行啟動。項目啟動成功。

四. 相關配置

1. 項目結構介紹

2. 配置啟動端口

(1). 方案1

　在package.json檔案中，新增下面節點，然後運作【npm run serve】，啟動項目即可。

"vue": {
          "devServer": {
            "port": "9990",
            "open": true
        }
}

(2). 方案2

　在目前根目錄下建立檔案vue.config.js，指派下面代碼

module.exports = {
  devServer: {
    port: 8888,
    open: true
  }
}