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 安裝
運行命令：cnpm install -g vue-cli
vue-cli 安裝之前先確定你的電腦中已經安裝好了nodejs，至於nodejs和怎麽安裝可以參考我的上一篇文章：走進vue2.0大觀園。
如果已經安裝好了nodejs，進入你的工作目錄‘E:\WorkSpace\vue2.0-tutorial’，打開命令窗口
運行命令：cnpm install –g vue-cli
cnpm 安裝命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
-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依賴，
輸入命令：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 （項目編譯打包）
vue-cli 最強指南