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>