vue-插件开发

vue插件开发是使用过程中不可缺少的一项，可以提高开发效率，减少重复开发，下面就是插件开发的几个步骤：

首先在src下新建plugin文件夹，下面新建toast.vue和toast.js文件

testToast.vue文件代码
<template>
  <div>
    <p class="rtoast" v-if="show">{{msg}}</p>
  </div>
</template>

<script>
export default {
  name: "test-toast",
  data() {
    return {
      msg: "hello,world",
      show: false
    };
  },
  methods: {
    toastShow() {
      this.show = true;
    }
  }
};
</script>
<style>
.rtoast {
  width: 200px;
  height: 100px;
  text-align: center;
}
</style>

　　

testToast.js文件代码
import testToast from './testToast.vue'
let test = {}
test.install = function (Vue) {
    Vue.prototype.$message = 'Hello I am test.js'
    Vue.prototype.$Method = function (arr) {
        return '成功调用'
    }
    Vue.component(testToast.name, testToast) // testPanel.name 组件的name属性
}
export default test

mian.js引入，装载
import test from './plugin/testToast.js'
Vue.use(test)

然后在其他组件中引入使用

只需要在模板中插入：

 <test-toast ></test-toast>