一、什麼是Vue CLI

如果只是簡單寫幾個Vue的Demo程式, 那麼你不需要Vue CLI.

如果在開發大型專案, 那麼你需要, 並且必然需要使用Vue CLI

• 使用Vue.js開發大型應用時，我們需要考慮程式碼目錄結構、專案結構和部署、熱載入、程式碼單元測試等事情。
• 如果每個專案都要手動完成這些工作，那無以效率比較低效，所以通常我們會使用一些腳手架工具來幫助完成這些事情。

CLI是什麼意思?

• CLI是Command-Line Interface, 翻譯為命令列介面, 但是俗稱腳手架.
• Vue CLI是一個官方釋出 vue.js 專案腳手架
• 使用 vue-cli 可以快速搭建Vue開發環境以及對應的webpack(打包工具)配置
• 官網：https://cli.vuejs.org/zh/guide/

二、Vue CLI使用前 - Node

 安裝NodeJS

可以直接在官方網站中下載安裝

官網：http://nodejs.cn/download/

檢測安裝的版本

預設情況下自動安裝Node和NPM

Node環境要求8.9以上或者更高版本

 cnpm安裝

由於國內直接使用npm的官方映象非常慢，推薦使用淘寶npm映象

你可以使用淘寶定製的 cnpm (gzip 壓縮支援) 命令列工具代替預設的　

npm: npm install -g cnpm --registry=https://registry.npm.taobao.org

這樣就可以使用 cnpm 命令來安裝模組了：

cnpm install [name]

 什麼是npm？

NPM的全稱是Node Package Manager

是一個NodeJS包管理和分發工具，已經成為了非官方的釋出Node模組（包）的標準

後續我們會經常使用NPM來安裝一些開發過程中依賴包

三、Vue CLI使用前 - Webpack(打包工具)

 Vue.js官方腳手架工具就使用了webpack模板

對所有的資源會壓縮等優化操作

它在開發過程中提供了一套完整的功能，能夠使得我們開發過程中變得高效。

官網：https://webpack.docschina.org/

Webpack的全域性安裝

npm install webpack -g

 四、Vue CLI使用(我的開發環境 vscode)

 安裝vue腳手架(全域性安裝)

npm install -g @vue/cli

版本號：@vue/cli 5.0.1

初始化專案

vue create my-project(專案名稱)

Vue 3.x預設配置

Vue 2.x預設配置

自定義配置

//1.命令 回車
  vue create 專案名
//2.選擇自定義配置  Manually select features 
//3.選擇你需要的配置
  Babel (必選，轉碼器，可以將ES6程式碼轉換成ES5程式碼，從而在現有環境執行)
  TypeScript（專案中使用ts開發的話，就勾選）
  Progressive Web App (PWA) Support  (介面快取，優化專案，漸進式web應用程式)
  Router (路由)
  Vuex (狀態管理模式)
  css Pre-processors (css前處理器，如：less、sass)
  Linter / Formatter (程式碼格式，一般預設選中。如：ESlint)
  Unit Testing (程式碼測試)
  E2E Testing（需求介面測試）
//4.根據你選的配置進行Y/N選擇
//5.選擇完之後，就可以執行專案
//6.上下選擇，空格選中和取消選中  
npm run serve

Vuejs版本

 Vue-Router 利用了瀏覽器自身的hash 模式和 history 模式的特性來實現前端路由（通過呼叫瀏覽器提供的介面）。

• 我這裡建議選n。這樣打包出來丟到伺服器上可以直接使用了，後期要用的話，也可以自己再開起來。
• 選yes的話需要伺服器那邊再進行設定。

我選擇的是Sass/Scss(with dart-sass) 

node-sass是自動編譯實時的，dart-sass需要儲存後才會生效。sass 官方目前主力推dart-sass 最新的特性都會在這個上面先實現。（該回答參考http://www.imooc.com/qadetail/318730）

 Babel,ESLint,etc.配置
 In dedicated config files // 獨立檔案放置
 In package.json // 放package.json裡

是否儲存剛才的設定
儲存之後下次建立專案直接可以選擇現在的配置內容

等待建立成功

npm run serve(執行專案)

五、Vue CLI目錄結構