1, 自定义插件

1.1, 自定义插件

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

• 添加全局方法或者 property。如：vue-custom-element
• 添加全局资源：指令/过滤器/过渡等。如 vue-touch
• 通过全局混入来添加一些组件选项。如 vue-router
• 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
• 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

// plugins/myplugins.js

// 开发自定义插件，目的是给项目提供一些全局的功能 
import moment from "moment"
// plugins对象，叫插件对象
let plugins = {
    // vue规定，一个插件对象身上，必须要有install方法
    // 当Vue.use时，内部会自动执行indtall方法
    install(Vue, options) {
        // 第一个参数是Vue构造函数  
        // 第二个参数是Vue.use时，传递的第二个参数
        // console.log(Vue);
        // console.log(options);

        // 把自定义指令封装到一个插件中
        Vue.directive("upper", (element, options) => {
            element.innerHTML = options.value.toUpperCase();
        })

        // 把过滤器封装到插件中
        Vue.filter("timeFormat", (val) => {
            return moment(val).format("MM-DD")
        })

        // 还可以在Vue的原型对象上，添加公共的方法
        Vue.prototype.$wc = function () {
            alert("这是一只小狗，叫wc")
        }

        // 注册全局组件
        Vue.component("Count", {
            data() {
                return {
                    count: 0
                }
            },
            methods: {
                add() { this.count++ },
                minus() { this.count-- }
            },
            // render函数后面说
            render: function (createElement) {
                return createElement(
                  'h1',   
                  {},
                  "我是Count组件"
                )
              },
        })

        // 后面会讲两个非常重要的插件，vue-router   vuex
    }
}

// 对外暴露插件  为了让别的模块去使用插件
export default plugins;

// MMyComponent1.vue
<template>
  <div>
      <h1 v-upper="msg"></h1>
      <Count></Count>
  </div>
</template>

<script>
export default {
  name: "MyComponent1",
  props:[],
  data() {
    return {
        msg:"hello vue"
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
</style>

// MMyComponent2.vue
<template>
  <div>
    <h1>{{ time | timeFormat }}</h1>
    <Count></Count>
  </div>
</template>

<script>
export default {
  name: "MyComponent2",
  props:[],
  data() {
    return {
      time:Date.now()
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
</style>

// MMyComponent3.vue
<template>
  <div>
    <button @click="fn">点我</button>
    <Count></Count>
  </div>
</template>

<script>
export default {
  name: "MyComponent3",
  props: [],
  data() {
    return {};
  },
  methods: {
    fn() {
      // this  表示VC
      this.$wc();
    },
  },
};
</script>

<style lang="less" scoped>
</style>

// App.vue
<template>
  <div id="app">
    App
    <hr>
    <MyComponent1></MyComponent1>
    <hr>
    <MyComponent2></MyComponent2>
    <hr>
    <MyComponent3></MyComponent3>
  </div>
</template>

<script>
import MyComponent1 from "./components/MyComponent1.vue"
import MyComponent2 from "./components/MyComponent2.vue"
import MyComponent3 from "./components/MyComponent3.vue"
export default {
  name: 'App',
  data(){
    return{
      msg3:"abc"
    }
  },
  components: {
    MyComponent1,MyComponent2,MyComponent3
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

// main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 使用插件
import myplugins from "./plugins/myplugins"
Vue.use(myplugins,{name:"upper"})

new Vue({
  render: h => h(App),
}).$mount('#app')