在今年的JSConf大会上，我们被gridcontrol作者的开源项目所感染，同时也宣布了这个基于Vue2的组件库的开源——元素。开场前五分钟才建好的空仓，我们居然晚上推代码就已经收到了100多颗star，短短三天就拿到了1kstar。这个项目其实早在Vue2进入beta的时候就开始开发了，一直到8月底才结束。前期也遇到了一些棘手的问题，很高兴找到了解决方案。这里有一些解决办法与大家分享。如何管理多个独立的组件项目——lerna最初的目标是有一个主项目将所有组件管理成一个包，然后每个组件都是一个单独的包。这样，用户可以安装所有组件或只安装他们需要的组件。所以我们最直接的做法就是一个组件建一个项目，后面添加的组件越来越多，管理也会越来越复杂。主仓库每次升级，都要更新一堆依赖组件的版本号。而且不方便开发。后来看到babel的仓库目录结构很奇怪。一个packages文件夹下全是官方的babel插件，直到发现用了一个叫lerna的工具。允许您在主项目下管理多个子项目，从而解决多个包相互依赖，发布时需要手动维护多个包的问题。所以我们重构了目录结构。所有插件都放在packages目录下的一个项目中，可以单独打包发布；同时最外层src目录下的入口文件导入所有组件，打包发布的主工程包含所有组件。从而解决了多子项目管理的问题。element/package.jsonpackages/component-a/package.jsoncomponent-b/package.json如何解决自定义多套主题的问题组件库一般都有自己的一套主题，而且可能有多套主题可以选择from，当然是为了满足用户自定义的需求。所以Vue推荐的定义作用域的样式是行不通的，同时组件中也不能写样式。那么单独发布的组件如何编写样式，如何引用样式文件也是我们要解决的问题。为了方便用户覆盖样式，我们使用BEM样式来编写CSS。这样做的好处是类名基本都是一级的，只有少数会有嵌套，这样很容易直接覆盖原来的样式。我们使用自己开发的postcss-saladPostCSS插件来编写样式。集成了多个有用的PostCSS插件，还支持BEM样式。并且样式文件目录也作为单独的子项目发布，这样整个包就可以包含样式文件，单独安装的组件可以通过安装主题包导入样式文件。这样做的好处是方便以后扩展其他主题，或者开发者可以自己定义一套其他的CSS预处理版本比如Less或者Scss。docs是如何工作的--vue-markdown-loader刚开始写MintUI的时候遇到了用Vue写文档的问题：如何一边写Markdown一边写Vue组件的demo。虽然后来MintUI文档中并没有写Demo。一开始，在Element的内部版本中，我搜索了各种VueMarkdown相关的插件，要么在模板中定义Markdown格式，要么自带Markdown组件。既不能写纯Markdown文件，也可以写Demo。然后我想也许我可以尝试将Markdown文件转换为Vue组件。毕竟，你可以用Markdown写HTML，所以它可以作为Vue的模板。后来出现了vue-markdown-loader，一个将Markdown转为Vue组件的webpack加载器。使用vue-router，你可以搭建一个文档网站，可以在Markdown中编写Vue代码。如何同时打包多个组件--cooking由于之前的设置，需要每个组件单独打包发布。同时，每个组件下都会有对应的配置文件。传统的webpack打包虽然支持传入数组，但是不能传入多个文件。但是我们有cooking，一个基于webpack但是配置更简单，使用更方便的工具。打包的时候只需要同时传入多个配置文件，利用webpack接受数组配置项的特性同时打包即可。有了这些工具，Element的开发变得更加简单和高效。现在Element已经正式开源，我们也发布了文档和设计资源。我们欢迎所有Vue开发人员尝试和贡献。相关项目链接：https://github.com/ElemeFE/elementhttps://github.com/lerna/lernahttps://github.com/ElemeFE/postcss-saladhttps://github.com/ElemeFE/mint-uihttps://github.com/QingWei-Li/vue-markdown-loaderhttps://github.com/ElemeFE/cooking
