如何开发 Vue 插件？
创建一个插件(组件)
目录结构：在src目录下创建一个plugins目录，写我们的button组件
// src/plugins/button/src/index.vue <template> <button class="create-btn primary"> <span> <slot></slot> </span> </button> </template> <script> export default { name: 'CreateButton' } </script> <style scoped> .create-btn { display: inline-block; line-height: 1; cursor: pointer; background: #fff; border: 1px solid #dcdfe6; color: #606266; text-align: center; box-sizing: border-box; outline: none; margin: 0; transition: 0.1s; font-weight: 500; padding: 12px 20px; font-size: 14px; border-radius: 4px; } .primary { color: #fff; background-color: #409eff; border-color: #409eff; } </style>
2、给该插件添加一个install方法
install方法里编写相关的注册逻辑，比如：把该插件注册为全局组件，这样就可以在整个项目中使用了。
// src/plugins/button/index.js import CreateButton from './src/index' // 给CreateButton对象添加intall方法 CreateButton.install = function(Vue) { // 给Vue注册名为'CreateButton'全局组件 Vue.component(CreateButton.name, CreateButton) } // 导出该对象 export default CreateButton
3、在实例化Vue前，使用Vue.use(插件) 注册你的插件。
使用Vue.use,传入CreateButton即完成注册， 它的作用是调用传入CreateButton对象的install方法
// main.js import Vue from 'vue' import App from './App.vue' import router from './router' import CreateButton from './plugins/button/index.js' // 导入插件 // 使用Vue.use,传入CreateButton即完成注册 // 它的作用是调用传入CreateButton对象的install方法 Vue.use(CreateButton) Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app')
4、测试使用
// App.vue <template> <div id="app"> <Create-Button>按钮</Create-Button> </div> </template>
效果：
