vue-cli+webpack開發流程總結

1、環境搭建

一、安裝node.js在計算機中
https://nodejs.org/en/download/ （此爲node.js官方下載地址）
安裝完成後打開cmd命令提示符

node -v        //查詢node版本號
npm -v        //查詢npm版本號

二、若是npm使用網速跟不上，能夠選擇安裝cnpm
https://npm.taobao.org/ （此爲淘寶鏡像官方下載地址）

運行命令：

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

npm install -g nrm

nrm ls

nrm use cnpm

2、項目構建

一、初始化建立vue項目

vue init webpack <name>

二、在彈出的消息中作出迴應

Project name：輸入項目的名稱（不能過長，不能爲中文）
Project description：項目的描述
Author ：項目做者
Runtime：選擇第一個回車
Install vue-router：安裝路由模塊（yes）
Use ESLint to lint your code：代碼檢測（no）
Set up unit tests：安裝測試（no）
Setup e2e tests with Nightwatch：不明確（yes）
選擇使用安裝的包管理工具：（選擇npm）

三、在完成以上步驟後，將自動開始執行npm安裝模塊命令，若是須要用cnpm淘寶鏡像進行安裝則（能夠ctrl+c強行停止），從新進入項目目錄中查看是否存在node_modules文件夾，若存在則刪除後再進行cnpm install安裝（不這麼作項目可能後面跑不起來！！！）

四、所需模塊安裝完成後，在項目文件夾內使用cmd命令行工具可執行：

npm run dev

命令行執行完成以後可以在瀏覽器localhost:8080端口瀏覽初始項目

以後是重點，記筆記啊！

3、項目打包

一、此步驟爲解決assets打包後圖片地址錯誤問題
打開config文件夾下的index.js文件，並修改此文件build對象中的assetsPublicPath屬性值："/"，修改成如圖所示的："./" 或 ""(空字符串)。

二、此步驟爲解決取消打包後生成map調試文件，致使打包後項目過大的問題
打開config文件夾下的index.js文件，並修改此文件build對象中的productionSourceMap: true,將map改成false;

三、此步驟爲解決打包後css背景圖引用路徑出錯的問題
打開build文件夾下的utils.js文件，找到以下代碼段，並添加紅框內的代碼

四、此步驟爲解決promise語法兼容的問題
cmd命令行運行：

npm install --save babel-polyfill

安裝完成後打開build文件夾下的webpack.base.conf.js文件添加配置：

最後在main.js中進行引入：

4、同源策略解決方案

1.cmd命令行運行：（若使用vue-cli搭建的項目可忽略此命令，項目中已被裝載，可進入步驟2）

npm i http-proxy-middleware -D

2.在config文件夾下建立proxyConfig.js並添加以下相關代碼：

module.exports = {
    proxyList: {
        "/api": {
            target: "localhost:8060",    //須要代理的遠程API的HOST
            changeOrigin: true,          //是否跨域
            pathRewrite: {               //API別名
                "^/api": ""
            }
        }
    }
}

3.在config文件夾下打開index.js中引入剛建立的proxyConfig.js

const proxyConfig = require('./proxyConfig')

並在dev對象中添加入下圖所示的代碼段：（注：因爲修改了配置文件，當前運行中的項目須要重啓後才能生效配置文件的修改）

5、axios使用技巧

1.首先進行axios的裝載，使用cmd命令提示符運行命令：

npm i axios -S

2.在main.js中引入axios，並將其注入至全局Vue實例的原型對象中，以後將能夠在組件內使用this.axios進行調用：

import axios from 'axios'
Vue.prototype.axios = axios;

注：
GET請求時，axios入參爲：params，參數值爲：JSON類型數據，例：

this.axios({
      url:"http://localhost:8060/sendrequest",   //請求路徑，本地跨域可將  http://localhost:8060  替換爲  /api
      headers:{},            //請求頭信息
      method:"GET",          //請求方式爲GET
      params:{               //請求參數
        a:1
      }
})
.then(res=>{
      console.log(res)    //請求成功
})
.catch(error=>{
      console.log(error)  //請求異常
})

POST請求時，axios入參爲：data，參數值須要作以下qs.stringify轉換，不然會出現於jquery發起請求傳參方式不一樣，qs可在vue組件內直接進行import引入：

import qs from 'qs'

this.axios({
      url:"http://localhost:8060/sendrequest",   //請求路徑，本地跨域可將  http://localhost:8060  替換爲  /api
      headers:{},            //請求頭信息
      method:"POST",         //請求方式爲GET
      data:qs.stringify({                 //請求參數
        a:1,
        b:2
      })
})
.then(res=>{
      console.log(res)    //請求成功
})
.catch(error=>{
      console.log(error)  //請求異常
})

6、性能優化

1.router路由性能優化
將VueRouter對象修改組件引入方式爲按需引入：

Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      path: "",
      component: resolve => require(["@/components/index"], resolve),
      name: "index",
    },
    {
      path: "/home",
      name: "home",
      component: resolve => require(["@/components/home"], resolve)
    },
  ]
})

2.減小打包容量
減小main.js中對模塊的引入，例如：

import vue from 'vue';
import vueRouter from 'vue-router'

刪除以上代碼，將此模塊的vue.min.js/vue-router.min.js在node_modules中找出，存入項目的static靜態資源目錄下，並在index.html入口頁面中進行相對路徑的引入（此類資源script引入需寫在body標籤內）下圖是我所用到過的模塊

最後修改build文件夾下的webpack.base.conf.js文件進行相關模塊的全局註冊

3.關於百度地圖api按需引入的問題優化
因爲cli構建vue項目爲單頁面應用，在index.html中全局進行引入百度地圖script方式不利於項目優化，但動態建立的scirpt引入百度地圖api將會js報異常，且在https訪問下還會出現安全攔截，後發現解決方式：引入兩個百度地圖api。（加載百度地圖api後報錯的js，咱們再加載一遍）

var s = document.createElement('script');
s.src= "https://api.map.baidu.com/api?v=2.0&ak=你的api祕鑰";
var s2 = document.createElement('script');
s2.src= "https://api.map.baidu.com/getscript?v=2.0&ak=你的api祕鑰&services=&t="+getTime();        //getTime爲當前時間戳獲取方法