溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
當我們在使用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' 這里面是指引入哪個模塊。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
