首先,这不是一篇技术文章,是一个笼统的 guide,关于写一个组件的 guide,更是个广告,目的是让更多人用你的库
最开始想要自己写一个的时候,会想着去抄现有优秀库的项目结构之类的,通常在这上面就会花不少时间,我们现在来挖掘下
1.一个完整的组件项目需要什么?
必要的:
- 组件构建方式 ( webpack / rollup 之类 ),并提供至少一个主流的输出格式 (ESModule)
- Demo 及 Demo 源码
- 文档,可以是 docsify 之类的生成的页面,懒点就内嵌在 README 里了
其实上面的除了文档都比较容易做到,除了可能会在构建上踩坑外。那么做到了这些可以上线了吗?是的。不过看一些优秀的库其实还可以做更多的,例如下面的这些:
有就更好了:
- 一个清晰地
README.md
- 提供多种构建方式
es/cjs/umd
等多种格式的包 - 一个不丑的
Logo
- 组件
截图
(没 *8 说个图),有具体交互的最好还能是动图 -
package.json
不要有多余的 dependencies,尽量都在peerDependencies
和devDependencies
里 - 在 Readme 里几句话介绍清楚组件的功能
对的,以上几条说起来很容易,就像写公司内部系统时一样,想要什么什么交互的想法很美好,但是身体力行总力不从心
时间很宝贵的,能用就行了嘛,要做好谁不会,我忙...
好了,写这篇文章的目的来了
2.那么,有没有...
有没有这样一个模板可以直接拿来用,我只要关心怎么写组件就行了呢,那是当然啦!
vue-component-boilerplate 就是这样一个致力于让广大人民群众简单点,写组件项目更简单 的点的仓库,内含:
- 组件、文档、demo 全方位一体,开箱即用
- 优美的
Readme
,结构清晰实用!内联折叠格式的 API 文档 - Vue 组件支持多种打包方式,采用 Bili 构建,基于 rollup,输出
es/cjs/umd
三种格式 - Demo 采用 poi 打包
上个图
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
- 将
package.json
内的一些必要信息替换成你自己的 -
开始写组件吧!!
# 开发 npm run dev # 组件打包 npm run build # 打包 demo npm run build:demo
4.发布组件
你都开发完后,需要发布组件了,这里贴个简单的 npm 发布教程
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。