一、什麼是Vue Cli
文檔：https://cli.vuejs.org/zh/
如果只是寫幾個vue的demo程序，我們自然不需要vue-cli，但是如果我們要開發大型項目，我們需要考慮代碼目錄結構、項目結構和部署、熱加載、代碼測試等事情。如果每個項目都要手動完成這些工作，那工作效率是極低的，所以我們需要使用一些腳手架工具來幫助我們完成這些事情。
CLI即Command-line Interface，翻譯爲命令行界面，俗稱腳手架。vue-cli是一個官方發佈的vue.js的項目腳手架，使用它可以快速搭建vue開發環境以及對應的webpack配置。
vue-cli使用前提：node、webpack
安裝vue-cli：npm install -g @vue/cli （全局安裝vue-cli3）
如果安裝的是vue-cli3的版本，就不能按照vue-cli2的方式初始化項目
創建一個項目：vue create my-project （vue-cli3初始化項目）
vue-cli3和舊版使用了相同的vue命令，所以vue-cli2被覆蓋了，如果你仍然需要使用舊版本的vue init功能，你可以全局安裝一個橋接工具：
npm install -g @vue/cli-init
vue init webpack myproject
二、vue-cli2初始化項目過程
runtime-compiler和runtime-only區別：
- 使用兩種方式創建的項目區別在於main.js文件。對於導入的APP組件，前者是先將該組件註冊一下，然後在template模板中使用，最後使用模板替換掛載的el元素；後者是使用render函數進行渲染。
- 使用runtime-compiler創建項目時，template模板會先被解析爲AST抽象語法樹，然後抽象語法樹會被傳給render函數，然後通過render函數，將我們的這些tempalte轉化爲虛擬DOM，最後虛擬DOM會被渲染成真實DOM，顯示在頁面中。
- 而使用runtime-only創建項目時，沒有之前的解析AST的步驟，直接使用render函數將template轉化爲虛擬DOM，進而轉化爲真實DOM
- 由此可見，使用runtime-compiler創建項目時，性能更高，構建後的代碼量更少
- 如果在之後的開發中，依然要使用template，需要在客戶端編譯模板，就需要選擇runtime-compiler（帶有編譯器）；如果在之後的開發中，使用的是.vue文件開發，那麼可以選擇runtime-only
三、vue-cli2目錄結構解析
build： 包含webpack的一些配置，包括基礎配置、開發環境配置和生產環境配置。基礎環境配置中包含一些公共配置，開發環境和生產環境配置中包含一些特殊配置。在執行打包構建的時候，如果是開發環境下，則會將基礎配置與開發環境配置合併得到最終配置；如果是生產環境，則會將基礎配置與生產環境配置合併。
config： 定義了配置中的一些變量
node_modules: 當前項目依賴的包
src: 存放項目編寫的代碼
static: 存放項目需要的靜態資源，打包構建時會原封不動地複製到dist文件夾
.babelrc: 與ES語法轉化相關
.editorconfig: 對代碼的文本編輯做一些統一，如字符編碼、縮進風格
.postcssrc.js: 與CSS轉化相關
index.html: 模板文件，單頁面富應用
package.json: 管理項目中安裝的包，以及一些腳本配置、項目信息等
package-lock.json: 在package.json文件中指定的是版本的區間，在package-lock.json中記錄的是安裝的真實的版本
四、vue-cli3變化
- 首先，vue-cli的升級不代表vue的升級，vue3.x的版本是後來19年發佈的
- vue-cli3是基於webpack4打造，vue-cli2還是webpack3
- vue-cli3的設計原則是“0配置“，移除了根目錄下的build和config文件夾
- vue-cli3提供了vue ui命令，提供了可視化配置，更加人性化
- 移除了static文件夾，新增public文件夾，並且將index.html移動到了public中
五、vue-cli3配置文件的查看和修改
由於vue-cli3的設計原則是”0配置“，所以3版本刪除了根目錄的配置文件，將配置文件隱藏起來了，大多數情況下我們都不需要再進行配置。
我們可以使用vue-cli3提供的可視化界面對一些配置做修改：
如果想要手動配置，可以在node_modules下的@vue文件夾裏面查看：
如果我們對一些默認的配置不太滿意，想要做出一些修改，可以在根目錄下新建一個固定名稱的文件，叫做vue.config.js。在這裏編寫的配置會和默認的配置進行合併，作爲最終的配置。