项目由 cli 3+创建
Element、bootstrapVue 它们都是非常优秀的 vue 插件，如果我们也想参与插件开发那要怎么做呢？
Vue.use( plugin ) 注册插件
//引自官方api
Vue.use( plugin )
参数：
{Object | Function} plugin
用法：
安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。
如果插件是一个函数，它会被作为 install 方法。
install 方法调用时，会将 Vue 作为参数传入。
该方法需要在调用 new Vue() 之前被调用。
当 install 方法被同一个插件多次调用，插件将只会被安装一次。
可以看到官方概念解释的是挺清楚了，下面看个实例，来真正掌握它。
看下项目的目录，这不是非得跟我一样。
项目目录
这是最终实现的效果图，带着事物最终的样子去写代码，会让你在前进的道路上，走得更远一些！
最终效果图，麻雀虽小，五脏俱全
下面是位于相关文件里的代码实现：
<!-- 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;
-webkit-appearance: none;
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>
// src/plugins/button/index.js(文件)
// 导入CreateButton对象
import CreateButton from './src/index'
// 给CreateButton对象添加install方法，参数为Vue
CreateButton.install = function(Vue) {
// 给Vue注册名为'CreateButton'的全局组件
Vue.component(CreateButton.name, CreateButton)
}
// 导出该对象
export default CreateButton
在 main.js 文件中注册我们的定义好的插件
// main.js
import Vue from 'vue'
import App from './App.vue'
import CreateButton from './plugins/button/index.js' //导入插件
// 使用VUe.use，传入CreateButton即完成注册，它的作用是调用CreateButton对象的install方法
Vue.use(CreateButton)
new Vue({
render: h => h(App)
}).$mount('#app')
然后我们可以在我们的项目中进行应用。
下面在App.vue文件中应用：
<!-- App.vue -->
<template>
<div id="app">
<Create-Button>创世按钮</Create-Button>
</div>
</template>
<script>
export default {}
</script>
<style>
#app {
text-align: center;
}
</style>
最终得到了位置网页中央的创世按钮。
总结
创世按钮插件完成了，让我们再来理下思路：
- 创建一个插件(组件)
- 给该插件添加一个install方法，install方法里编写相关的注册逻辑，比如：把该插件注册为全局组件，这样就可以在整个项目中使用了。
- 在实例化Vue前，使用Vue.use(插件) 注册你的插件。
One more thing
创世按钮插件是已经完成了，但怎么让它应用于npm呢？你需要把它发布到npm上，这样全世界的人都可以用你开发出来的插件了，如果你不会如何发布的话，请到文章下留言，我会视情况而定撰写相关教程。
网友评论