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）