vue中自定义插件

简述

再写插件之前，首先我们要弄清楚什么是插件？

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制，一般有下面几种：

1. 添加全局方法或者属性。
2. 添加全局资源：指令 / 过滤器 / 过渡等
3. 通过全局混入来添加一些组件选项
4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。

Vue 插件是对 Vue 全局功能的扩展，他可以给 Vue 添加全局方法、属性、组件、过滤器、指令等等。

相信用过vue的伙伴都熟悉 Vue.use() 方法；
那么问题来了Vue.use()方法到底使用来做什么的呢？
答案就是：用来注册插件的；
也就是说向我们熟悉的elmentui, vant-ui，vue-router,vuex,我们都可以把它看作一个插件，因为他们都需要使用vue.use()来进行注册使用。

那么插件如何写呢？

在vuejs中，插件是定义在install方法中的，在这个install方法中有两个参数，第一个参数是 Vue 构造器也就是我们熟悉的Vue实例里面有一些列的属性，第二个参数是一个可选的选项对象

了解了这些，接下来就让我们一起开发一个自定义插件，开发一个什么类型的插件呢，类似于elmentui中button组件的插件。

自定义插件 my-button

1. 在整个项目的开发目录src目录中创建一个plugin文件夹，通常这个文件夹中用来存放自定义插件。

2. 在plugin文件家中创建一个myBtn.js文件，在这个文件中我们可以自定义我们的my-button插件。

css 文件就是当前插件中用到的css样式
myBtn.js中代码：

// 导出插件
export default {
    // 定义插件的方法
    install(app, option) {
        //  app 为Vue实例 实例中有 component directive mixin 等属性
        console.log(app, option)
            // 因为在这里我这个插件类似于组件所以用到了component属性
        app.component("myButton", {
            template: '<button :class="btn"><slot/></button>',
            props: {
                type: {
                    type: String,
                    default: 'default'
                }
            },
            computed: {
                btn() {
                    console.log(this.type)
                    return `btn ${this.type}`
                }
            }
        })
    }
}

css样式文件内容：

.btn {
    width: 100px;
    height: 40px;
    border-radius: 5px;
    cursor: pointer;
}

.default {
    background-color: #ffffff;
    color: #333333;
    border: 1px solid #ccc;
}

.warning {
    background-color: #f90;
    color: #ffffff;
    border: 1px solid #f90;
}

.primary {
    background-color: #39f;
    color: #ffffff;
    border: 1px solid #39f;
}

.success {
    background-color: #0c6;
    color: #ffffff;
    border: 1px solid #0c6;
}

3. 插件定义完了，接下来就是引入插件注册插件
来到main.js入口文件中

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入自定义插件
import myBtn from '@/plugin/myBtn.js'
// 引入插件样式
import '@/plugin/myBtn.css'
// 使用use注册自定义插件myBtn
createApp(App).use(store).use(router).use(myBtn).mount('#app')

注册之后，vue实例中就会将组件挂载到实例上
4. 使用自定义插件

  <my-button type='success'>success</my-button>
    <br>
    <br>
     <my-button>默认</my-button>
        <br>
    <br>
     <my-button type='warning'>warning</my-button>
        <br>
    <br>
     <my-button type='primary'>primary</my-button>

这个时候运行vue项目效果会出不来，
会有一个警告

为什么会出现这个问题呢，因为我用的是vue3.x版本，vue2.x版本vue组件提供了模板选项而vue3.x中并没有，它不支持运行时编译。所以需要配置运行时编译器的 Vue 构建版本
在vue.config.js配置一个属性runtimeCompiler: true
注意我这使用的是vue-cli 5.x最新版本

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    runtimeCompiler: true
})

添加之后重新运行

看到这里小伙伴们是不是对我们的vue又有了一个新的认识呢？