前言旨在让开发者在开发过程中享受组件开发的乐趣一个好看的demorollup类库打包工具代码感受一下eslint代码风格检查和自动格式化带来的乐趣。github-actions是一个一站式服务，可以自动将演示部署到gh-pages。（接下来，我们一起动手吧。。。）进入正题，假设项目经理有一个需求：开发一个名为chaste-component的组件。准备工作克隆项目gitclonehttps://github.com/blryli/vue-component-template.gitcdvue-component-templatenpminstallChangepackage.json{name:'chaste-component'}准备工作完成，componentrunsandPackaging默认使用package.json的名字打包npmrunbuild构建预发布文件压缩csses模块文件umd通用模块iife自动执行功能（压缩js）只需要关注开发src文件中的组件，开发完成npmpublish已经发布组件（有特殊要求配置的除外）运行npmrundev监听src文件变化，运行热更新demo并打开一个新的终端npmrundemo:dev运行在8080端口，打开http://localhost:8080主页开始页面的基本内容也是自动生成的。你只需要调整docs-src/views文件的组件示例。eslint样式检查和自动格式化支持eslint样式检查和自动格式化，ctrl+s保存时自动格式化。没用过格式化的说直接飞。eslint样式检查需要插件eslint、babel-eslint、eslint-plugin-vue和配置文件.eslintrc.js的支持。这些都已经完成了，请自行调整。如果您有自己的通用配置，将会更容易。直接替换.eslintrc.js文件。只需删除此文件即可。如果您想广泛使用这些设置，请将设置放在用户设置中。github-actions自动构建演示。2019年11月，github正式开放github-actions。我感动了！这里我们只介绍如何使用她来完成demo自动构建。想了解更多，可以看看阮一峰老师的这篇文章。GitHubActions入门教程添加密钥并提交项目。进入Settings/Developersettings创建一个key，勾选admin:repo_hook,repo，workflowgithub新建一个名为chaste-component的仓库，将项目提交到chaste-component仓库gitadd。gitcommit-m"firstcommit"gitremoteaddorigingit@github.com:blryli/chaste-component.gitgitpush-uoriginmaster将key存放在当前仓库的Settings/Secrets中，命名为ACCESS_TOKENgithubpages，设置源码到gh-pages分支，打开https://blryli.github.io/chas...，chaste后进入demo页面-每次提交组件工程都会自动更新配置的workflows/ci.yml演示如下name:GitHubActionsBuildandDeployDemoon:[push]jobs:build-and-deploy:runs-on:ubuntu-lateststeps:-name:Checkoutuses:actions/checkout@v1-name:BuildandDeploy使用：JamesIves/github-pages-deploy-action@releases/v2env:ACCESS_TOKEN:${{secrets.ACCESS_TOKEN}}BRANCH:gh-pagesFOLDER:docsBUILD_SCRIPT:npminstall&&npmrunbuild:es&&npmrundemo:build把打包构建交给githubactions，摒弃频繁的打包操作，专注享受组件开发（哭脸）npmrunbuild:esnpm运行demo:buildgitadd.gitcommit-m"updatedemo"gitpush下一篇博客将分享vue-cli3携手rollup和github-actions制作自动部署（build）的vue组件模板github地址（觉得有帮助，欢迎star）
