做前端开发的朋友多少都有使用过一些UI库的经验，下面是如何参照element-ui开发一款属于自己的ui库 MS-UI的方法

element-ui的源码阅读起来很方便，作者参照它实现了一套自己的UI库，感觉受益良多

• 使用vue-cli 创建你的项目工程

vue create ms-ui

• 使用vue封装一些组件，并且把样式文件和组件的源码分开目录存放

// 组件
packages/buton/main.vue
packages/buton/index.js
// style
packages/theme/button.css

• 国际化

原理是封装一个能提取翻译后内容的方法，通过mixin注入到实例中，在组件中使用该方法提取对应的翻译后内容

// lang/en.js
export default {
    ms: {
        colorpicker: {
            confirm: 'OK',
            clear: 'Clear'
        },

import defaultLang from './lang/zh-CN';
import Vue from 'vue';
import Format from './format';

const format = Format(Vue);
let lang = defaultLang;

export const t = function(path, options) {
    let value;

    const array = path.split('.');
    let current = lang;
    // console.log(current)
    // console.log(path, array)
    for (let i = 0, j = array.length; i < j; i++) {
        const property = array[i];
        value = current[property];
        if (i === j - 1) return format(value, options);
        if (!value) return '';
        current = value;
    }
    // console.log(value)
    return '';
};

export const use = function(l) {
    lang = l || lang;
}

export default { use, t };

//xxx.vue
<script>
import Locale from '../../mixins/locale'
import MsPopup from '../popup/main'
import MsButton from '../button/main'
import MsInput from '../input/main'
export default {
    name: 'MsMessageBox',
    mixins: [Locale],
    components: {MsPopup, MsInput, MsButton},
    data () {
        console.log(this.t('ms.messagebox.cancel'))
        return {
            visiblePopup: false,
            visible: false,
            showCancelBtn: false,
            cancelBtnText: this.t('ms.messagebox.cancel'),
...

• 组件化
  使用babel-plugin-component实现，使用方式github上有文档

plugins: [
    [
      "component",
      {
        libraryName: "@shawbs/ms-ui", // npm包的名字
        styleLibraryName: "theme", // 引入模块对应的样式文件，如 import { button } '@shawbs/ms-ui',它会把lib/theme下同模块名的文件引入
        style: true
      }
    ]
  ]

• 主题化
  配置样式变量，引入库的样式源文件

/* 改变主题色变量 */
$--color-primary: teal;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~@shawbs/ms-ui/lib/theme/font';
// 库的样式源文件
@import "~@shawbs/ms-ui/main/packages/theme/src/index";

• 打包部署
  使用gulp + webpack的方式

gulp负责copy,编译scss
webpack 负责编译模块文件

• 发布

注册npm帐号
shell登录npm
npm publish

• 写文档

使用docsify生成文档网站，
github中创建github page项目，
把docsify中的源码push到你生成的github page中