如果你也想写个 Vue 组件却又苦于没有好的项目模板

callmewhy 发布于2019-08-22 18:30 / 1421人阅读

首先，这不是一篇技术文章，是一个笼统的 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 发布教程

GPU云服务器云服务器 vue组件如果没有 vue组件开发 vue父子组件通讯

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

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

新手自学前端的一些建议与总结

摘要：作为文科专业毕业，无名校背景，无任何关系，没有接受过任何专业培训，完全靠自学和看书看视频做了五年前端，在外包公司，创业公司，级公司再到新型互联网公司都呆过，想结合自己的经历谈谈对于自学前端的一些看法学习大纲关于技术栈学习，网上总会有各种讨论作为文科专业毕业，无名校背景，无任何关系，没有接受过任何专业培训，完全靠自学和看书看视频做了五年前端，在外包公司，创业公司，BAT级公司再到新型互...

xfee 2019-08-21 11:27 评论0 收藏0
实例PK(Vue服务端渲染 VS Vue浏览器端渲染)

摘要：说起，其实早在出现之前，网页就是在服务端渲染的。二服务器渲染如此快有部分原因来自，但是排除这部分，还是比浏览器端要快至少几倍。当然，我们可以考虑首屏采用服务端渲染的方式，因为完全服务端渲染会考虑到很多问题，比如复杂均衡等等等 Vue 2.0 开始支持服务端渲染的功能，所以本文章也是基于vue 2.0以上版本。网上对于服务端渲染的资料还是比较少，最经典的莫过于Vue作者尤雨溪大神的 vu...

GeekGhc 2019-08-20 15:19 评论0 收藏0
Vue.js实现用户登录退出和e2e测试

摘要：前言本来只是想写个实现登录退出的例子的，但是又觉得这样干货太少。哈哈，不小心被吓到了吧，其实这些都是有办法可以解决的，下次有机会，我们可以再讨论一下使用的正确姿势。前言本来只是想写个Vuet实现登录退出的例子的，但是又觉得这样干货太少。一个好的开源项目，少不了单元测试和e2e测试，为了保证Vuet教程的丰富性和程序的稳定性，所以我选择了写的例子即能当教程使用，也可以用于测试，丰富的...

MycLambert 2019-08-21 11:45 评论0 收藏0
[ 学习路线 ] 2015 前端(JS)工程师必知必会 (2)

摘要：转自前端外刊评论非常感谢，翻译的很好，受益很多，转到此处让前端小伙伴们也惊呆下上次我写前端工程师必知必会已经是三年前了，那是我写过最火的文章了。测试的第二大障碍是工具。转自：前端外刊评论非常感谢，翻译的很好，受益很多，转到此处让前端小伙伴们也惊呆下........ 上次我写《前端工程师必知必会》已经是三年前了，那是我写过最火的文章了。三年了，我仍然会在Twitter上...

stefan 2019-08-28 18:10 评论0 收藏0
[ 学习路线 ] 2015 前端(JS)工程师必知必会 (2)

摘要：转自前端外刊评论非常感谢，翻译的很好，受益很多，转到此处让前端小伙伴们也惊呆下上次我写前端工程师必知必会已经是三年前了，那是我写过最火的文章了。测试的第二大障碍是工具。转自：前端外刊评论非常感谢，翻译的很好，受益很多，转到此处让前端小伙伴们也惊呆下........ 上次我写《前端工程师必知必会》已经是三年前了，那是我写过最火的文章了。三年了，我仍然会在Twitter上...

liaorio 2019-08-21 10:30 评论0 收藏0