摘要：前言是現(xiàn)階段很流行的前端框架，很多人通過(guò)官方文檔的學(xué)習(xí)，對(duì)的使用都有了一定的了解，但再在項(xiàng)目工程化處理的時(shí)候，卻發(fā)現(xiàn)不知道改怎么更好的管理自己的項(xiàng)目，如何去引入一些框架以及全家桶其他框架的使用，以下將詳細(xì)地介紹本人在處理工程文件構(gòu)建的過(guò)程對(duì)

vue是現(xiàn)階段很流行的前端框架，很多人通過(guò)vue官方文檔的學(xué)習(xí)，對(duì)vue的使用都有了一定的了解，但再在項(xiàng)目工程化處理的時(shí)候，卻發(fā)現(xiàn)不知道改怎么更好的管理自己的項(xiàng)目，如何去引入一些框架以及vue全家桶其他框架的使用，以下將詳細(xì)地介紹本人在處理工程文件構(gòu)建的過(guò)程；對(duì)于剛開(kāi)始解除vue的新手，建議使用官方腳手架vue-cli,當(dāng)然，如果你對(duì)于webpack很熟悉，你也可以自己動(dòng)手搭建自己的腳手架，當(dāng)然如果你沒(méi)把握的話(huà)，還是推薦使用vue-cli，能更好的幫助你搭建項(xiàng)目：

首先，我們可以通過(guò)npm安裝vue-clic,前提是我們需要有node環(huán)境，如果電腦還沒(méi)安裝node，先安裝，可通過(guò)

node -v

查詢(xún)node的版本號(hào)，有版本號(hào)則已經(jīng)安裝成功；

接下來(lái)，我們需要確保電腦已經(jīng)安裝了webpack，webpack是一個(gè)包管理工具，也是vue-cli的構(gòu)建工具，安裝也很簡(jiǎn)單，全局安裝只需要執(zhí)行

npm install webpack -g

緊接著，開(kāi)始我們vue-cli的安裝

npm install --global vue-cli

查看是否安裝成功，我們可以通過(guò)在cmd中輸入vue -V 查看，如下圖出現(xiàn)版本號(hào)則說(shuō)明安裝已經(jīng)完成；

我們可以打開(kāi)c盤(pán)>用戶(hù)>用戶(hù)名>AppData>Roaming>npm查看我們?nèi)职惭b的vue-cli,如下圖：

安裝完vue-cli后，我們可以通過(guò)在cmd中輸入

vue init webpack projectName

生成webpack腳手架，在我們按下回車(chē)的時(shí)候，會(huì)出現(xiàn)一些提示問(wèn)題，對(duì)應(yīng)關(guān)系如下：

項(xiàng)目名稱(chēng)（注意名稱(chēng)中不要出現(xiàn)大寫(xiě)字母，否則會(huì)報(bào)錯(cuò)）

項(xiàng)目描述（可寫(xiě)可不寫(xiě)，看個(gè)人需要）

作者（可寫(xiě)可不寫(xiě)，看個(gè)人需要）

vue編譯，這個(gè)選默認(rèn)即可，運(yùn)行加編譯Runtime + Compiler

是否安裝vue-router是否安裝vue路由工具

是否使用代碼管理工具ESLint管理你的代碼

后面幾個(gè)是測(cè)試的工具，需要自己自行了解
......

緊接著，我們使用cd squareRoot 移動(dòng)到文件夾squareRoot下，執(zhí)行

npm install

初始化項(xiàng)目，安裝package.json 文件中描述的依賴(lài)，初始化完成后，我們可以通過(guò)

npm run dev

運(yùn)行我們的項(xiàng)目，這個(gè)時(shí)候，我們可以打開(kāi)瀏覽器，輸入http://localhost:8080/，可看到如下界面，說(shuō)明我們的項(xiàng)目腳手架已經(jīng)初始化完成；

雖然我們是通過(guò)vue-cli生成的項(xiàng)目結(jié)構(gòu)，但還是希望讀者能夠清楚的知道每個(gè)文件的作用，這樣對(duì)于我們學(xué)習(xí)該腳手架以及搭建自己的腳手架會(huì)有很好的幫助，如下圖，是一級(jí)目錄下的文件的作用：

構(gòu)建相關(guān)的代碼主要是放在build文件夾和config文件夾下，包括了開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境，即dev和product,可以打開(kāi)文件進(jìn)行閱讀，有接觸過(guò)node的小伙伴應(yīng)該可以很快讀懂對(duì)應(yīng)文件代碼的作用，這里就不做詳細(xì)的介紹了，需要注意的一點(diǎn)是，我們需要修改打包后文件的路徑的時(shí)候，可以通過(guò)修改config文件夾下的index.js文件，如下圖：

這里，我們需要在src目錄下新增一個(gè)page文件夾，用于存放頁(yè)面相關(guān)的組件，而components存在的是公共的組件，這樣做有利于我們更好的理解項(xiàng)目：

該步驟并不是一定要實(shí)現(xiàn)的，實(shí)際項(xiàng)目操作中，要根據(jù)具體需求而引入對(duì)應(yīng)的UI框架或者不引入，鑒于指導(dǎo)的作用，在此處也做個(gè)示范，給與參考，可先閱讀iVew官網(wǎng)學(xué)習(xí)；
首先，我們應(yīng)進(jìn)行iView的安裝，可利用npm包管理工具安裝

npm install iview --save

安裝成功后，我們要將對(duì)應(yīng)的框架引入到項(xiàng)目中，這個(gè)時(shí)候，官網(wǎng)上有兩種方法可以實(shí)現(xiàn)，第一種是直接在main.js中做如下配置：

import Vue from "vue"
import App from "./App"
import router from "./router"
import iView from "iview";
import "iview/dist/styles/iview.css";

Vue.config.productionTip = false
Vue.use(iView);
/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  components: { App },
  template: ""
})

這種方式是一種全局引入的方式，引入后就在具體的頁(yè)面或者組件內(nèi)不需要再進(jìn)行其他的引入，但缺點(diǎn)是無(wú)論是否需要該組件，都將全部引入，對(duì)于性能優(yōu)化不是很好，這里推薦第二種用法，按需引入，這里需要借助插件babel-plugin-import實(shí)現(xiàn)按需加載組件，減小文件體積。首先需要安裝，并在.babelrc中配置：

npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
  }]]
}

然后這樣按需引入組件，就可以減小體積了，這里需要注意的是，因?yàn)槲覀冃薷牧?babelrc文件，這將導(dǎo)致我們第一種引入方法失效了，如果再使用那種方式引入，會(huì)導(dǎo)致代碼報(bào)錯(cuò)；

運(yùn)行結(jié)果如下圖

如果沒(méi)有閱讀過(guò)官方文檔，建議大伙先閱讀，官網(wǎng)上的教程已經(jīng)足夠詳細(xì)，受益匪淺；學(xué)習(xí)的過(guò)程中，需要了解路由配置的基本步驟，命名規(guī)則，嵌套路由，路由傳參，具名視圖以及路由守衛(wèi)，滾動(dòng)行為和懶加載，這里我們就不一一詳細(xì)介紹了，官網(wǎng)已有，我們這里是做構(gòu)建是的配置和懶加載處理：
首先，我們應(yīng)該是安裝vue-router,這個(gè)在我們生成項(xiàng)目的時(shí)候，已經(jīng)將該依賴(lài)加載進(jìn)來(lái)了，下一步要做的是在router文件下index.js進(jìn)行配置：

import Vue from "vue"
import Router from "vue-router"

Vue.use(Router)

export default new Router({
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  },
  routes: [
    {
      path:"/",
      redirect:"/root"
    },
    {
      path: "/root",
      name: "root",
      components: {
        Left:() => import("@/page/rootLeft.vue"),
        Middle: () =>import("@/page/rootMiddle.vue"),
        Right: ()=>import("@/page/rootRight.vue")
      }

    }

  ]
})

上面的代碼中，我們應(yīng)用到了幾個(gè)知識(shí)點(diǎn)，首先是滾動(dòng)行文，這里我們配置了當(dāng)路由跳轉(zhuǎn)的時(shí)候，默認(rèn)是滾動(dòng)到（0，0）位置，即頁(yè)面開(kāi)始位置，其次我們用到的redirect是一個(gè)路由重定向的配置，接下來(lái)，在路由"/root"下，配置了具名視圖，加載對(duì)應(yīng)組件到對(duì)應(yīng)視圖，我們引入組件的方式使用到了箭頭函數(shù)，這樣寫(xiě)的目的是為了實(shí)現(xiàn)路由的懶加載，這樣構(gòu)建，只有在路由被執(zhí)行的時(shí)候，才有引入對(duì)應(yīng)的組件，對(duì)于頁(yè)面性能的優(yōu)化有很大的幫助；這里還需要注意的是，我們?cè)谝氲倪@些組件中，其實(shí)默認(rèn)都是打包到一個(gè)文件下的，這樣就會(huì)導(dǎo)致一次性引入的文件過(guò)大，為此，我們可以利用webapck打包工具，我們?cè)赽uild>webpack.base.conf.js文件下，增加如下代碼，用于配置輸出文件的模塊名稱(chēng)，[name]是文件的名稱(chēng)，[chunkhash]是打包文件的哈希值，加上這個(gè)是為了將其作為版本號(hào)，以解決瀏覽器緩存機(jī)制帶來(lái)的問(wèn)題：

然后在路由文件中引入組件的代碼如下：

{
      path:"/test",
      name:"test",
      component: ()=>import(/*webpackChunkName:"test"*/"@/page/test.vue")
}

在引入組件的時(shí)候，加上/ webapckChunkName: "文件名" /，就這可以將對(duì)于的組件打包到指定名稱(chēng)的文件下，這樣可以減少首次加載的文件的大小，對(duì)于一些沒(méi)有聯(lián)系的功能，比如不同頁(yè)面，我們可以把對(duì)應(yīng)的組件放在同一個(gè)文件，這樣，既可以減少首次加載文件達(dá)大小，同時(shí)也可以將文件實(shí)現(xiàn)一個(gè)按需加載，提高頁(yè)面性能；

通過(guò)控制臺(tái)，我們可以查看當(dāng)前加載的文件資源，當(dāng)我們點(diǎn)擊測(cè)試按鈕的時(shí)候，頁(yè)面發(fā)生的跳轉(zhuǎn)，這時(shí)候，我們會(huì)發(fā)現(xiàn)，在Network下，會(huì)加一條新的資源加載信息，這一條就是我們的分塊打包后請(qǐng)求的資源；

寫(xiě)到這里的時(shí)候，可能很多人都會(huì)覺(jué)得，全局注冊(cè)filter和全局組件組件不是很簡(jiǎn)單嗎，直接Vue.filter()和Vue.component()不久解決了嗎，其實(shí)這么講也沒(méi)錯(cuò)，但是你可曾想過(guò)，注冊(cè)全組件是掛載在Vue對(duì)象下的，這意味這按照正常思路，我們要寫(xiě)在main.js文件下，這樣就會(huì)造成，我們所寫(xiě)的mian文件過(guò)于冗長(zhǎng)，你可以想一下，把全局的過(guò)濾器，和組件都寫(xiě)進(jìn)去，著實(shí)丑陋，很不優(yōu)雅，下面跟大家說(shuō)一個(gè)優(yōu)雅的實(shí)現(xiàn)方法：
首先，我們?cè)趕rc>assets目錄下新建一個(gè)js文件夾，再該文件夾下再創(chuàng)建一個(gè)filters.js的文件，如下圖：

接下來(lái)，我們?cè)趂ilters.js文件下寫(xiě)我們的全局過(guò)濾器，再將其拋出，寫(xiě)一個(gè)時(shí)間過(guò)濾器作為例子：

const fullTime = val => {
  var dateObj = new Date(Number(val));
  var year = dateObj.getFullYear();
  var month =
    dateObj.getMonth() + 1 > 9
      ? (dateObj.getMonth() + 1).toString()
      : "0" + (dateObj.getMonth() + 1).toString();
  var date =
    dateObj.getDate() > 9
      ? dateObj.getDate().toString()
      : "0" + dateObj.getDate().toString();
  var hour =
    dateObj.getHours() > 9
      ? dateObj.getHours().toString()
      : "0" + dateObj.getHours().toString();
  var minutes =
    dateObj.getMinutes() > 9
      ? dateObj.getMinutes().toString()
      : "0" + dateObj.getMinutes().toString();

  return year + "/" + month + "/" + date + "  " + hour + ":" + minutes;
};
module.exports={
  fullTime
}

做完這一步，其實(shí)我們的過(guò)濾器還沒(méi)寫(xiě)完，還需要在main.js中寫(xiě)一個(gè)注冊(cè)函數(shù)：

import Vue from "vue"
import App from "./App"
import router from "./router"
import filters from "./assets/js/filters"
import "iview/dist/styles/iview.css";

Object.keys(filters).forEach(key =>{
  Vue.filter(key,filters[key])
})

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  components: { App },
  template: ""
})

這樣，我們就把filters文件下的過(guò)濾器函數(shù)注冊(cè)到Vue全局下，同樣道理，我們可以按照同樣的思路注冊(cè)全局組件，我們?cè)趕rc>assets>js下新建一個(gè)components.js文件，在其中引入我們想注冊(cè)的全局組件，export出一個(gè)對(duì)象，使用Object.keys獲取后注冊(cè)到全局下：

//components.js下
import testInput from "@/components/testInput.vue"

export default{
  testInput:testInput
}

//main.js下
import components from "./assets/js/components"

Object.keys(components).forEach(key => {
  Vue.component(key,components[key])
})

優(yōu)雅的注冊(cè)全局組件和全局過(guò)濾器已經(jīng)講完，接下來(lái)就是API管理階段了。

這里我們使用axios發(fā)起異步的請(qǐng)求，安裝很簡(jiǎn)單，npm install axios 即可，一開(kāi)始的時(shí)候，我使用的是直接在每個(gè)組件內(nèi)使用axios,到后面發(fā)現(xiàn)，但當(dāng)我需要修改api接口的時(shí)候，需要查找的比較麻煩，只因?yàn)闆](méi)有集中的對(duì)所有的api進(jìn)行管理，而且每個(gè)請(qǐng)求回來(lái)的接口都需要寫(xiě)對(duì)應(yīng)的報(bào)錯(cuò)處理，著實(shí)麻煩，這里我新建一個(gè)fecth文件夾并在其下新建一個(gè)api.js用來(lái)存放所有的axios處理和封裝，：

//fetch/api.js
import axios from "axios"

export function fetch(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params).then(
      response => {
        resolve(response.data)
      }
    ).catch(error => {
      console.log(error)
      reject(error)
    })
  })
}

getDefaultData=()=>{
  return fetch("/api/getBoardList");
}
export default {
  getDefaultData
}

這樣做的好處是集中化的管理了所有的api接口，當(dāng)我們需要修改接口相關(guān)的代碼，只需要在api.js中修改，包括路由修改以及路由攔截等，可讀性更好；在不同的組件內(nèi)，我們只需要把對(duì)應(yīng)的接口用解構(gòu)賦值的思想把它引入對(duì)應(yīng)的組件內(nèi)即可使用。

import {getDefaultData} from "@/fetch/api.js"

這個(gè)功能主要是我們?cè)谡{(diào)試接口的時(shí)候使用，因?yàn)楫?dāng)我們運(yùn)行npm run dev 的時(shí)候，實(shí)際上我們的項(xiàng)目已經(jīng)掛載在一個(gè)本地服務(wù)端運(yùn)行了，端口號(hào)為我們配置的8080，當(dāng)我們想在該項(xiàng)目下訪(fǎng)問(wèn)服務(wù)端接口數(shù)據(jù)的時(shí)候，就會(huì)產(chǎn)生跨域的問(wèn)題，這個(gè)時(shí)候，我們就需要使用到proxy代理我們的數(shù)據(jù)請(qǐng)求，在vue-cli中已有配置相關(guān)的代碼，我們僅需要把對(duì)應(yīng)的代理規(guī)則寫(xiě)進(jìn)去即可，這里以一個(gè)通用配置例子實(shí)現(xiàn);
首先，我們?cè)趂etch文件夾下新建一個(gè)config.js的文件，用于存放我們的代理路徑配置：

const url = "http://www.dayilb.com/";
let ROOT;
if (process.env.NODE_ENV === "production") {
  //生產(chǎn)環(huán)境下的地址
  ROOT = url;
} else {
  //開(kāi)發(fā)環(huán)境下的代理地址，解決本地跨域跨域，配置在config目錄下的index.js dev.proxyTable中
  ROOT = "/"
}

exports.PROXYROOT = url; //代理指向地址
exports.ROOT = ROOT;

接下來(lái)，我們要在config目錄下新建一個(gè)proxyConfig.js,存放代理服務(wù)器的配置規(guī)則：

var config= require("../src/fetch/config");
module.exports = {
  proxy: {
    [config.ROOT]: {    //需要代理的接口，一般會(huì)加前綴來(lái)區(qū)分，但我個(gè)人是沒(méi)加，即‘/’都轉(zhuǎn)發(fā)代理
      target: config.PROXYROOT,  // 接口域名
      changeOrigin: true,  //是否跨域
      pathRewrite: {
        [`^/`]: ""   //需要rewrite的，針對(duì)上面的配置，是不需要的
      }
    }
  }
}

最后，我們?cè)赾onfig目錄下的index.js文件中，引入我們的代理規(guī)則,并在，即

var proxyConfig=require("./proxyConfig")
...//省略號(hào)表示省略其他代碼
module.exports = {
...
proxyTable: proxyConfig.proxy,
...
}

重新啟動(dòng)項(xiàng)目，我們就可以做到代理轉(zhuǎn)發(fā)來(lái)實(shí)現(xiàn)跨域請(qǐng)求了。

終于，來(lái)到了最后一步，那就是我們的狀態(tài)管理vuex，其實(shí)這個(gè)東西不是說(shuō)所有項(xiàng)目都需要引入，看項(xiàng)目的具體需求，但需要對(duì)同一個(gè)數(shù)據(jù)源進(jìn)行大量的操作的時(shí)候，建議使用，如果每個(gè)組件的數(shù)據(jù)都可以輕易的在data中管理，那其實(shí)是沒(méi)必要引進(jìn)去的，該管理工具是更友好的解決了組件間傳值的問(wèn)題，包括了兄弟組件；
首先，我們需要安裝vuex,老規(guī)矩就是

npm install vuex

安裝完成后，我們需要對(duì)我們的項(xiàng)目進(jìn)行一些修改，首先是我們的目錄，我們需要src下新增一個(gè)store文件夾作為vuex數(shù)據(jù)存放位置，在開(kāi)始搭建前，我們需要有vuex的相關(guān)知識(shí)，我就不一一說(shuō)明，自行百度一下vuex官方文檔；眾所周知，vuex有state,getter,mutation,action等關(guān)鍵屬性，state主要是用于存放我們的原始數(shù)據(jù)結(jié)構(gòu)，類(lèi)似與vue的data,不過(guò)它是全局的，getter類(lèi)似于計(jì)算屬性computed,mutation主要用于觸發(fā)修改state的行為，actions 也是一種觸發(fā)動(dòng)作，只不過(guò)與mutation的區(qū)別在于異步的操作我們只能在action中進(jìn)行而不能在mutation中進(jìn)行，目的是為了瀏覽器更好的跟蹤state中數(shù)據(jù)的變化。
接下來(lái)，我們來(lái)看一下store文件夾中都有什么：

從上圖可知，我創(chuàng)建了一個(gè)index.js入口文件，getters.js,mutation.js和mutationtypes.js,以及actions.js，下面我們先看看index.js的源碼：

import Vue from "vue"
import Vuex from "vuex"

import actions from "@/store/actions.js"
import getters from "@/store/getters.js"
import mutations from "@/store/mutations.js"

Vue.use(Vuex)
const state = {
  recipeList:[],
  currRecipe:0
};
if (module.hot) {
  // 使 action 和 mutation 成為可熱重載模塊
  module.hot.accept(["./mutations"], () => {
    // 獲取更新后的模塊
    // 因?yàn)?babel 6 的模塊編譯格式問(wèn)題，這里需要加上 `.default`
    const newMutations = require("./mutations").default;
    // 加載新模塊
    store.hotUpdate({
      mutations: newMutations,
    })
  })
}
export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})

首先，我們把Vuex插件引入vue中，并新建了一個(gè)Vuex.Store()對(duì)象，其中各項(xiàng)屬性值來(lái)自我們前面所創(chuàng)建的文件夾，中間module.hot是配置我們的action和mutation成為可熱重載的模塊，對(duì)于我們的調(diào)試更方便，當(dāng)我們創(chuàng)建為Vuex.store對(duì)象后，我們還需要把它聲明到main.js的頁(yè)面Vue對(duì)象中

import store from "./store/index"

...
new Vue({
  el: "#app",
  router,
  store,
  components: {App},
  template: ""
})

在使用mutation的時(shí)候，我們是推薦大家把所有的行為常量保存到一個(gè).js文件中，這樣更有利于管理我們的項(xiàng)目，因?yàn)槲覀兊膍utation往往是需要使用action進(jìn)一步封裝的，這樣我們?cè)谑褂玫臅r(shí)候，只需要修改常量對(duì)象里的屬性值，就可以達(dá)到同時(shí)修改mutation和action的對(duì)應(yīng)關(guān)系，一舉兩得，下面舉例給大家參考：

//mutationType.js
export default {
  ADD_NEW_RECIPT:"ADD_NEW_RECIPT",
  CHANGE_CURR_TAB:"CHANGE_CURR_TAB"
}

//mutations.js
import mutationTypes from "@/store/mutationTypes.js"

const mutations = {
    [mutationTypes.ADD_NEW_RECIPT](state, item) {
      state.recipeList.push(item);
    },
    [mutationTypes.CHANGE_CURR_TAB](state, index) {
      state.currRecipe=index;
    }
  }
;
export default mutations

import mutationTypes from "@/store/mutationTypes.js"

const actions = {
  add_new_recipt:({commit,state}, type)=>{
    commit(mutationTypes.ADD_NEW_RECIPT,type);
  },
  change_curr_tab:({commit},index)=>{
    commit(mutationTypes.CHANGE_CURR_TAB,index)
  }
};

export default actions

從上面的例子可以看出，action和mutation使用的是同一個(gè)常量表，可以更好的管理我們的修改動(dòng)作，而不會(huì)出現(xiàn)對(duì)不上的錯(cuò)誤；
最后，我們?cè)诮M件內(nèi)引入vuex中存放的state和action，如下

import {mapActions, mapState} from "vuex"
...
computed: {
      ...mapState({
        recipeList: state => state.recipeList,
        currRecipe: state => state.currRecipe
      })
    },
methods: {
      ...mapActions([
        "add_new_recipt",
        "change_curr_tab"
      ]),
      addNewRecipt(type) {
        this.add_new_recipt(type)
      }
    }

這里是推薦大家按照例子中，使用mapActions和mapState以及利用三點(diǎn)擴(kuò)展符來(lái)引入state 和action，state最好存放在組件的computed 屬性?xún)?nèi)，這樣當(dāng)state中的數(shù)據(jù)發(fā)生改變的時(shí)候，也會(huì)實(shí)時(shí)的修改computed里定義的變量值，來(lái)實(shí)現(xiàn)數(shù)據(jù)的綁定，同時(shí)，當(dāng)我們修改了某些數(shù)據(jù)的時(shí)候，也要同步到state中去，這樣數(shù)據(jù)源才可以保持一致性與準(zhǔn)確性；

寫(xiě)這個(gè)的時(shí)候，只是給個(gè)思路去搭建自己的工程文件，并不是說(shuō)把所有相關(guān)知識(shí)點(diǎn)都講一遍，需要有一定的相關(guān)知識(shí)，不過(guò)相信還沒(méi)自己搭建過(guò)工程文件的小伙伴會(huì)不知道如何去安排，可以參考參考，這里推薦大家安裝chrome的擴(kuò)展插件Vue.js devtools，可以很有效的幫助我們追蹤數(shù)據(jù)，定位錯(cuò)誤。