1,前言
在Vue專案開發中,肯定會有這樣一個場景:在不同的元件頁面用到同樣的方法,比如格式化時間,檔案下載,物件深拷貝,返回資料型別,複製文字等等。這時候我們就需要把常用函式抽離出來,提供給全域性使用。那如何才能定義一個工具函式類,讓我們在全域性環境中都可以使用呢?請看下文分解。
PS:本文vue為2.6.12
2,第一種方式
直接新增到Vue例項原型上
首先開啟main.js
,通過import
引入定義的通用方法utils.js
檔案,然後使用Vue.prototype.$utils = utils
,新增到Vue
例項上
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import utils from './utils/Utils'
Vue.prototype.$utils = utils
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
之後,在元件頁面中,需要使用的話,就是this.$utils.xxx
就行了
methods: {
fn() {
let time = this.$utils.formatTime(new Date())
}
}
缺點:
- 繫結的東西多了會使vue例項過大
- 每次使用都要加上this
優點:
- 定義簡單
3,第二種方式
使用webpack.ProvidePlugin
全域性引入
首先在vue.config
中引入webpack
和path
,然後在module.exports
的configureWebpack
物件中定義plugins
,引入你需要的js
檔案
完整的vue.config.js
配置如下:
const baseURL = process.env.VUE_APP_BASE_URL
const webpack = require('webpack')
const path = require("path")
module.exports = {
publicPath: './',
outputDir: process.env.VUE_APP_BASE_OUTPUTDIR,
assetsDir: 'assets',
lintOnSave: true,
productionSourceMap: false,
configureWebpack: {
devServer: {
open: false,
overlay: {
warning: true,
errors: true,
},
host: 'localhost',
port: '9000',
hotOnly: false,
proxy: {
'/api': {
target: baseURL,
secure: false,
changeOrigin: true, //開啟代理
pathRewrite: {
'^/api': '/',
},
},
}
},
plugins: [
new webpack.ProvidePlugin({
UTILS: [path.resolve(__dirname, './src/utils/Utils.js'), 'default'], // 定義的全域性函式類
TOAST: [path.resolve(__dirname, './src/utils/Toast.js'), 'default'], // 定義的全域性Toast彈框方法
LOADING: [path.resolve(__dirname, './src/utils/Loading.js'), 'default'] // 定義的全域性Loading方法
})
]
}
}
這樣定義好了之後,如果你專案中有ESlint
,還需要在根目錄下的.eslintrc.js
檔案中,加入一個globals
物件,把定義的全域性函式類的屬性名啟用一下,不然會報錯找不到該屬性。
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true,
node: true,
es6: true,
},
"globals":{
"UTILS": true,
"TOAST": true,
"LOADING": true
}
// ...省略N行ESlint的配置
}
定義好了之後,重啟專案, 使用起來如下:
computed: {
playCount() {
return (num) => {
// UTILS是定義的全域性函式類
const count = UTILS.tranNumber(num, 0)
return count
}
}
}
缺點:
- 還沒發現...
優點:
- 團隊開發爽
如果看了覺得有幫助的,我是@鵬多多,歡迎 點贊 關注 評論;END
PS:在本頁按F12,在console中輸入document.querySelectorAll('.diggit')[0].click(),有驚喜哦
公眾號
往期文章
- 使用nvm管理node.js版本以及更換npm淘寶映象源
- 超詳細!Vue-Router手把手教程
- vue中利用.env檔案儲存全域性環境變數,以及配置vue啟動和打包命令
- 微信小程式實現搜尋關鍵詞高亮
- 超詳細!Vue的九種通訊方式
- 超詳細!Vuex手把手教程
個人主頁