MSSUI的前世今生

# 前言

博主所在公司使用的技术栈是Vue和ElementUI。作为一个有(在)梦(摸)想(鱼)的前端儿，很早就想研究一下ElementUI的实现原理。自己前前后后也看了不少解析的文章，基本都是浅尝辄止，没有去真正的实践，理解的就不是很深刻。于是博主就诞生了自己模仿ElementUI搭建一个组件库的想法。

# 尝尝鲜

# CDN引入

MSSUI依赖于Vue (opens new window)，所以首先得引入Vue：

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

接着引入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

# npm引入

npm install mssui

然后在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

这样引入会引入全部的组件，对于只使用某几个组件的用户来说，肯定是很不友好的，所以MSSUI也提供了按需加载的能力。

首先，安装babel-plugin-component

npm install babel-plugin-component -D

然后配置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

比如你仅仅使用了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

然后页面上这样使用：

  <ml-button>默认按钮</ml-button>
  <ml-button type="primary">主要按钮</ml-button>
  <ml-button type="sucess">主要按钮</ml-button>

1
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

解释下重要的目录：

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。

编辑

#vue组件

上次更新: 2021/10/16, 11:22:25

← node基本使用以Button组件为引→