做前端开发的朋友多少都有使用过一些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中
