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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-cli3携手rollup、github-actions打造自动部署的vue组件模板(使用篇)相关的知识,希望对你有一定的参考价值。

参考技术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)

以上是关于vue-cli3携手rollup、github-actions打造自动部署的vue组件模板(使用篇)的主要内容,如果未能解决你的问题,请参考以下文章

vite创建项目,cra创建项目,vue-cli创建项目

vite创建项目,cra创建项目,vue-cli创建项目

Part2-2-3 Rollup

尝试使用 rollup 和 vueJs 3 构建 vue 组件库

Rollup个人笔记

以太坊 Optimistic Rollup 原理概览