vue-cli 最強指南
今天在這篇文章裡，會對 vue-cli 的功能做個詳細的整理，把 vue-cli 所有的功能都列出來。
注：這個是官網連線： https://cli.vuejs.org/zh/guide/ ，建議多看細看不但要看還要多想，這裡的介紹才是最全最準確的。
①.vue-cli 是什麼？
vue-cli 又稱為vue 腳手架，（我發現在起名這件事上前端從來就沒輸過）這個名字很通俗易懂。百度百科對腳手架的解釋是：腳手架是為了保證各施工過程順利進行而搭設的工作平臺。其實基建工程和軟體工程有很多東西都是相通的，軟體工程中的很多開發思想和管理方法也是從基建那邊引入的。在前端vue框架中引入腳手架這個名詞我就覺得非常好。另外從百度百科的解釋上看，也能大致猜出 vue-cli 在專案中是做什麼用的。vue-cli是一個工作平臺，在這個平臺裡面可以對專案開發進行高效的管控，使專案開發更符合標準，即使多人同時開發也能保證程式碼規範要求一樣。在vue-cli這個工作平臺裡，多人協作開發效率更高，產品經理再也不用擔心我寫的程式碼與小夥伴的不相容了。因為有了這些優秀的框架前端也有機會能體驗到工程化程式設計了。其實我感覺最牛之處還是在專案遷移與備份方面。現在有了vue-cli只需要一個配置檔案(package.json)和vue-cli中的幾個命令就能搭建出來一個同樣的腳手架(工作平臺)出來。
前提是得在你的電腦中先安裝好 vue-cli。
②.vue-cli 安裝
執行命令：cnpm install -g vue-cli
vue-cli 安裝之前先確定你的電腦中已經安裝好了nodejs，至於nodejs和怎麼安裝可以參考我的上一篇文章：走進vue2.0大觀園。
如果已經安裝好了nodejs，進入你的工作目錄‘E:WorkSpacevue2.0-tutorial’，開啟命令視窗
執行命令：cnpm install –g vue-cli
cnpm 安裝命令：npm install -g cnpm --registry= https://registry.npm.taobao.org
注:cnpm 是淘寶的安裝映象，在速度上會快很多
-g 是全域性安裝
vue-cli 安裝完成後，就可以使用vue 命令進行專案構建搭建一個專案平臺了。
③.vue-cli 構建專案
執行命令：vue init webpack your-project
在這個命令裡有個混入了一個奇怪的東西：webpack，webpack是什麼？為什麼在vue的命令裡會出現webpack這個指令？
先看一下官網： https://www.webpackjs.com/
從圖上可以看出來，左側的指令碼、樣式、圖片、表、資源等檔案經過webpack 後變成了簡單的三類四個檔案：樣式、指令碼、圖片。
so，webpack的作用就是對專案中的靜態資原始檔進行打包操作，按照類別進行歸納集結。經過webpack打包之後的檔案結構更清晰明瞭，最重要的是可以直接在瀏覽器中執行。因為webpack 已經整合到vue-cli中了，不需要單獨安裝，但是webpack4.X之後的版本需要安裝webpack依賴，
執行命令：cnpm install webpack webpack-cli -g
輸入命令：vue init -h
可以看到有兩種構建專案的方法可供選擇，第一中就是我們用的這種，這種構建的專案是使用官方的模板進行構建的，第二種 vue init username/repo my-porject 是使用github上的模板進行構建的。這裡我們我們選擇的就是第一種。
專案構建時配置的資訊詳情如下：
Project name ：專案名稱，可以自定義，直接回車預設是指令中指定的專案名
Project description ：專案描述，也可直接點選回車，使用預設名字
Author：作者，可以自己指定，也可直接回車
Runtime + Compiler: recommended for most users
執行加編譯，既然已經說了推薦，就選它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere
僅執行時，已經有推薦了就選擇第一個了
Install vue-router? (Y/n)
是否安裝vue-router，這是官方的路由，大多數情況下都使用，這裡就輸入“y”後回車即可。
Use ESLint to lint your code? (Y/n)
是否使用ESLint管理程式碼，ESLint是個程式碼風格管理工具，是用來統一程式碼風格的和標準的，這裡我選擇了“n”不安裝。
Setup unit tests with Karma + Mocha? (Y/n)
是否安裝單元測試。我選擇了“n”不安裝。
Setup e2e tests with Nightwatch(Y/n)?
是否安裝e2e測試。我選擇了“n”不安裝。
命令執行完成後，進入專案目錄會看到多了很多的檔案，接下來就需要在這個基礎上進行專案開發。比直接進行資料夾建立和新建檔案簡單多了吧。
④.vue-cli 配置講解
專案構建完成後一般是不需要再做額外的配置的，在命令列中輸入命令：cnpm run dev 進行專案啟動，然後可以在瀏覽器中開啟就可以。
但是我還想把一些基本的配置在這裡做個介紹，這樣對這個構建完的專案如可配置和執行的能有個初步的瞭解。
用IDE匯入剛才構建好的專案，我在這裡用的是visual studio code，功能能滿足日常開發需要，最重要的是免費，不用擔心軟體過期全網扒拉著找註冊碼了，這種痛用過破解版的都會懂。
專案目錄結構如下圖所示：
我在截圖中用紅框標出了幾個重點，看看都是什麼？
config：這裡就是整個專案的配置中心，全域性配置都是在這裡做的。
dev.env.js：開發環境使用的變數
index.js：專案執行的配置資訊，比如埠、檔案的生成路徑、資源的存放目錄
prod.env.js：生產環境使用的變數
// index.js 檔案
'use strict'// 啟用嚴格模式
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// 資源路徑
assetsSubDirectory: 'static',// 靜態資原始檔子目錄
assetsPublicPath: '/', // 公共靜態資原始檔
proxyTable: {}, // 代理列表，在做跨域請求時會使用到
// 開發環境配置項
host: 'localhost', // 主機地址可以設定成:localhost/127.0.0.1/*.*.*.*(本機IP)
port: 8080, // 可以自定義，如果改埠被佔用會啟用一個新的埠
autoOpenBrowser: false, // 是否允許自動開啟瀏覽器
errorOverlay: true,
notifyOnErrors: true,
poll: false, //
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// 生產環境的首頁地址
index: path.resolve(__dirname, '../dist/index.html'),
// 生產環境路徑
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true, // 是否生成map檔案
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false, // 是否開啟檔案壓縮
productionGzipExtensions: ['js', 'css'], // 壓縮檔案過濾
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
⑤.專案編譯打包
專案安裝完成，並且正常執行，接下來怎麼把專案上傳到伺服器上去呢？能在伺服器上訪問我們的專案檔案，難道是把我們整個專案上傳上去？話說我就添加了一個檔案，就把整個工程全都搞到伺服器上是不是有點崩潰。如果這樣的話，vue框架就沒有存在的理由了。
那要怎麼做？
接下來就要介紹另一個功能了，專案打包，這就是安裝webpack的原因。
執行命令：cnpm run build
執行結束後會生成一個新資料夾：dist ,這裡面的檔案就是我們需要上傳到服務上去的靜態檔案。
開啟dist目錄，看裡面的檔案和目錄結構是不是清爽多了，這裡的檔案就是經過webpack打包後生成的，和上面介紹的webpack是不是對應在一起了。
⑥.vue-cli 使用總結
下面對使用過的腳手架功能做個總結：
問：在使用 vue-cli 的時候我們共使用了幾個命令？
答：三個。
1.cnpm install -g vue-cli （vue-cli 安裝）
2.vue init webpack your-project （專案構建）
3.cnpm run build （專案編譯打包）