一、插件开发
1、通过vue-cli快速搭建一个vue项目，在src目录下创建一个plugins文件夹
// 插件主体文件
//src/plugins/robot/index.vue
<template>
? <transition name=‘fade‘>
? ? <divclass="robot-body" draggable="true">
? ? ? robot
? ? </div>
? </transition>
</template>
<script>
? export default {
? ? name:‘Robot‘,
? ? components: {},
? ? data () {
? ? ? return {}
? ? },
? ? computed: {},
? ? watch: {},
? ? created () {},
? ? mounted () {},
? ? methods: {}
? }
</script>
<style>
</style>
2、挂载实例的dom
// ?src/plugins/robot/index.js
import Vue from ‘vue‘
import Robot from ‘./index.vue‘
const RobotConstructor = Vue.extend(Robot)
const robot = function(data = {}) {
? const robotInstance = new RobotConstructor({
? ? data
? }).$mount()
? document.body.appendChild(robotInstance.$el)
? return robotInstance
}
export default robot
3、暴露install方法给Vue.use()使用
1）this.$xxx 形式插件
import robot from ‘./robot/index.js‘
const install = function (Vue) {
? if (install.installed) return;
? install.installed = true
? Vue.prototype.$robot = robot;
}
export default {
? install
}
2）<el-xxx></el-xxx> 形式插件 ，次方式可以跳过第2步
import Robot from ‘./src/plugins/robot/index.vue‘;
Robot.install = function(Vue) {
? Vue.component(Robot.name, Robot);
};
export default Robot;
二、插件的使用
vue插件需要通过Vue.use() 方法注册到全局，并且需要在调用 new Vue() 启动应用之前完成。之后在其他 Vue 实例里面就可以通过 this.$xxx(或 <el-xxx></el-xxx>) 来调用插件中提供的 API 了。
例：
//src/main.js
import robot from ‘./plugins/index.js‘
Vue.use(robot)
//this.$xxx 形式插件
//src/views/home.vue
mounted () {
? this.$robot()
}
//<el-xxx></el-xxx> 形式插件
<template>
? <transition name=‘fade‘>
? ? <div>
? ? ? <el-xxx></el-xxx>
? ? </div>
? </transition>
</template>
三、插件发布
为了方便其他人也可以使用到这个插件，我们可以把它发布到 npm 上去。
1、打包
如果你是用 Vue-cli 生成的项目，那只需要在你的 npm 脚本中配置一下库的打包命令：
"build:lib": "vue-cli-service build --target lib --name robot --dest lib src/plugins/index.js"
2、测试
为了确保包的配置没有问题，我们可以利用 npm link 命令在本地测试一下包的使用情况。
3、发布
npm publish
四、安装测试
npm i -D @alex/robot
//在 main.js 中
import robot from ‘@alex/robot‘;
Vue.use(robot);
//在 App.vue 中
handleClick(){
? this.$robot();
}