Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to configure the vue global method", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to configure the vue global method" this article.

The first way

Add directly to the Vue instance prototype

First open main.js, introduce the defined general method utils.js file through import, and then add it to the Vue instance using Vue.prototype.$utils = utils

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 = utilsnew Vue ({router, store, render: h = > h (App)}). $mount ('# app')

After that, in the component page, if you need to use it, it is this.$utils.xxx.

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

Disadvantages:

Too much binding will make the vue instance too large.

Add this to every use.

Advantages:

Simple definition

The second way

Global introduction using webpack.ProvidePlugin

First introduce webpack and path into vue.config, then define plugins in the configureWebpack object of module.exports, and introduce the js file you need

The complete vue.config.js configuration is as follows:

Const baseURL = process.env.VUE_APP_BASE_URLconst 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, / / enable proxy pathRewrite: {'^ / api':'/',}}, plugins: [new webpack.ProvidePlugin ({UTILS: [path.resolve (_ dirname,'. / src/utils/Utils.js'), 'default'] / / defined global function class TOAST: [path.resolve (_ dirname,'. / src/utils/Toast.js'), 'default'], / / defined global Toast pop-up method LOADING: [path.resolve (_ _ dirname,'. / src/utils/Loading.js'), 'default'] / / defined global Loading method}}

After this definition, if you have ESlint in your project, you also need to add a globals object to the .eslintrc.js file in the root directory, and enable the property name of the defined global function class, otherwise the property will not be found by error.

Module.exports = {root: true, parserOptions: {parser: 'babel-eslint', sourceType:' module'}, env: {browser: true, node: true, es6: true,}, "globals": {"UTILS": true, "TOAST": true, "LOADING": true} / /. Omit the configuration of N-line ESlint}

Once defined, restart the project and use it as follows:

Computed: {playCount () {return (num) = > {/ / UTILS is the defined global function class const count = UTILS.tranNumber (num, 0) return count}

Disadvantages:

I haven't found it yet.

Advantages:

Team development is cool.

These are all the contents of the article "how to configure vue global methods". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.