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/ 运行结果为