vue-cli3携手rollup、github-actions打造自动部署的vue组件模板（使用篇）

Posted 2023-03-20

参考技术A

旨在让开发者在开发时拥有

的一条龙服务。(接下来，我们携手...)

假设 项目经理提了个 需求 ：要开发一个组件，名叫 chaste-component。

准备工作

准备工作完毕

打包

默认使用package.json的name打包

构建出了预发布文件

只需关注src文件内的组件开发，开发完成就可以

发布组件了（有特殊需求配置的除外）

运行

监听src文件变动，热更新

新开一个终端

运行在8080端口， 打开 http://localhost:8080

Home 页面

上手 页面

页面基础内容也是自动生成的，只需要对docs-src/views文件的组件示例做调整

支持eslint风格检查及自动格式化，在 ctrl+s 保存的时候自动格式化，没用过格式化的都说直接 飞起来了

eslint风格检查

需要插件 eslint、babel-eslint、eslint-plugin-vue 及配置文件 .eslintrc.js 的支持，这些都已经做好了

自动格式化

需要编辑器设置的支持，这里在 .vscode/settings.json 文件配置好了

2019年11月github正式开放了github-actions，感动！

这里我们只介绍怎么用她完成demo自动构建，想要更多了解的可以看看阮一峰老师的这篇文章 GitHub Actions 入门教程

添加密钥并提交项目

然后提交项目到chaste-component仓库

github pages

设置source为gh-pages分支

打开 https://blryli.github.io/chaste-component/ ，就进入了demo页面

之后 chaste-component 项目的每次提交都回自动更新demo

已配置的 workflows/ci.yml 如下

下一篇博客将分享 vue-cli3携手rollup、github-actions打造自动部署的vue组件模板（搭建篇）

github地址 （觉得有帮助，欢迎star）