【JavaScript源代码】配置vue全局方法的两种方式实例.docx

配置vue全局方法的两种方式实例 　　目录　　1，前言 2，第一种方式 3，第二种方式 总结　　1，前言 　　2，第一种方式 　　3，第二种方式 　　总结　　1，前言 　　在Vue项目开发中，肯定会有这样一个场景：在不同的组件页面用到同样的方法，比如格式化时间，文件下载，对象深拷贝，返回数据类型，复制文本等等。这时候我们就需要把常用函数抽离出来，提供给全局使用。那如何才能定义一个工具函数类，让我们在全局环境中都可以使用呢？请看下文分解。　　PS：本文vue为2.6.12　　2，第一种方式 　　直接添加到Vue实例原型上　　首先打开main.js，通过import引入定义的通用方法utils.j 【JavaScript源代码】配置vue全局方法的两种方式实例 在Vue.js开发中，为了提高代码复用性和组织性，我们经常需要将通用的函数或工具类设置为全局可访问。这样，无论在哪个组件中，都可以方便地调用这些方法。以下是配置Vue全局方法的两种常见方法： 1. **直接添加到Vue实例原型上** 这种方法是通过修改Vue实例的原型链，将自定义的方法挂载到`Vue.prototype`上。你需要在`main.js`入口文件中引入工具函数模块（例如`utils.js`），然后使用`Vue.prototype.$utils = utils`来绑定。这样，你就可以在任何Vue组件中通过`this.$utils`访问到这些全局方法。 ```javascript 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') // 在组件中使用 methods: { fn() { let time = this.$utils.formatTime(new Date()) } } ``` **优点**：定义简单，直接通过`Vue.prototype`扩展，易于理解和使用。 **缺点**：可能会增加Vue实例的大小，因为所有组件都会包含这些全局方法。另外，每次使用时都需要通过`this`关键字来调用。 2. **使用webpack.ProvidePlugin全局引入** 第二种方法是利用webpack的`ProvidePlugin`，它可以全局注入模块，使得在项目中的任何地方无需import即可直接使用。你需要在`vue.config.js`配置文件中引入`webpack`和`path`，然后在`configureWebpack`的`plugins`数组中添加`ProvidePlugin`实例，指定需要全局引入的模块路径。 ```javascript const webpack = require('webpack') const path = require('path') module.exports = { // ...其他配置 configureWebpack: { // ...其他配置 plugins: [ new webpack.ProvidePlugin({ UTILS: [path.resolve(__dirname, './src/utils/Utils.js'), 'default'], TOAST: [path.resolve(__dirname, './src/utils/Toast.js'), 'default'], LOADING: [path.resolve(__dirname, './src/utils/Loading.js'), 'default'] }) ] } } ``` 这样配置后，无需import，你就可以直接在项目中使用`UTILS`、`TOAST`和`LOADING`等全局变量。这种方法对于那些希望全局共享但不希望直接挂载到Vue实例上的模块特别有用。 **优点**：避免了Vue实例大小的增加，同时也无需在每个组件中显式引入和使用`this`关键字。 **缺点**：配置相对复杂，需要对webpack有一定的了解，并且可能与ESLint等代码检查工具冲突，需要额外的配置来解决。 在选择全局方法配置方式时，应根据项目规模、团队习惯以及性能需求来决定。对于小型项目，第一种方式可能更简洁；而对于大型项目，第二种方式可能更有利于维护和优化。在实际应用中，还可以结合这两种方法，根据不同的功能和场景进行灵活选择。