vue-cli3携手rollup、github-actions打造自动部署的vue组件模板(使用篇)
2020/1/8 14:09:26
本文主要是介绍vue-cli3携手rollup、github-actions打造自动部署的vue组件模板(使用篇),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前言
旨在让开发者在开发时拥有
- 享受组件开发
- 一个长得还不错的demo
- rollup类库打包工具对代码的抚摸
- eslint代码风格检查、自动格式化带来的快感
- github-actions把demo自动部署到gh-pages身上
的一条龙服务。(接下来,我们携手...)
进入正题
假设项目经理提了个需求:要开发一个组件,名叫 chaste-component。
准备工作
- 克隆项目
git clone https://github.com/blryli/vue-component-template.git cd vue-component-template npm install
- 更改package.json
{ name: 'chaste-component' }
准备工作完毕
组件运行及打包
打包
默认使用package.json的name打包
npm run build
构建出了预发布文件
- 压缩的css
- es 模块文件
- umd 通用模块
- iife 自动执行的功能(压缩js)
只需关注src文件内的组件开发,开发完成就可以
npm publish
发布组件了(有特殊需求配置的除外)
运行
npm run dev
监听src文件变动,热更新
demo运行
新开一个终端
npm run demo:dev
运行在8080端口,打开 http://localhost:8080
Home 页面
上手 页面
页面基础内容也是自动生成的,只需要对docs-src/views文件的组件示例做调整
eslint风格检查及自动格式化
支持eslint风格检查及自动格式化,在ctrl+s保存的时候自动格式化,没用过格式化的都说直接飞起来了
eslint风格检查
需要插件eslint、babel-eslint、eslint-plugin-vue及配置文件.eslintrc.js的支持,这些都已经做好了
- 如果不符自己的编码风格,请自行调整
- 有自己常用配置的话就更简单了,直接替换.eslintrc.js文件内容
自动格式化
需要编辑器设置的支持,这里在.vscode/settings.json文件配置好了
- 如果有自己的用户设置直接把这个文件删除就可以了
- 如果要广泛使用这些设置,就把设置放到用户设置里面
github-actions自动构建demo
2019年11月github正式开放了github-actions,感动!
这里我们只介绍怎么用她完成demo自动构建,想要更多了解的可以看看阮一峰老师的这篇文章GitHub Actions 入门教程
添加密钥并提交项目
- 进入
Settings/Developer settings
创建密钥,勾上 admin:repo_hook,repo,workflow
- github新建一个仓库,名叫 chaste-component
然后提交项目到chaste-component仓库
git add . git commit -m "first commit" git remote add origin git@github.com:blryli/chaste-component.git git push -u origin master
- 将密钥储存到当前仓库的
Settings/Secrets
里面,命名 ACCESS_TOKEN
github pages
设置source为gh-pages分支
打开 https://blryli.github.io/chas...,就进入了demo页面
之后chaste-component
项目的每次提交都回自动更新demo,已配置的 workflows/ci.yml 如下
name: GitHub Actions Build and Deploy Demo on: [push] jobs: build-and-deploy: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v1 - name: Build and Deploy uses: JamesIves/github-pages-deploy-action@releases/v2 env: ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} BRANCH: gh-pages FOLDER: docs BUILD_SCRIPT: npm install && npm run build:es && npm run demo:build
- 把打包和构建交给github actions,丢掉频繁的打包操作
- 专注享受组件开发
不想用github actions或想麻烦点的话也可以手动提交代码(哭脸)
npm run build:es npm run demo:build git add . git commit -m "update demo" git push
下一篇博客将分享 vue-cli3携手rollup、github-actions打造自动部署的vue组件模板(搭建篇)
github地址 vue-component-template (觉得有帮助,欢迎star)
这篇关于vue-cli3携手rollup、github-actions打造自动部署的vue组件模板(使用篇)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30毕设私活神器
- 2024-05-30html
- 2024-05-09一定要避坑:关于微信H5分享,温馨提示你不要再踩坑了!!!
- 2024-05-09本地项目放到公网访问!炒鸡煎蛋!
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)