创建一个插件(组件)
目录结构:在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>
效果: