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组件模板(使用篇)的主要内容,如果未能解决你的问题,请参考以下文章