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

栏目: JavaScript · 发布时间: 5年前

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

写于 2017.05.04

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

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

一、介绍

项目地址: github.com/jrainlau/vu…

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].jsmanifest.[hash].js ,以及独立的 css 文件都会被打包到 docs 文件夹。
    • source map *.[hash].map 会被自动生成。
    • 可以方便地直接使用 docs 目录作为 github pages 的资源目录。

三、注意事项

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

测试同理。

四、证书

MIT

一些碎碎念

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

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

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

UNIX网络编程 卷1:套接字联网API(第3版)

UNIX网络编程 卷1:套接字联网API(第3版)

W.Richard Stevens、Bill Fenner、Andrew M. Rudoff / 杨继张 / 人民邮电出版社 / 2010-6 / 129.00元

这是一部传世之作!顶级网络编程专家Bill Fenner和Andrew M. Rudoff应邀执笔,对W. Richard Stevens的经典作品进行修订。书中吸纳了近几年网络技术的发展,增添了IPv6、SCTP协议和密钥管理套接字等内容,深入讨论了最新的关键标准、实现和技术。 书中的所有示例都是在UNIX系统上测试通过的真实的、可运行的代码,继承了Stevens一直强调的理念:“学习网络......一起来看看 《UNIX网络编程 卷1:套接字联网API(第3版)》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码