Element 一套优雅的 Vue 2 组件库是如何开发的

时间 2019-11-05

标签 element 一套优雅 vue 组件如何开发繁體版

原文原文链接

今年的 JSConf 大会上，受到 gridcontrol 做者现场开源项目的感染，咱们也在现场宣布开源这套基于 Vue 2 开发的组件库 —— Element。上场前五分钟才建的空仓库，到晚上咱们真正推代码上去已经收（pian）到了 100 多 star，并且仅仅三天时间就得到了 1k star。这个项目其实早在 Vue 2 进入 beta 时就开始开发了，一直到八月底才接近尾声。初期也遇到一些棘手的问题，很庆幸都找到了解决方案。在这里整理一些解决方案分享给你们。css

如何管理多个独立的组件项目 -- lerna

最初制定的目标是有一个主项目管理全部的组件弄成一个包，而后每个组件都是单独一个包。这样用户能够安装全部组件也能够只安装本身须要的组件。因而咱们最直接的作法就是一个组件建一个项目，到后面组件愈来愈多管理起来也越加复杂，每一次升级主仓库就要更新一堆依赖组件的版本号。并且开发起来也不方便。vue

后来看到 babel 的仓库的目录结构非常奇特。一个 packages 文件夹下有全部的 babel 官方插件，直到发现他们用了一个叫 lerna 的工具。可让你在主项目下管理多个子项目，从而解决了多个包互相依赖，且发布时须要手动维护多个包的问题。webpack

因此咱们重构了目录结构，全部插件单独一个项目放在 packages 目录下，可单独打包发布；同时最外面的 src 目录下的入口文件引入全部组件，打包发布的主项目就是包含了全部的组件。从而就解决了多个子项目管理的问题。git

element/
  package.json
  packages/
    component-a/
      package.json
    component-b/
      package.json

如何解决定制多套主题的问题

组件库通常都会自带一套主题，也可能会有多套主题可供选择，固然也要知足用户自定义的需求。因此 Vue 推荐的定义 scope 的样式就不可行了，同时也不能把样式写在组件里。那么如何写样式同时单独发布的组件如何引用样式文件也是咱们要解决的问题。github

为了方便用户覆盖样式，咱们采用 BEM 风格来写 CSS，这样的好处是类名基本都是一级，少数才会有嵌套状况，这样很容易的就能够直接覆盖掉原有样式。咱们使用了自家开发的 postcss-salad PostCSS 插件来写样式。集成了多个实用的 PostCSS 插件同时也支持 BEM 风格。web

而且样式文件目录也做为单独一个子项目发布，这样引入整个包能够包含样式文件，单独安装的组件能够经过安装主题包的方式引入样式文件。vue-router

这么作的好处是方便之后扩展其余主题，或者开发者能够本身定义一套其余 CSS 预处理的版本例如 Less 或 Scss。json

文档是如何工做的 -- vue-markdown-loader

当初写 Mint UI 时就遇到了要用 Vue 写文档的问题：如何才能在写 Markdown 时也能写 Vue 组件的 Demo。虽而后来并无在 Mint UI 的文档里写 Demo。最开始在 Element 的内部版本里，找遍了各类 Vue 的 Markdown 相关插件，要么是在 template 里定义 Markdown 格式，要么就是有一个 Markdown 的组件。都不能作到纯粹的写 Markdown 文件，而且还能写 Demo。数组

后来想到或许能够尝试把 Markdown 文件转成 Vue 组件。毕竟能够在 Markdown 里写 HTML，那么彻底能够做为 Vue 的模板。后来就有了 vue-markdown-loader，一个把 Markdown 转成 Vue 组件的 webpack loader，搭配 vue-router 就能搭建一个能够在 Markdown 里写 Vue 代码的文档网站。babel

如何同时打包多个组件 -- cooking

因为前面的设定，最终须要每一个组件都单独打包一份并发布。同时每个组件下面都会有一个对应的配置文件，传统的用 webpack 打包虽然支持传入数组，可是并不能传入多个文件。可是咱们有 cooking，一个基于 webpack 可是配置更简单同时使用上也更容易的工具。打包时只须要同时传入多个配置文件，利用 webpack 接受数组配置项的特性，就能同时进行打包。

有了这些工具，让 Element 的开发工做变得更容易且更高效。如今 Element 已经正式开源，而且咱们已经放出了文档，同时还放出了设计资源，欢迎各位 Vue 开发者来尝试，也欢迎来作贡献。