17

clipboard.png


首先,这不是一篇技术文章,是一个笼统的 guide,关于写一个组件的 guide,更是个广告,目的是让更多人用你的库

最开始想要自己写一个的时候,会想着去抄现有优秀库的项目结构之类的,通常在这上面就会花不少时间,我们现在来挖掘下

1.一个完整的组件项目需要什么?

必要的:

  • 组件构建方式 ( webpack / rollup 之类 ),并提供至少一个主流的输出格式 (ESModule)
  • Demo 及 Demo 源码
  • 文档,可以是 docsify 之类的生成的页面,懒点就内嵌在 README 里了

其实上面的除了文档都比较容易做到,除了可能会在构建上踩坑外。那么做到了这些可以上线了吗?是的。不过看一些优秀的库其实还可以做更多的,例如下面的这些:

有就更好了:

  • 一个清晰地 README.md
  • 提供多种构建方式 es/cjs/umd 等多种格式的包
  • 一个不丑的 Logo
  • 组件截图(没 *8 说个图),有具体交互的最好还能是动图
  • package.json 不要有多余的 dependencies,尽量都在 peerDependenciesdevDependencies
  • 在 Readme 里几句话介绍清楚组件的功能

对的,以上几条说起来很容易,就像写公司内部系统时一样,想要什么什么交互的想法很美好,但是身体力行总力不从心

时间很宝贵的,能用就行了嘛,要做好谁不会,我忙...

好了,写这篇文章的目的来了

2.那么,有没有...

有没有这样一个模板可以直接拿来用,我只要关心怎么写组件就行了呢,那是当然啦!

vue-component-boilerplate 就是这样一个致力于让广大人民群众简单点,写组件项目更简单 的点的仓库,内含:

  • 组件、文档、demo 全方位一体,开箱即用
  • 优美的 Readme ,结构清晰实用!内联折叠格式的 API 文档
  • Vue 组件支持多种打包方式,采用 Bili 构建,基于 rollup,输出 es/cjs/umd三种格式
  • Demo 采用 poi 打包

上个图

clipboard.png

3.使用方法

# 克隆项目
git clone https://github.com/waynecz/vue-component-boilerplate.git example-name

cd example-name

# 删除原来的 git 信息
rm -rf .git
# git 到你自己的仓库
git init && git remote add origin {your repo address}
# 安装依赖
yarn
  1. package.json 内的一些必要信息替换成你自己的
  2. 开始写组件吧!!

    # 开发
    npm run dev
    
    # 组件打包
    npm run build
    
    # 打包 demo
    npm run build:demo

4.发布组件

你都开发完后,需要发布组件了,这里贴个简单的 npm 发布教程


你看上去很美味得样子
492 声望22 粉丝

啊?