Vue-Donut——专用于构建Vue的UI组件库的开发框架

相信很多使用Vue的开发者和公司都有定制一套属于本身的UI组件库的需求。可是要开发、测试、打包、发布这个组件库，却须要耗费较大的劳动力去搭建一整套的环境。针对这个问题，我搭建了一个专门用来构建Vue的UI组件库的开发框架，以节省搭建环境的劳动力，专心于组件库的开发。

1、介绍

项目地址：https://github.com/jrainlau/v...

Vue-Donut是一个开发框架，配合vue-cli使用。因此首先保证全局安装有vue-cli。接下来就能够初始化咱们的项目了：

vue init jrainlau/vue-donut <项目名>

相似官方的vuejs-templates/webpack模板，Vue-Donut也容许用户进行一些配置。在配置完成后则会生成你的组件库目录。值得注意的是，这个组件库最终发布的名字也是你所自定义的项目名（固然这些都是能够修改的）。

接下来按照提示，进入项目目录后，经过yarn命令下载所需依赖包便可开始使用。

目录结构以下：

.
├── index.html
├── package.json
├── src
│   ├── app.vue
│   ├── assets
│   │   └── donut.jpg
│   ├── components
│   │   ├── content.vue
│   │   ├── header.vue
│   │   ├── index.js
│   │   ├── link.vue
│   │   └── title.vue
│   └── main.js
└── webapck
    ├── build.js
    ├── dev.js
    ├── doc.js
    ├── webpack.base.config.js
    ├── webpack.build.config.js
    ├── webpack.dev.config.js
    └── webpack.doc.config.js

2、命令

• yarn run dev：开发模式

  • 经过webpack-dev-server开启一个测试服务器，就和官方的vuejs-templates/webpack模板里面的同样。

• yarn run build：打包及发布模式

  • 这个命令会以src/components/index.js为入口文件，经过webpack构建后产出到dist目录。

  • dist/index.js就是你接下来将会发布到npm上面的包。

  • 你应该熟练掌握如何编写vue的插件

  • src/components/index.js入口文件应该长成下面这个样子：

    import myComponent from './my-component.vue'
    
    const install = (Vue) => {
      Vue.component('my-componen', myComponent)
    }
    
    export default install

• yarn run build：文档模式

  • 经过运行yarn run dev，你所开发的就像是一个普通的单页应用，这也相似于组件库的官方文档页面。当开发完成后，你能够经过这条命令打包你的应用。app.[hash].js, vendor.[hash].js和manifest.[hash].js，以及独立的css文件都会被打包到docs文件夹。

  • source map *.[hash].map会被自动生成。

  • 能够方便地直接使用docs目录做为github pages的资源目录。

3、注意事项

Vue-Donut默认使用less做为预处理器，若是须要用其余预处理器，能够自定义配置。

测试同理。

4、证书

MIT

一些碎碎念

在工做的过程当中，遇到了搭建UI组件库的需求。开发不难，麻烦的是如何在项目中引入使用。首先咱们尝试了使用git的submodule方案，就是把UI组件库直接做为项目的子模块使用。另一种方式，是把整个组件库发布到npm，而后在webpack.module.rules的exclude里面经过正则或者函数的方式，使用项目的webpack配置去跑组件库的代码。这两种方式都不那么优雅，思考再三，最后决定搭个更加方便优雅的开发框架来。

在此以前，对于webpack的使用及配置仅处于“看得懂”的程度，但从未真正从头开始搭过。在搭建的过程当中也遇到了很多坑，但经过查阅官方文档大都能得到解决办法，实在不行还有万能的google和stackoverflow。搭的过程当中也参考了不少优秀的实践，好比公司前辈的搭建方式，以及vue-cli官方出品的搭建方式等，搭完后对webpack的掌握也获得了极大的提高。

但愿这个做品可以发挥能效，也欢迎提出问题和建议和我交流~