Vue中安装插件的方式
一. 认识Vue插件
- 1.1. 通常向Vue全局添加一些功能时，会采用插件的模式，它有两种编写方式：
- 1.1.1. 对象类型：一个对象，但是必须包含一个install的函数，该函数会在安装插件时执行
// 方式一：传入对象的情况app.use({install: function(app) {console.log('传入对象的install被执行：',app);}}) - 1.1.2. 函数类型：一个function，该函数会在安装插件时自动执行
// 方式二：传入函数的情况，直接在执行函数的时候传入appapp.use(function(app){console.log('传入函数被执行：',app);})
- 1.1.1. 对象类型：一个对象，但是必须包含一个install的函数，该函数会在安装插件时执行
- 插件可以完成的功能没有限制，比如下面的几种都是可以的：
- 添加全局方法或者property, 通过把它们添加到config.globalProperties上实现；
- 添加全局资源：指令/过滤器/过渡等
- 通过全局mixin来添加一些组件选项；
- 一个库，提供自己的API，同时提供上面提到的一个或多个功能；
1.2 全局指令导入使用插件方式
- 1.2.1. 在
directives文件夹，index.js文件，修改导出函数名：- 具体代码如下：
import directiveFocus from "./focus";import directiveUnit from "./unit";import directiveFtime from "./ftime";export default function directives (app) {directiveFocus(app)directiveUnit(app)directiveFtime(app)}
- 具体代码如下：
- 1.2.2. 在
main.js文件中，导入并执行directives函数- 具体代码如下：
import { createApp } from 'vue'import App from './01_自定义指令/App.vue'import directives from './01_自定义指令/directives/index.js'// 使用插件的方式，可以直接链式调用，使用use插件方式去调用的时候，把directives当成一个函数去调用，并且传入App// 写法上的转变，并没有说这个东西比原来的要好， 使用插件的方式去写的话，比起调用函数的话稍微优雅一点点createApp(App).use(directives).mount('#app')
- 具体代码如下：