Vue component package (the package to a button assembly example)

1 / Create button in the components file a file, create a file in the file index.vue, written in index.vue file is a prototype (containing the component name, the application of the bottom of the HTML tags, what are displayed according to what conditions function), while the exported data file into an object.

 1 <template>
 2     <div :class="type == 'Default'?'btn default':type == 'primary'?'btn primary':type == 'danger'?'btn danger':'btn default'">
 3         <slot></slot>
 4     </div>
 5 </template>
 6 
 7 <script>
 8 export default {
 9     name:"alley-Button",
10     props:{
11         type:{
12             type:String,
13             default:"Default"
14         }
15     }
16 }
17 </script>
18 
19 
20 <style>
21     .btn{
22          width: 100px;
23          height: 40px;
24          color:#fff;
25          text-align: center;
26          line-height:40px;
27     }
28     .default{
29        
30         background: red;
31        
32     }
33 
34      .primary{
35       
36         background: yellow;
37     }
38 
39      .danger{
40      
41         background: #ccc;
42     }
43 </style>

2 / index.js to create a file in the file button on the name of the new building elements in the register file.

1 import Button from "./index.vue";
2 
3  Button.install = (Vue)=>{
4     Vue.component(Button.name,Button)
5 }
6 
7 export default Button;

3 / and establish a peer file button index.js file, register the component, but also install into the register, the export, only leads to global, but also a single lead, to facilitate local or global reference.

. 1 Import from the Button "./button"
 2  . 3 . 4   const Components = [
 . 5      the Button
 . 6 ]
 . 7 . 8 . 9 // VUE. When use, you must have the install method. Parameter is the vue. 10   const the install = (Vue) => {
 . 11 for ( var Key in Components) {
 12 is          Vue.component (Components [Key] .name, Components [Key])
 13 is      }
 14 }
 15 16 . 17   Export default       
            {
18      install,
19      Button
20  }

4 / To be referenced in the main.js

1  import Vue from 'vue'
2  import App from './App.vue'
3  import AlleyUI from "./components"
4  Vue.config.productionTip = false
5  Vue.use(AlleyUI);
6  ​
7  new Vue({
8    render: h => h(App),
9  }).$mount('#app')

5 / here, the package assembly is completed, can be used in the App.vue.

 1 <template>
 2    <div id="app">
 3      <alley-Button>按钮</alley-Button>
 4      <alley-Button type="primary">按钮</alley-Button>
 5      <alley-Button>按钮</alley-Button>
 6      <alley-Button>按钮</alley-Button>
 7    </div>
 8  </template>
 9  ​
10  <script>
11  ​
12  export default {
13    name: 'app',
14   
15  }
16  </script>
17  ​
18  <style>
19  ​
20  </style>

6 / run results