如何在vuejs中抽出公共代碼

當咱們在使用vue構建中大型項目時，一般會遇到某些常常用的方法以及屬性，好比說搭建一個員工管理系統，請求的url須要一個共同的前綴，或者在某幾個view中須要用到時間，這個時間是經過某方法格式化以後的等等，若是每次用到都寫共同的代碼，那樣若是以後有變更的話維護起來會很是麻煩。

因此咱們就得想辦法抽出公共代碼，由於vue是組件化開發，咱們就會很天然的與es6的module模塊化聯繫到一塊兒。其實當咱們在搭建項目結構時就應該先提早埋下伏筆，有一個util文件夾，裏面放的就是咱們要寫的公共代碼，其實不少vue的例子都是相似於這種結構搭建的。

對於固定的配置參數咱們能夠放到config.js中，就像下面這樣。

const config = {
    request_prefix: 'http://localhost:10003',
    base_img: 'http://www.baidu.com',
 
}

const DingConf = function(data){
   xxxxxxxxx
}


export {config, DingConf}

對於經常使用的工具函數咱們能夠放到util.js中，結構跟上面同樣。

而後爲何我要用export來導出，而不用export default呢？

由於前者更爲靈活，由於對於大中型項目來講，咱們的工具函數以及配置參數每每較多，若是咱們使用export default導出的話，在組件中引入就會所有引入，但咱們的需求是隻在相應的頁面中按需引入便可，因此在vue文件中，咱們就能夠這樣寫

import {config} from 'src/util/config'                     // 引入模塊
export default {
　　created(){
　　　　this.$http({
　　　　　　url: config.request_prefix + xxxxxxxxxxxxx       // 使用
　　　　})
　　}
}

這樣寫的優勢是加強了可讀性並利於維護。若是有同窗不太理解es6中的import，export，建議你們去看下阮一峯大神的es6入門教程，在這裏我也簡單的說下吧，由於vue是模塊化，因此就得導出某些東東，而後每一個模塊只負責不一樣的業務，因此嘛咱們最後就得export一下，由於const是不變的常量，因此在配置項中儘量用這個，在工具函數中用let聲明變量，而後import後面的{ ... }就是引入某個模塊的某些屬性或方法，from 'xxxx' 這裏面是指引入哪一個模塊。