使用Vue简单的写组件的UI库

　　初始化项目vue create nature-ui

　　在根目录下面创建一个文件目录放置组件（我这里的创建packages）

　　　　packages 目录下面创建个个组件的名称并创建index.js（用于输出所有的组件）

　　　　 　　　　

　　　　

import Buttonn from './button/index.vue'
import Icon from './icon'

// 所有组件列表
const components = [
    Buttonn,
    Icon
]
const install = function(Vue) {
    // 遍历并注册所有组件
    components.map(component => {
      Vue.component(component.name, component);
    })
}
// 检测是否为vue环境
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
export default {
    install
}

在vue的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组件中的button组件

<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>

 

然后在组件中使用就可以了，（什么打包发布，自己查看去喽）

自己丰富吧