亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

配置vue全局方法的兩種方式實(shí)例

 更新時(shí)間：2021年09月13日 11:49:26   作者：鵬多多  
vue項(xiàng)目中有一些方法需要在多個(gè)頁(yè)面調(diào)用,但為了避免在每個(gè)頁(yè)面都import進(jìn)來(lái),可以把方法加到原型上去,這樣在每個(gè)組件中都能使用了,下面這篇文章主要給大家介紹了關(guān)于配置vue全局方法的兩種方式,需要的朋友可以參考下

1，前言

在Vue項(xiàng)目開(kāi)發(fā)中，肯定會(huì)有這樣一個(gè)場(chǎng)景：在不同的組件頁(yè)面用到同樣的方法，比如格式化時(shí)間，文件下載，對(duì)象深拷貝，返回?cái)?shù)據(jù)類型，復(fù)制文本等等。這時(shí)候我們就需要把常用函數(shù)抽離出來(lái)，提供給全局使用。那如何才能定義一個(gè)工具函數(shù)類，讓我們?cè)谌汁h(huán)境中都可以使用呢？請(qǐng)看下文分解。

PS：本文vue為2.6.12

2，第一種方式

直接添加到Vue實(shí)例原型上

首先打開(kāi)main.js，通過(guò)import引入定義的通用方法utils.js文件，然后使用Vue.prototype.$utils = utils，添加到Vue實(shí)例上

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')

之后，在組件頁(yè)面中，需要使用的話，就是this.$utils.xxx就行了

methods: {
 fn() {
  let time = this.$utils.formatTime(new Date())
 }
}

缺點(diǎn)：

  • 綁定的東西多了會(huì)使vue實(shí)例過(guò)大
  • 每次使用都要加上this

優(yōu)點(diǎn)：

  • 定義簡(jiǎn)單

官方說(shuō)明文檔

3，第二種方式

使用webpack.ProvidePlugin全局引入

首先在vue.config中引入webpack和path，然后在module.exports的configureWebpack對(duì)象中定義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, //開(kāi)啟代理
     pathRewrite: {
      '^/api': '/',
     },
    },
   }
  },
  plugins: [
   new webpack.ProvidePlugin({
          UTILS: [path.resolve(__dirname, './src/utils/Utils.js'), 'default'], // 定義的全局函數(shù)類
    TOAST: [path.resolve(__dirname, './src/utils/Toast.js'), 'default'], // 定義的全局Toast彈框方法
    LOADING: [path.resolve(__dirname, './src/utils/Loading.js'), 'default'] // 定義的全局Loading方法
        })
  ]
 }
}

這樣定義好了之后，如果你項(xiàng)目中有ESlint，還需要在根目錄下的.eslintrc.js文件中，加入一個(gè)globals對(duì)象，把定義的全局函數(shù)類的屬性名啟用一下，不然會(huì)報(bào)錯(cuò)找不到該屬性。

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的配置
}

定義好了之后，重啟項(xiàng)目， 使用起來(lái)如下：

computed: {
 playCount() {
  return (num) => {
   // UTILS是定義的全局函數(shù)類
   const count = UTILS.tranNumber(num, 0)
   return count
  }
 }
}

缺點(diǎn)：

  • 還沒(méi)發(fā)現(xiàn)...

優(yōu)點(diǎn)：

  • 團(tuán)隊(duì)開(kāi)發(fā)爽

官方說(shuō)明文檔

總結(jié)

到此這篇關(guān)于配置vue全局方法的兩種方式的文章就介紹到這了,更多相關(guān)配置vue全局方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論