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

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

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

node -v

查詢node的版本號，有版本號則已經(jīng)安裝成功；

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

npm install webpack -g

緊接著，開始我們vue-cli的安裝

npm install --global vue-cli

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

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

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

vue init webpack projectName

生成webpack腳手架，在我們按下回車的時候，會出現(xiàn)一些提示問題，對應關系如下：

項目名稱（注意名稱中不要出現(xiàn)大寫字母，否則會報錯）

項目描述（可寫可不寫，看個人需要）

作者（可寫可不寫，看個人需要）

vue編譯，這個選默認即可，運行加編譯Runtime + Compiler

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

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

后面幾個是測試的工具，需要自己自行了解
......

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

npm install

初始化項目，安裝package.json 文件中描述的依賴，初始化完成后，我們可以通過

npm run dev

運行我們的項目，這個時候，我們可以打開瀏覽器，輸入http://localhost:8080/，可看到如下界面，說明我們的項目腳手架已經(jīng)初始化完成；

雖然我們是通過vue-cli生成的項目結構，但還是希望讀者能夠清楚的知道每個文件的作用，這樣對于我們學習該腳手架以及搭建自己的腳手架會有很好的幫助，如下圖，是一級目錄下的文件的作用：

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

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

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

npm install iview --save

安裝成功后，我們要將對應的框架引入到項目中，這個時候，官網(wǎng)上有兩種方法可以實現(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: ""
})

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

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

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

然后這樣按需引入組件，就可以減小體積了，這里需要注意的是，因為我們修改了.babelrc文件，這將導致我們第一種引入方法失效了，如果再使用那種方式引入，會導致代碼報錯；

運行結果如下圖

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

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")
      }

    }

  ]
})

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

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

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

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

通過控制臺，我們可以查看當前加載的文件資源，當我們點擊測試按鈕的時候，頁面發(fā)生的跳轉，這時候，我們會發(fā)現(xiàn)，在Network下，會加一條新的資源加載信息，這一條就是我們的分塊打包后請求的資源；

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

接下來，我們在filters.js文件下寫我們的全局過濾器，再將其拋出，寫一個時間過濾器作為例子：

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
}

做完這一步，其實我們的過濾器還沒寫完，還需要在main.js中寫一個注冊函數(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文件下的過濾器函數(shù)注冊到Vue全局下，同樣道理，我們可以按照同樣的思路注冊全局組件，我們在src>assets>js下新建一個components.js文件，在其中引入我們想注冊的全局組件，export出一個對象，使用Object.keys獲取后注冊到全局下：

//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)雅的注冊全局組件和全局過濾器已經(jīng)講完，接下來就是API管理階段了。

這里我們使用axios發(fā)起異步的請求，安裝很簡單，npm install axios 即可，一開始的時候，我使用的是直接在每個組件內(nèi)使用axios,到后面發(fā)現(xiàn)，但當我需要修改api接口的時候，需要查找的比較麻煩，只因為沒有集中的對所有的api進行管理，而且每個請求回來的接口都需要寫對應的報錯處理，著實麻煩，這里我新建一個fecth文件夾并在其下新建一個api.js用來存放所有的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接口，當我們需要修改接口相關的代碼，只需要在api.js中修改，包括路由修改以及路由攔截等，可讀性更好；在不同的組件內(nèi)，我們只需要把對應的接口用解構賦值的思想把它引入對應的組件內(nèi)即可使用。

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

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

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

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

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

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

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

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

重新啟動項目，我們就可以做到代理轉發(fā)來實現(xiàn)跨域請求了。

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

npm install vuex

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

從上圖可知，我創(chuàng)建了一個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"], () => {
    // 獲取更新后的模塊
    // 因為 babel 6 的模塊編譯格式問題，這里需要加上 `.default`
    const newMutations = require("./mutations").default;
    // 加載新模塊
    store.hotUpdate({
      mutations: newMutations,
    })
  })
}
export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})

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

import store from "./store/index"

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

在使用mutation的時候，我們是推薦大家把所有的行為常量保存到一個.js文件中，這樣更有利于管理我們的項目，因為我們的mutation往往是需要使用action進一步封裝的，這樣我們在使用的時候，只需要修改常量對象里的屬性值，就可以達到同時修改mutation和action的對應關系，一舉兩得，下面舉例給大家參考：

//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使用的是同一個常量表，可以更好的管理我們的修改動作，而不會出現(xiàn)對不上的錯誤；
最后，我們在組件內(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以及利用三點擴展符來引入state 和action，state最好存放在組件的computed 屬性內(nèi)，這樣當state中的數(shù)據(jù)發(fā)生改變的時候，也會實時的修改computed里定義的變量值，來實現(xiàn)數(shù)據(jù)的綁定，同時，當我們修改了某些數(shù)據(jù)的時候，也要同步到state中去，這樣數(shù)據(jù)源才可以保持一致性與準確性；

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