vue 封装一个插件

一、建立一个vue组件button/button.vue

　　

<template>
    <div class="btn" :style="{'background':color,'color':fontColor}">
        {{text}}
    </div>
</template>


<script>
export default {
        name:"button",
 //配置项       props:{
            text:{
                type:String,
                default:"按钮"
            },
            color:{
                type:String,
                default:"#ccc"
            },
            fontColor:{
                type:String,
                default:"#fff"
            }   
        }
}
</script>

　　二、Vue.js 的插件有一个公开方法 install方法，第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象，咱们能够经过这个方法来定义插件button/index.js

　　

import ButtonCom from "./button.vue";

//建立button这个插件
ButtonCom.install = (Vue)=>{
    Vue.component(ButtonCom.name,ButtonCom)
}


export default ButtonCom;

　　三、全局引入插件            library/index.js

　　

import ButtonCom from "./button"; //UI组件
const components = [ ButtonCom ] //进行全局引入
const  plugin = (Vue)=>{ components.map((component)=>{ Vue.component(component.name,component) }) } //判断当前是否为浏览器环境，获取vue实例 if(typeof window !=="undefined" && window.Vue){ plugin(window.Vue); } export default { plugin }

　　四、使用插件

 　　import Vue from "vue";

　　import Vuez from "./library";

　　import App from "./App.value;
　　Vue.use(Vuez)

　　

<template>
    <buttton   :text="val"/>
</template>
<script> export default{ data(){ return{ val:"点击" } } } </script>