一. 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 } }
!
- 作 者 : Yaopengfei(姚鵬飛)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 聲 明1 : 如有錯誤，歡迎討論，請勿謾罵^_^。
- 聲 明2 : 原創博客請在轉載時保留原文鏈接或在文章開頭加上本人博客地址，否則保留追究法律責任的權利。