在vue.js中抽出公共代碼的方法示例
前言
當我們在使用vue構建中大型項目時，通常會遇到某些經常用的方法以及屬性，比如說搭建一個員工管理系統(tǒng)，請求的url需要一個共同的前綴，或者在某幾個view中需要用到時間，這個時間是通過某方法格式化之后的等等，如果每次用到都寫共同的代碼，那樣如果之后有變動的話維護起來會非常麻煩。
所以我們就得想辦法抽出公共代碼，因為vue是組件化開發(fā)，我們就會很自然的與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 // 使用
})
}
}
這樣寫的優(yōu)點是增強了可讀性并利于維護。如果有同學不太理解es6中的import，export，建議大家去看下阮一峰大神的es6入門教程，在這里我也簡單的說下吧，因為vue是模塊化，所以就得導出某些東東，然后每個模塊只負責不同的業(yè)務，所以嘛我們最后就得export一下，因為const是不變的常量，所以在配置項中盡可能用這個，在工具函數中用let聲明變量，然后import后面的{ ... }就是引入某個模塊的某些屬性或方法，from 'xxxx' 這里面是指引入哪個模塊。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
最近學習過程中常碰到讓用戶登錄注冊這種,這篇文章主要給大家介紹了關于Vue實戰(zhàn)記錄之登陸頁面實現的相關資料,需要的朋友可以參考下2021-06-06
Vue3中的事件修飾符包括：.stop（阻止冒泡）、.prevent（阻止默認事件）、.self（阻止自身事件）、.capture（打亂冒泡順序）、.once（事件只觸發(fā)一次）和.passive（事件默認行為立即執(zhí)行）,這些修飾符可以幫助開發(fā)者更靈活地控制事件的處理方式2025-02-02
這篇文章主要介紹了詳解Vuex管理登錄狀態(tài),小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
大家都知道在Vue里面有兩種出名的插件能夠支持發(fā)起異步數據傳輸和接口交互,分別是axios和vue-resource,同時vue更新到2.0之后,宣告不再對vue-resource更新,而是推薦的axios,今天就講一下怎么引入axios,需要的朋友可以參考下2024-01-01
這篇文章主要給大家介紹了關于在Vue中使用Echarts可視化庫的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
vue-router實現簡單vue多頁切換、嵌套路由、路由跳轉的步驟和報錯
最近學習到VUE路由這塊,發(fā)現這塊知識點有點多,好容易混亂,這篇文章主要介紹了vue-router實現簡單vue多頁切換、嵌套路由、路由跳轉的步驟和報錯的相關資料,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了創(chuàng)建Vue項目以及引入Iview的方法示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
文章介紹了在Element UI的el-select組件中新增自定義按鈕的方法,并詳細說明了設置`popper-append-to-body`屬性為false的重要性,以及如何通過修改樣式來實現自定義按鈕的添加和樣式效果展示,感興趣的朋友跟隨小編一起看看吧2024-11-11
這篇文章主要為大家詳細介紹了Vue.js 合bootstrap實現分頁控件的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了vue實現密碼顯示隱藏功能的思路詳解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03