前言

當我們在使用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' 這里面是指引入哪個模塊。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。