如何在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' 這里面是指引入哪個模塊。