本文主要介绍 mint-ui 的目录结构、所有的技术栈以及组件库的搭建知识。
mint-ui 项目整体学习
项目目录
看图说话~
- .github 目录用于规范一些 github 行为，其中存的都是些 md 文件。
- build 目录用于构建组件库项目。其中使用了饿了么的 cooking 工具进行构建。
- example 目录中是演示项目，用来演示组件库的使用。许多在官方文档中没有写全的东西都可以在这个目录下看到。这个演示项目的线上地址请看这里
- lib 目录中是构建完成的打包 js 和 css 文件，这就是我们最终引用组件库的时候用到的文件。
- node_modules 请忽略……
- packages 目录下存放了组件库中的所有组件。在编译构建的时候入口文件会去 packages 目录下拿到所有组件。像这样
import Button from '../packages/button';。 - src 目录下是组件库的一些通用代码了，也是入口文件所在。
组件库如何应用到 Vue 项目中？
组件库的安装其实就是使用了 Vue 的插件定义和使用的方式。可以看下 mint-ui 定义的插件公开方法 install：
import Button from '../packages/button';
import Toast from '../packages/toast';
import Indicator from '../packages/indicator';
import MessageBox from '../packages/message-box';
import InfiniteScroll from '../packages/infinite-scroll';
import '../src/assets/font/iconfont.css'; // 字体样式
const version = '2.2.13';
const install = function(Vue, config = {}) {
// 避免重复安装
if (install.installed) return;
// 注册组件
Vue.component(Button.name, Button);
// 使用插件
Vue.use(InfiniteScroll);
// 添加实例方法
Vue.$messagebox = Vue.prototype.$messagebox = MessageBox;
Vue.$toast = Vue.prototype.$toast = Toast;
Vue.$indicator = Vue.prototype.$indicator = Indicator;
};
组件库的 install 方法一般就 3 种行为：
- 全局注册组件库
- 使用插件方法
- 添加全局实例方法
这也就是我们组件库中常用的功能了。
想看懂 mint-ui 源码需要知道什么技术栈？
- JS 语法使用了 vue.js 框架（这想必大家都知道）。
- 在 css 样式上使用的是 postcss-salad。它类似于 sass，常用的功能就是将一些类名进行包装了，如
@when plain其实就是.is-plain选择器。
我在看组件库的时候在找 postcss-salad 上花了点时间。
如何搭建类似 mint-ui 的组件库？
其实市面上完善的通用组件库已有不少，像 Vue 方面的有 ElementUI、 Vant、 MintUI 和 iView， Antd 好像也出了 Vue 版本。所以，个人感觉重复造轮子无意义，但是以学习的态度去将一些常用到的业务组件抽离出来做一个组件库也是极好的提高生产效率的方式。
说说我搭建的个人组件库的过程：
- 使用 vue-cli 搭建一个项目。
- 参考主流组件库的目录结构搭建项目。其中比较好的全局方法完全可以挪用。
- 写组件，写什么组件看自己需求。那些主流组件库的很多东西是很有借鉴和学习意义的。
- 写完组件库之后使用 vue-cli 项目的构建命令构建出打包文件。
- 最后配置 package.json 然后上传 npm（也可以不传 npm 直接 git 就可以导出项目），就这样大功告成。
mint-ui 的 src 目录下都有些什么，干啥用的？
- assets 目录下是资源文件，存放了字体文件和加载中的 svg 图片。
- mixins 目录下就一个 emitter.js 文件，作用是定义了父子组件间向上和向下的通信（之前 Vue 也有这个功能，后来取消了）。
- style 目录下是一些全局的样式，其中 var.css 定义了全局的皮肤。可以实现快速换肤的功能。注： mint-ui 中所有的 css 都是用了 salad 来预编译，所以样式文件看着都怪怪的，像 sass 又不是 sass。
- utils 目录中是一些通用的工具方法代码，这里面的工具很有参考价值，可以拿来使用。具体看看有啥：
- popup 目录中是悬浮框的业务逻辑。
- clickoutside.js 中定义了点击元素外触发的事件
- dom.js 中处理一些与 dom 相关的方法。主要处理 dom 事件、dom 元素上的 class 和 style 的处理。
- merge.js 方法用于将多个对象合并给目标对象并返回目标对象。
- index.js 方法是组件库的入口文件，主要功能上面提到过了。主要做了几步：导入组件库所有组件和插件；使用 Vue 的插件定义方法将组件库变为 Vue 插件；在插件中注册组件、使用插件并添加实例方法；最后导出插件方法以及所有的单个组件。
相对于 element-ui 的 utils 目录，mint-ui 的 utils 目录真的是非常少的。不过其中的方法还是值得借鉴和学习的。
最后
文章内容较少，只是先起个头~
这个整体分析没太多讲的，大致了解下，也是自己整理下思路。为接下来一系列的文章做热身。
Vue 实验室之前有分析过一些 Element 的简单组件库，之后的 mint-ui 组件学习只会对博主感兴趣的、比较有意思的组件进行分析和学习。如有需求也可以评论留言哦。
其实能拥有一个私人组件库还是一件非常酷的事情啦让我们一起撸一个个人组件库
网友评论