MSSUI的前世今生
# 前言
博主所在公司使用的技术栈是Vue
和ElementUI
。作为一个有(在)梦(摸)想(鱼)的前端儿,很早就想研究一下ElementUI
的实现原理。自己前前后后也看了不少解析的文章,基本都是浅尝辄止,没有去真正的实践,理解的就不是很深刻。于是博主就诞生了自己模仿ElementUI
搭建一个组件库的想法。
# 尝尝鲜
# CDN引入
MSSUI
依赖于Vue (opens new window),所以首先得引入Vue
:
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
1
接着引入MSSUI
的样式文件和js
文件。
<link rel="stylesheet" href="https://unpkg.com/mssui@0.1.13/lib/theme-chalk/index.css">
<script src="https://unpkg.com/mssui@0.1.13/lib/index.js"></script>
1
2
2
# npm引入
npm install mssui
1
然后在vue项目的入口文件main.js
中引入:
import Vue from 'vue'
import App from './App.vue'
import MssUI from 'mssui'
import 'mssui/lib/theme-chalk/index.css'
Vue.use(MssUI)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
这样引入会引入全部的组件,对于只使用某几个组件的用户来说,肯定是很不友好的,所以MSSUI
也提供了按需加载的能力。
首先,安装babel-plugin-component
npm install babel-plugin-component -D
1
然后配置babel.config.js
文件如下:
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
["@babel/preset-env"]
],
"plugins": [
[
"component",
{
"libraryName": "mssui",
"styleLibraryName": "theme-chalk",
}
]
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
比如你仅仅使用了Button
组件,你可以在main.js
中这样做:
import Vue from 'vue'
import App from './App.vue'
import { Button } from 'mssui'
Vue.use(Button)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
然后页面上这样使用:
<ml-button>默认按钮</ml-button>
<ml-button type="primary">主要按钮</ml-button>
<ml-button type="sucess">主要按钮</ml-button>
1
2
3
2
3
你可以点击codepen (opens new window)在线测试。或者去MSSUI组件库官网示例 (opens new window)查看更多组件效果。
# 本文主要介绍了什么?
如何从0到1搭建、开发、发布一个组件库项目。
# 项目搭建
- 如何组织组件库的项目工程目录。
- 如何使用脚本命令简化重复性的工作。如新增一个组件,只需要敲入
make new componentName
。
# 组件开发
- 如何使用sass和BEM规范进行样式隔离和命名规范。
- 如何将图标字体文件全局引入,提供类似
class="ml-search"
的用法 - 如何提供国际化能力
- 如何提供全局加载和按需加载能力
- 如何全局管理组件库弹窗组件的层级
- 如何实现ElementUI常用的组件,如Button、Message、Card、Alert等
# 组件库发布
- 如何配置webpack将开发好的组件库源码打包成commonjs2、UMD规范的包
- 组件库如何发布到CDN和npm,允许使用CDN和npm包的方式进行使用
- 如何使用vuepress搭建组件库的官方文档,支持在线预览效果和codepen编辑。
- 如何利用免费的静态资源托管网站,发布组件库文档公网访问
# 项目的完整目录
项目的完整目录如下图:
├── build
│ ├── bin
│ ├── webpack.common.js
│ ├── webpack.component.js
│ ├── webpack.demo.js
│ └── webpack.umd.js
├── lib
├── public
└── src
├── App.vue
├── assets
├── components.js
├── components.json
├── config
├── demo
├── docs
├── locale
├── main.js
├── mixins
├── packages
├── tests
├── theme
├── types
└── utils
├── Makefile
├── README.md
├── gulpfile.js
├── babel.config.js
├── package-lock.json
├── package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
解释下重要的目录:
- build 存放组件打包、自动化的脚本命令
- lib 存放打包输出的资源
- components.json 使用JSON存放所有的组件
- config 组件公共的配置
- demo 本地调试组件
- docs vuepress项目,用作生成组件的文档
- locale 组件的国际化
- mixins 组件中使用的混入
- packages 存放组件
- tests 单元测试
- theme 组件样式
- types 类型声明
- utils 工具函数
源码放放在了Github上,点击mssui (opens new window)获取。
注意
MSSUI仅用于学习,ElementUI作为业界非常成熟的UI库,已经基本能满足开发者大多数的需求。生产环境请使用ElementUI。
编辑 (opens new window)
上次更新: 2021/10/16, 11:22:25