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 （項目編譯打包）