在vue.js中抽出公共代碼的方法示例

前言

創(chuàng)新互聯(lián)是專業(yè)的青銅峽網(wǎng)站建設(shè)公司，青銅峽接單;提供成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行青銅峽網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

當(dāng)我們在使用vue構(gòu)建中大型項目時，通常會遇到某些經(jīng)常用的方法以及屬性，比如說搭建一個員工管理系統(tǒng)，請求的url需要一個共同的前綴，或者在某幾個view中需要用到時間，這個時間是通過某方法格式化之后的等等，如果每次用到都寫共同的代碼，那樣如果之后有變動的話維護(hù)起來會非常麻煩。

所以我們就得想辦法抽出公共代碼，因為vue是組件化開發(fā)，我們就會很自然的與es6的module模塊化聯(lián)系到一起。其實當(dāng)我們在搭建項目結(jié)構(gòu)時就應(yīng)該先提前埋下伏筆，有一個util文件夾，里面放的就是我們要寫的公共代碼，其實很多vue的例子都是類似于這種結(jié)構(gòu)搭建的。

對于固定的配置參數(shù)我們可以放到config.js中，就像下面這樣。

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

const DingConf = function(data){
 xxxxxxxxx
}


export {config, DingConf}

對于常用的工具函數(shù)我們可以放到util.js中，結(jié)構(gòu)跟上面一樣。

然后為什么我要用export來導(dǎo)出，而不用export default呢？

因為前者更為靈活，因為對于大中型項目來說，我們的工具函數(shù)以及配置參數(shù)往往較多，如果我們使用export default導(dǎo)出的話，在組件中引入就會全部引入，但我們的需求是只在相應(yīng)的頁面中按需引入即可，所以在vue文件中，我們就可以這樣寫

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

這樣寫的優(yōu)點是增強(qiáng)了可讀性并利于維護(hù)。如果有同學(xué)不太理解es6中的import，export，建議大家去看下阮一峰大神的es6入門教程，在這里我也簡單的說下吧，因為vue是模塊化，所以就得導(dǎo)出某些東東，然后每個模塊只負(fù)責(zé)不同的業(yè)務(wù)，所以嘛我們最后就得export一下，因為const是不變的常量，所以在配置項中盡可能用這個，在工具函數(shù)中用let聲明變量，然后import后面的{ ... }就是引入某個模塊的某些屬性或方法，from 'xxxx' 這里面是指引入哪個模塊。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對創(chuàng)新互聯(lián)的支持。

新聞名稱：在vue.js中抽出公共代碼的方法示例
分享路徑：http://muchs.cn/article12/gedgdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、全網(wǎng)營銷推廣、網(wǎng)站收錄、微信公眾號、網(wǎng)站改版、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)