前言
旨在让开发者在开发时拥有
- 享受组件开发
- 一个长得还不错的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
image.png
构建出了预发布文件
- 压缩的css
- es 模块文件
- umd 通用模块
- iife 自动执行的功能(压缩js)
只需关注src文件内的组件开发,开发完成就可以
npm publish
发布组件了(有特殊需求配置的除外)
运行
npm run dev
监听src文件变动,热更新
demo运行
新开一个终端
npm run demo:dev
image.png
运行在8080端口,打开 http://localhost:8080
Home 页面
image.png上手 页面
image.png页面基础内容也是自动生成的,只需要对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,感动!
image.png这里我们只介绍怎么用她完成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分支
image.png打开 https://blryli.github.io/chaste-component/,就进入了demo页面
image.png之后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地址 (觉得有帮助,欢迎star)
网友评论