1.1. 基于vue-cli3

steam-game-ui基于vue-cli3搭建的脚手架来开发。我们需要把组件库通过lib模式打包

npm run build:file && vue-cli-service build --target lib --name steam-game-ui --dest lib packages/index.js

还需要在vue.config.js里面merge别名配置和babel转义

config.resolve.alias
    .set('@', path.resolve('examples'))
    .set('src', path.resolve('src'))
    .set('packages', path.resolve('packages'))
    .set('examples', path.resolve('examples'));

config.module
    .rule('js')
    .include.add(/packages/)
    .end()
    .include.add(/examples/)
    .end()
    .use('babel')
    .loader('babel-loader')
    .tap(options => {
    return options;
    })
    .end();

1.2. 开发流程

• 开发新组件命令 npm run new 组件名 [组件中文名]

npm run new button 按钮
npm run serve

• 发布步骤👇

npm run test
npm version patch
npm run lib
git add .
git commit --amend
npm publish

1.3. 代码规范

• .editorconfig配置👇

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

• .prettierrc配置👇

{
  "trailingComma": "none",
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2,
  "semicolons": true,
  "bracketSpacing": true
}

• .eslintrc配置👇

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  rules: {
    'prefer-promise-reject-errors': 0,
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'arrow-parens': 0,
    'generator-star-spacing': 0,
    'space-before-function-paren': 0,
    'semi': ['error', 'always'],
    'indent': 0,
    'no-fallthrough': 0,
    'eqeqeq': 0,
    'one-var': 0,
    'no-extra-boolean-cast': 0,
    'camelcase': 0,
    'no-mixed-operators': 0,
    'eol-last': 0
  }
}

1.4. 自动部署

官网直接部署在github pages上，通过travis来做跑测试和自动化部署

language: node_js
env:
  global:
    - GH_REF: github.com/meishaFE/steam-game-ui.git
cache:
  directories:
    - ~/.npm
    - node_modules
node_js:
  - '9'
install:
  - npm install
script:
  - npm run test
  - npm run build
after_script:
  - cd ./dist
  - git init
  - git add .
  - git commit -m "Travis CI Auto Builder"
  - git push --force --quiet "https://${TOKEN_AARON}@${GH_REF}" master:gh-pages