如果你也想写个完整的 Vue 组件项目

Posted 2020-12-02 梳碧湖的砍柴人

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

1. 将 package.json 内的一些必要信息替换成你自己的

2. 开始写组件吧！！

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

4.发布组件

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