Vue using simple UI component library to write

　　Initialize the projectvue create nature-ui

　　Create a file directory to place components (I am here to create packages) in the root directory of the following

　　　　all components of packages create a name directory and create index.js (output for all components)

　　　　 　　　　

　　　　

Buttonn from Import './button/index.vue' 
Import from Icon  './icon' //  all components listing 
const = Components [ 
    Buttonn, 
    Icon 
] 
const the install = function (Vue) {
     // iterate components and register all 
    components. Map (Component => { 
      Vue.component (component.name, Component); 
    }) 
} // detect whether the environment vue iF ( typeof ! window == 'undefined' && window.Vue) { 
    the install (window.Vue) 
} 
Export default { 
    the install 
}

Vue introduced and used in the inside of main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import install from '../packages'

Vue.use(install)


Vue.config.productionTip = false


new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

UI components button assembly

<template>
    <button 
        :type="nativeType" 
        :class="[
            {nativeType}
        ]"
    >
        <span>主要按钮</span>
    </button>
</template>    
<script>
    export default ({
        name: 'Buttonn',
        props: {
            type: {
                type: String,
                default: "default"
            },
        }
    })
</script>
<style >
    .primary {
        padding: 12px 20px;
        border-radius: 4px;
        background: #fff;
        border: 1px solid #dcdfe6;
    }
</style>

 

Then use the component can be, and (what is packaged and released their own view to myself)

Own it rich