Vue組件封裝（以封裝一個button組件為例）

1/在components文件內創建一個button文件，文件內創建一個index.vue文件，在index.vue文件內寫的是原型（包含組件的名字，應用的最底層的HTML標簽，分別根據什么條件顯示什么功能）,同時該文件導出的數據為一個對象。

<template>
    <div :class="type == 'Default'?'btn default':type == 'primary'?'btn primary':type == 'danger'?'btn danger':'btn default'">
        <slot></slot>
    </div>
</template>

<script>
export default {
    name:"alley-Button",
    props:{
        type:{
            type:String,
            default:"Default"
        }
    }
}
</script>


<style>
    .btn{
         width: 100px;
         height: 40px;
         color:#fff;
         text-align: center;
         line-height:40px;
    }
    .default{
       
        background: red;
       
    }

     .primary{
      
        background: yellow;
    }

     .danger{
     
        background: #ccc;
    }
</style>

2/在button文件下建立一個index.js文件，文件內對新構建組件的名字進行注冊。

import Button from "./index.vue";

 Button.install = (Vue)=>{
    Vue.component(Button.name,Button)
}

export default Button;

3/ 與button文件同級建立一個index.js文件，對組件進行注冊，同時也注冊進install中，在導出時，不僅要引出全局的，而且單個的也要引出，便於局部或全局引用。

import Button from "./button"
 ​
 ​
 const components = [
     Button
 ]
 ​
 ​
 //vue。use使用時，必須要有install方法。參數就是vue。
 const install  = (Vue)=>{
     for(var key in components){
         Vue.component(components[key].name,components[key])
     }
 }
 ​
 ​
 export default {
     install,
     Button
 }

4/要在main.js中進行引用

 import Vue from 'vue'
 import App from './App.vue'
 import AlleyUI from "./components"
 Vue.config.productionTip = false
 Vue.use(AlleyUI);
 ​
 new Vue({
   render: h => h(App),
 }).$mount('#app')

5/到這里，組件便是封裝完成了，在App.vue中可以進行使用了。

<template>
   <div id="app">
     <alley-Button>按鈕</alley-Button>
     <alley-Button type="primary">按鈕</alley-Button>
     <alley-Button>按鈕</alley-Button>
     <alley-Button>按鈕</alley-Button>
   </div>
 </template>
 ​
 <script>
 ​
 export default {
   name: 'app',
  
 }
 </script>
 ​
 <style>
 ​
 </style>

6/ 運行結果為