前言

注：適用于windows系統(tǒng)
本文講述要點：

1. vue-cli項目搭建基本環(huán)境配置；
2. 常用插件描述及分享；
3. 項目運行、調(diào)試及打包；
4. 項目配置及優(yōu)化；

適用人群：

1. vue小白；
2. 有html\css\js編程基礎(chǔ)；
3. vue項目整體優(yōu)化（打包后壓縮空間）；

一、準(zhǔn)備階段

準(zhǔn)備階段會將項目環(huán)境配置完畢,包含node、npm、webpack和vue-cli。已經(jīng)完成的小伙伴可以跳過此步驟看第二階段。

1.安裝node及npm

??從node.js中文網(wǎng)下載并安裝nodejs點擊下載.msi的32/64位安裝包，然后雙擊本地文件一路點擊下一步完成nodeJs的安裝即可。<font size=2 color=#ff6666>注意安裝8.10以上版本喲!</font>
安裝完成后，打開命令行工具，輸入node -v，如下：

E:\>node -v
v8.12.0     //版本號

順便在此處繼續(xù)輸入npm -v

E:\>npm -v
6.4.1       //版本號

你會驚訝的發(fā)現(xiàn)npm已經(jīng)神奇的安裝完成了。這是因為npm在安裝nodeJs的時候順帶已經(jīng)裝好了。

2.安裝webpack

注：以下所有npm操作，由于國內(nèi)速度較慢甚至出現(xiàn)失敗，可用淘寶鏡像cnpm替代。下列所有npm命令，用cnpm替代即可。方式如下：

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

??繼續(xù)剛才的命令行工具，輸入npm install webpack -g，-g代表全局安裝。安裝完成后繼續(xù)輸入webpack -v，出現(xiàn)相應(yīng)版本號，代表安裝成功。
我在安裝時出現(xiàn)如下狀況：

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no):

解決方案是：輸入npm install webpack-cli -g。安裝成功后執(zhí)行webpack -v查看版本號，如下：

E:\>npm install  webpack-cli -g
*
*  安
*  裝                省
*  過                略
*  程
*

E:\>webpack -v
4.29.6  //版本號

3.安裝vue腳手架vue-cli

??繼續(xù)上面的命令行工具。接下來就是安裝配置今天的主角了，vue腳手架工具vue-cli。方法一樣，鍵入命令行npm install vue-cli -g全局安裝，然后輸入vue -V<font size=1 color=red>注：是大寫的-V</font>檢測是否安裝成功。如下：

E:\>vue -V
2.9.6       //版本號

4.小結(jié)

??至此，我們已經(jīng)完成了準(zhǔn)備階段的工作。主要完成的是node、npm、webpack和vue-cli四個工具的環(huán)境配置。目前為止，我們在命令行工具的總結(jié)應(yīng)該是如下：版本號不必一致

E:\>node -v
v8.12.0

E:\>npm -v
6.4.1

E:\>webpack -v
4.29.6

E:\>vue -V
2.9.6

二、項目搭建

本階段講述vue-cli項目搭建及相關(guān)配置，包含創(chuàng)建項目、修改基礎(chǔ)配置、項目運行三個模塊，可自行選擇閱讀或跳過。

1.項目創(chuàng)建

??建立一個空文件夾，最好以純英文命名。例，我項目路徑為E>stydy。打開命令行工具，cd到該文件目錄下，執(zhí)行vue init webpack name，name可替換為你要創(chuàng)建的項目名?；剀囍?，會要求輸入一系列的信息，大部分可直接回車略過，注釋如下，沒有注釋的回車略過即可：

E:\stydy>vue init webpack blog

? Project name blog //項目名
? Project description A Vue.js project  //項目簡介
? Author xuan0146 <zxm0146@163.com> //作者
? Vue build runtime
? Install vue-router? Yes   //使用項目路由
? Use ESLint to lint your code? No  //不開啟ESLint語法檢測 注意選No
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "blog".

最后一步選擇npm或者yarn則會自動執(zhí)行npm install安裝項目所有依賴包。不選擇的話，自己安裝也是同樣效果。安裝步驟為：

1. cd到項目路徑；
2. 執(zhí)行npm install；
3. 等待完成安裝即可;

2.項目介紹

??cd到該項目，或者打開文件夾，項目目錄及備注如下：

├── project //項目目錄
│  ├── build    //webpack相關(guān)配置
│  │  ├── build.js  //生產(chǎn)環(huán)境構(gòu)建
│  │  ├── check-versions.js //版本檢查
│  │  ├── utils.js  //構(gòu)建相關(guān)工具
│  │  ├── vue-loader.conf.js    //處理vue文件的配置信息
│  │  ├── webpack.base.conf.js  //webpack基礎(chǔ)配置
│  │  ├── webpack.dev.conf.js   //webpack開發(fā)環(huán)境配置
│  │  ├── webpack.prod.conf.js  //webpack生產(chǎn)環(huán)境配置
│  ├── config   //vue基本配置
│  │  ├── dev.env.js    //開發(fā)環(huán)境配置
│  │  ├── index.js  //主要配置
│  │  ├── prod.env.js   //生產(chǎn)環(huán)境配置
│  │  ├── test.env.js   //測試環(huán)境配置
│  ├── node_modules //依賴包 忽略
│  ├── src  //項目核心文件
│  │  ├── assets    //靜態(tài)資源 如公用js\css\image\媒體資源等
│  │  ├── components    //公用組件
│  │  ├── router    //項目路由
│  │  │  ├── index.js   //路由控制文件
│  │  ├── App.vue   //根組件
│  │  ├── main.js   //入口文件
│  ├── static   //靜態(tài)資源
│  ├── test //模擬測試
│  ├── .babelrc //babel參數(shù)
│  ├── .editorconfig    //代碼格式
│  ├── .gitignore   //git上傳相關(guān)配置
│  ├── .postcssrc.js    //css相關(guān)工具
│  ├── index.html   //主頁
│  ├── package-lock.json    //記錄當(dāng)前狀態(tài)下實際安裝的各個npm package的具體來源和版本號
│  ├── package.json //項目信息
│  ├── README.md    //項目說明

3.啟動項目

??命令行工具鍵入npm run dev，等待片刻，直到提示如下，則表示啟動成功：

E:\stydy\blog>npm run dev

* * * * * * * *
* 啟動過程忽略 *
* * * * * * * *

Your application is running here: http://localhost:8080

然后復(fù)制http://localhost:8080，在瀏覽器地址欄輸入該url，進入如下頁面：

vue運行成功.png

4.移動端調(diào)試

??有的人可能要問了，如果我做移動端項目，不能用localhost去訪問了吧？當(dāng)然不能，只需要稍微改一下配置即可。當(dāng)然，端口號8080一樣可以修改，不過一般不做變動。
??用代碼工具（自己習(xí)慣的IDE）打開本項目。首先查看本機電腦ip,鍵入命令ipconfig，查看如下：

E:\stydy\blog>ipconfig
* *
* *
以太網(wǎng)適配器 以太網(wǎng):

   連接特定的 DNS 后綴 . . . . . . . :
   本地鏈接 IPv6 地址. . . . . . . . : fe80::da7:800d:d148:e06%10
   IPv4 地址 . . . . . . . . . . . . : 192.168.200.127
   子網(wǎng)掩碼  . . . . . . . . . . . . : 255.255.255.0
   默認(rèn)網(wǎng)關(guān). . . . . . . . . . . . . : fe80::48:5112:9520:564f%10
                                       192.168.200.1                                       

??其中，IPv4 地址即為我們所需要的ip。在項目/config/index.js中，找到host: 'localhost'，改成IPv4 地址，例:我的地址為192.168.200.127:

module.exports = {
  dev: {
    host: '192.168.200.127',    //localhost改為ip
    port: 8080,     //端口號
  }
}

??然后，我們重新啟動項目。注意上次項目啟動后，由于修改了配置文件，因此需要停止項目然后重新啟動。停止項目的命令為Ctrl + C。重啟項目后，如下：

E:\stydy\blog>npm run dev
* * * * * * * *
* 啟 動 過 程 *
* * * * * * * *
Your application is running here: http://192.168.200.127:8080

??（注意要在同一網(wǎng)絡(luò)下。）
??最后，我們復(fù)制該地址，即可在所有端PC、手機、pad等查看該項目啦~

三、常用插件

本章節(jié)記錄一些vue常用插件，如axios、echarts、sass/scss、lib-flexible等等。所有命令均可用cnpm替代。如不需要可直接跳過。、

1.sacc/scss

用途：可用sass/scss進行css書寫代碼。命令行工具依次鍵入如下命令：

npm install node-sass --save-dev
npm install sass-loader --save-dev

安裝完成后，.vue里的style里添加lang="scss"來指定語言，即可用sass/scss編寫css代碼。如下：

<style lang="scss" scoped>
...
</style>

2.axios

用途：平時前后端交互使用Ajax，在vue官方，給出vue-resource和axios的作為ajax的替代。在此處使用vue官方推薦首選的axios作為案例講述。

• 安裝

npm install axios

• 全局引入
  在項目/src/main.js中引入如下代碼，然后隨意走個請求，發(fā)現(xiàn)……報錯？并且在頁面F12控制臺Newwork>Headers里面發(fā)現(xiàn)數(shù)據(jù)并沒有Form Data形式提交，如何處理呢？見下一步解決。

import axios from 'axios'

• 解決數(shù)據(jù)格式問題

//完整請求代碼  post為例
this.$axios.post('url', {   //路徑
  key1: 'value',        //參數(shù)
  key2: 'value'     //參數(shù)
}, 

/* *
* 添加如下代碼
* * * * * * start * * * * * 
{
  transformRequest: [function (data) {
    let ret = '';
    for (let it in data) {
      ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
    }
    return ret
    }
  ],
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
}
/* * * * * * end * * * * *

).then((response) => {  //返回數(shù)據(jù)
  console.log(response)
}).catch((error) => {   //請求異常捕捉
  console.log(error)
})

3.axios解決方案

??另外一個axios數(shù)據(jù)格式問題的解決方案。 重磅推薦★★★★★此方案不僅解決數(shù)據(jù)格式問題，還順便解決了跨域問題。第一步當(dāng)然還是安裝axios，同上一步。然后，安裝qs，命令行工具鍵入npm install qs --save-dev。然后在項目/src/main.js中配置如下：

import axios from 'axios'
import qs from 'qs' 

Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;

然后在項目/config/index.js中，找到proxyTable，配置及說明如下：

proxyTable: {
  '/api': {
    //設(shè)置url公用部分
    target: 'http://192.168.1.100:8080/',   
    changeOrigin: true,   // 如果接口跨域，需要進行這個參數(shù)配置
    pathRewrite: {
      '^/api': ''      //這里理解成用‘/api’代替target里面的地址
    }
  }
},

配置完成之后，在.vue文件中，請求用例如下：

//參數(shù)
let params = this.$qs.stringify({
  key: value
});
//請求
this.$axios.post('/api/test', params).then((response) => {
  console.log(response);
}).catch((error) => {
  console.log(error);
})

最后，鍵入命令npm run dev，發(fā)現(xiàn)請求數(shù)據(jù)格式已經(jīng)成為Form Data的格式，并且即使后端不處理跨域問題，也依然正?？捎?。原因是proxy作為中間層，先將數(shù)據(jù)請求回本地，此過程是中間層node請求后臺，不存在跨域。然后請求過來的數(shù)據(jù)放在本地，前端再去請求這個數(shù)據(jù)，就可以解決跨域問題了。

4.echarts可視化

??如今相信大家不少項目需要用到數(shù)據(jù)可視化吧？各種統(tǒng)計圖表、炫酷可視化效果等等，都需要一個不錯的插件去支撐，比如D3、AnyChart、echarts、HighCharts等等。本案例用百度的echarts作為案例講解。

• 安裝依賴
  慣例，先裝依賴。命令行工具執(zhí)行npm install echarts --save-dev。
• 全局配置
  安裝完成后，全局引入。引入方法：進入項目/src/main.js，如下操作：

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

• 使用
  在***.vue組件中即可正常使用。我在此處用Hello.vue寫示例：

//template
<div id="demo"></div>

//script
let myChart = this.$echarts.init(document.getElementById('demo')); //初始化
//myChart.clear();  //根據(jù)需求配置
myChart.setOption({ // 圖表配置
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    smooth: true
  }]
});

//style
#demo{
  width: 500px;
  height: 500px;
}

• 效果圖

  
  
  echartsDemo.png

• 按需引入
  試過之后會發(fā)現(xiàn)echarts的包很大，會導(dǎo)致打包之后文件過大，因此如果不是剛需的情況下，建議按需引入來完成頁面，會節(jié)省許多資源及開銷。首先，將剛才項目/src/main.js中的兩行代碼注釋掉。接下來，依然以Hello.vue舉例，如下：

//template && style 不作變動

//script
const echarts = require('echarts/lib/echarts'); //基本模板
require('echarts/lib/chart/line');  //折線圖組件
require('echarts/lib/component/title'); //標(biāo)題組件

 // 初始化實例
let myChart = echarts.init(document.getElementById('demo'));
// 圖表配置
myChart.setOption({
  title: { text: '引入title組件可使用標(biāo)題' },
  * * * * * * * *
  * 別的配置不變 *
  * * * * * * * *
});

5.lib-flexible | px2rem-loader

??lib-flexible作用在于寫頁面的時候?qū)崿F(xiàn)自適應(yīng)效果，包括文圖排本等。需要配合px2rem-loader使用。步驟如下：

• 安裝依賴

npm i lib-flexible --save-dev

npm install px2rem-loader --save-dev

• 引入
  項目/src/main.js中做如下配置：

import 'lib-flexible

• 主頁添加視口配置
  項目/index.html中的head中添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• px2rem配置
  項目/build/utils.js中如下配置，然后重啟項目即可：

//自適應(yīng)字體配置
const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 37.5   //設(shè)計稿的寬度除以 10，現(xiàn)階段一般設(shè)計稿的寬度都為750px。如果基于iPhone5設(shè)計則為32.0(320 / 10 = 32)
  }
}

function generateLoaders (loader, loaderOptions) {
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

  * * *
}

• 更多關(guān)于px2rem的介紹請移步官網(wǎng)

四、項目打包

本章節(jié)介紹打包以及去除打包后資源中的.map文件。
開發(fā)完成后，怎么打包到線上呢？emm...this is a problem.

1.打包

命令行工具cd到該項目下，執(zhí)行npm run build來構(gòu)建項目：

E:\stydy\blog>npm run build

                                                  Asset       Size  Chunks                    Chunk Names
               static/js/vendor.38756a8637fc194013f9.js     442 kB       0  [emitted]  [big]  vendor
                  static/js/app.0b5326236ed4caddb252.js     1.1 kB       1  [emitted]         app
             static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]         manifest
    static/css/app.26e0081e2c66d97635076ad7fefbb5b6.css  164 bytes       1  [emitted]         app
static/css/app.26e0081e2c66d97635076ad7fefbb5b6.css.map  348 bytes          [emitted]
           static/js/vendor.38756a8637fc194013f9.js.map    2.38 MB       0  [emitted]         vendor
              static/js/app.0b5326236ed4caddb252.js.map    8.47 kB       1  [emitted]         app
         static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]         manifest
                                             index.html  571 bytes          [emitted]

  Build complete.

2.位置

打包完成后，去哪兒了呢？然后會發(fā)現(xiàn)在項目路徑下，出現(xiàn)了一個dist的文件夾，這里面就是所謂的*** 包 ***了。如下：

├── project 
│  ├── build    
│  ├── config   
│  ├── dist     // 包    
│  │  ├── static    // 壓縮后的資源
│  │  ├── index.html    // 主頁
│  ├── node_modules 
│  ├── src  
│  ├── static   
│  ├── test 
│  ├── .babelrc 
│  ├── .editorconfig    
│  ├── .gitignore   
│  ├── .postcssrc.js    
│  ├── index.html   
│  ├── package-lock.json    
│  ├── package.json 
│  ├── README.md    

3.問題&解決

細(xì)心的你可能發(fā)現(xiàn)了，dist/static/css(或js)里面，每個css文件和js文件下有一個同名的.map文件，非常占空間，那它是做什么的呢？又怎么消除呢？

• 作用
  查過資料的小伙伴知道了，.map文件的作用就是：項目打包后，代碼都是經(jīng)過壓縮加密的，如果運行時報錯，輸出的錯誤信息無法準(zhǔn)確得知是哪里的代碼報錯。有了map就可以像未加密的代碼一樣，準(zhǔn)確的輸出是哪一行哪一列有錯。
• 如何解決
  那么該如何處理這些文件呢？進入項目/config/index.js，定位到productionSourceMap，將其值改為false即可。如下：

productionSourceMap: false,

• 重新打包驗證
  在命令行工具重新執(zhí)行npm run build，發(fā)現(xiàn).map文件已經(jīng)消失，問題解決。如下：

E:\stydy\blog>npm run build

                                              Asset       Size  Chunks                    Chunk Names
           static/js/vendor.38756a8637fc194013f9.js     442 kB       0  [emitted]  [big]  vendor
              static/js/app.3c96ecd23cc6dc073a3e.js    1.05 kB       1  [emitted]         app
         static/js/manifest.2ae2e69a05c33dfc65f8.js  799 bytes       2  [emitted]         manifest
static/css/app.26e0081e2c66d97635076ad7fefbb5b6.css   95 bytes       1  [emitted]         app
                                         index.html  571 bytes          [emitted]

  Build complete.

五、包優(yōu)化

??在項目逐漸壯大之后，雖然說上面已經(jīng)講述過了如何去除.map文件，但是其中許多.js文件的體積也不容小覷。尤其是發(fā)布到線上以后，某些css/js單個文件體積極可能超上兆的大小，如果項目服務(wù)器帶寬不夠，但是頁面迸發(fā)量不低的話，分分鐘就可能掛掉。有沒有什么方法能進一步將包優(yōu)化呢？

1.gzip打包壓縮

• 安裝gzip
  慣例，打開命令行工具，安裝gzip

npm install compression-webpack-plugin@1.1.11 --save-dev

• 配置
  項目/config/index.js中，定位到productionGzip，改為true：

productionGzip: true,

• 重新打包
  npm run build走起，會發(fā)現(xiàn)打包的文件中多了同名的.gz文件，體積大概壓縮了2/3，很棒的體驗。如下：

E:\stydy\blog>npm run build

                                              Asset       Size  Chunks                    Chunk Names
           static/js/vendor.38756a8637fc194013f9.js     442 kB       0  [emitted]  [big]  vendor
              static/js/app.3c96ecd23cc6dc073a3e.js    1.05 kB       1  [emitted]         app
         static/js/manifest.2ae2e69a05c33dfc65f8.js  799 bytes       2  [emitted]         manifest
static/css/app.26e0081e2c66d97635076ad7fefbb5b6.css   95 bytes       1  [emitted]         app
                                         index.html  571 bytes          [emitted]
        static/js/vendor.38756a8637fc194013f9.js.gz     155 kB          [emitted]

  Build complete.

• nginx配置
  雖然很給力的節(jié)省了許多資源，但是需要運維配合，在gninx.conf配置文件中做如下配置：

http {  
  gzip on;
  gzip_disable "msie6"; 
  gzip_vary on; 
  gzip_proxied any;
  gzip_comp_level 8;  //壓縮級別
  gzip_buffers 16 8k;
  #gzip_http_version 1.1;
  gzip_min_length 100; //不壓縮臨界值
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
}

2.采用cdn加速

??顧名思義，即將一些比較大的插件放在第三方服務(wù)器上去加載，這樣不僅快很多，也能更加節(jié)約自己的服務(wù)器資源及寬帶資源。我們一般選用unpkg或者BootCDN來作為第三方。在此處我們使用BootCDN來作為第三方加速使用。想了解更多相關(guān)知識請點擊unpkg BootCDN。

• 查找包
  打開BootCDN，在搜索欄搜索想要的第三方資源。如，我想要替換的是echarts、Vue、axios，則依次搜索echarts...，然后查找我想要的版本，然后復(fù)制<script>標(biāo)簽。
• 插入
  在項目/index.html中將標(biāo)簽插入，如下：

<body>
<div id="app"></div>
//插入在這里
<script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
</body>

• webpack配置
  打開項目/build/webpack.base.conf.js中，添加externals:

module.exports = {
  context: path.resolve(__dirname, '../'),
  //..  
  externals:{
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'echarts':'echarts',
    'axios':'axios',
  }

}

• main配置
  打開項目/src/main.js，將Vue等注釋掉即可。不注釋也可。

// import Vue from 'vue'

• 打包
  最后，見證奇跡的時刻就要到了~

E:\stydy\blog>npm run build

                                              Asset       Size  Chunks             Chunk Names
           static/js/vendor.1f9d0533037be66c61cf.js    12.3 kB       0  [emitted]  vendor
              static/js/app.912fd568ff845fde7c09.js    1.36 kB       1  [emitted]  app
         static/js/manifest.2ae2e69a05c33dfc65f8.js  799 bytes       2  [emitted]  manifest
static/css/app.edc64bd802cdc531977a30fcc8a9d6e1.css   62 bytes       1  [emitted]  app
                                         index.html  876 bytes          [emitted]
        static/js/vendor.1f9d0533037be66c61cf.js.gz    4.62 kB          [emitted]

  Build complete.

• 搞定
  上次打包，vendor大小為442kB，本次打包，瘋狂縮小至12.3kB。神不神奇_厲不厲害

結(jié)語

??到這里，vue項目從環(huán)境配置、項目搭建，到結(jié)構(gòu)介紹、常用插件依賴安裝使用做了比較詳細(xì)的介紹，最后將項目優(yōu)化也做了一定的補充。
??學(xué)而時習(xí)之，溫故而知新。至此，以上。
歡迎做客我的博客