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

stormgens 发布于2019-08-20 16:19 / 1889人阅读

摘要：相信不少使用的开发者和公司都有定制一套属于自己的组件库的需求。针对这个问题，我搭建了一个专门用来构建的组件库的开发框架，以节省搭建环境的劳动力，专心于组件库的开发。首先我们尝试了使用的方案，就是把组件库直接作为项目的子模块使用。

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

一、介绍

项目地址：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

二、命令

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的资源目录。

三、注意事项

Vue-Donut默认使用less作为预处理器，如果需要用其他预处理器，可以自定义配置。

测试同理。

四、证书

MIT

一些碎碎念

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

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

希望这个作品能够发挥能效，也欢迎提出问题和建议和我交流~

云服务器 GPU云服务器专用于办公的即时通讯交流平台 vue组件开发大学生用于开发的云服务器 vue组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82864.html

angular，react & vue

摘要：由进行开发和维护，代发布于年月，现在主要是。状态是只读的，只能通过来改变，以避免竞争条件这也有助于调试。文件大小为，而为，为。请记住，性能基准只能作为考虑的附注，而不是作为判断标准。使用的人员报告说，他们永远不必阅读库的源代码。本文当时写在本地，发现换电脑很不是方便，在这里记录下。 angular，react & vue 2018/07/23 2016年，对于JavaScript来说...

jiekechoo 2019-08-23 18:02 评论0 收藏0
Riot.js——一个小而美的JS框架

摘要：专有的内容更少，而更多符合标准的成分。当前标签实例的方法被调用时当前标签的任何一个祖先的被调用时更新从父亲到儿子单向传播。相对来说，微型场景会更适合，不想要太多的外部依赖，又需要组件化数据驱动等更现代化框架的能力。 Riot.js是什么？ Riot 拥有创建现代客户端应用的所有必需的成分：响应式视图层用来创建用户界面用来在各独立模块之间进行通信的事件库用来管理URL和浏览器回...

nemo 2019-08-01 18:27 评论0 收藏0
Riot.js——一个小而美的JS框架

摘要：专有的内容更少，而更多符合标准的成分。当前标签实例的方法被调用时当前标签的任何一个祖先的被调用时更新从父亲到儿子单向传播。相对来说，微型场景会更适合，不想要太多的外部依赖，又需要组件化数据驱动等更现代化框架的能力。 Riot.js是什么？ Riot 拥有创建现代客户端应用的所有必需的成分：响应式视图层用来创建用户界面用来在各独立模块之间进行通信的事件库用来管理URL和浏览器回...

tolerious 2019-08-22 13:59 评论0 收藏0
构建Vue-cli通用项目目录

摘要：使用基于依赖追踪的观察并且使用异步队列更新。为项目配置文件。为项目静态资源目录。其实个人感觉通用项目目录可以很随意的搭配，比如说之后清空目录封装通用组件，像是啊，滑动常用组件。写在前面的个人体会，大神们可以跳过这段时间接手一个后台管理项目，从最开始写一点我自己的体会吧。首先Vue，Angular和React是当今主流前端三大框架。Vue是一个用来构建网页的JS库，相比较Angula...

Winer 2019-08-21 16:39 评论0 收藏0