@ppsv/cli

The out-of-the-box Vue3 component library rapid prototyping tool provides a series of commands and tools to solve the problem of component library development

Feature

• 1.Out-of-the-box component library development environment
• 2.Out-of-the-box component library compilation tool, support exporting esm and umd two module codes
• 3.Component library document site based on configuration files, support Baidu statistics and theme customization
• 4.Supports single file component (sfc) and tsx, jsx two styles of component library writing styles
• 5.Code inspection tool out of the box
• 6.Unit testing tools out of the box
• 7.Out-of-the-box code publishing tool, publish to npm and github, and automatically generate a change log
• 8.Support Typescript

Quickstart

@ppsv/cli has built-in single file component (sfc) and tsx, jsx two styles of component library project templates, which can be directly generated by the gen command. To help users directly enter the development of the component itself, it is recommended to use yarn as a package management tool. First, make sure that yarn is installed and added to the system environment variables. The installation and configuration methods of yarn are not introduced here.

# Install command line tools
yarn global add @ppsv/cli
# Use the gen command to generate the project
ppsv-cli gen projectName
cd projectName
yarn
yarn dev

Then by simply modifying some basic information of the component library template, you can start the development of the component library

Advanced customization

Configuration file

The pps.config.js in the project root directory is used to manage the specific details of the entire component library project

| Parameter | Description | Type | Default | | ----- | -------------- | -------- | ---------- | | host | Development server host | number | localhost | | port | Development server port | number | 8080 | | name | Full name of the component library | string | pps | | namespace | Component library namespace, Will be used as a component prefix | string | var | | title | The title of the component library in the document | string | pps | | logo | The logo of the component library in the document | string | - | | defaultLanguage | Document default language | string | zh-CN | | useMobile | Whether to display the right mobile phone preview | boolean | false | | themes | Document themes | SiteThemes | - | | highlight | Document code snippet style related | SiteHighlight | - | | analysis | Document statistics related | SiteAnalysis | - | | pc | PC-side document structure configuration | SitePC | - | | mobile | Mobile document structure configuration | SiteMobile | - |

SiteThemes

Theme variables are related, because the default theme variables may be modified from time to time, subject to the theme of the pps official document

| Variable | | ----- | | color-primary | | color-link | | color-type | | color-progress | | color-side-bar | | color-side-bar-active-background | | color-app-bar | | color-mobile-cell-hover | | color-mobile-cell-hover-background |

SiteHighlight

Code snippets are highlighted, based on highlight.js

| Parameter | Description | Type | Default | | ----- | -------------- | -------- | ---------- | | style | highlight的css地址 | string | - |

SiteAnalysis

Statistics related to buried points

| Parameter | Description | Type | Default | | ----- | -------------- | -------- | ---------- | | baidu | 百度统计脚本地址 | string | - |

SitePC, SiteMobile

The document structure is partly related, and the example configuration is as follows

module.exports = {
  defaultLanguage: 'en-US',
  pc: {
    redirect: '/home',
    title: {
      'en-US': 'A components library',
    },
    header: {
      i18n: null,
      github: 'https://github.com/wangFengJ/pps',
    },
    menu: [
      {
        text: {
          'en-US': 'Develop Guide',
        },
        // Sidebar menu directory
        type: 1,
      },
      {
        text: {
          'en-US': 'Basic Intro',
        },
        doc: 'home',
        // Index the md document in the root directory of the project
        type: 3,
      },
      {
        text: {
          'en-US': 'Basic Component',
        },
        type: 1,
      },
      {
        text: {
          'en-US': 'Button',
        },
        doc: 'button',
        // Md document in the root directory of the index component
        type: 2,
      },
    ],
  },
  mobile: {
    redirect: '/home',
    title: {
      'en-US': 'A components library',
    },
    header: {
      i18n: null,
    },
  },
}

Commands Intro

Start the development server

ppsv-cli dev

Build documentation site

ppsv-cli build

Preview documentation site

ppsv-cli preview

Build component library code

ppsv-cli compile

Perform all unit tests

ppsv-cli test

Execute unit tests in watch mode

ppsv-cli test -w

Lint code

ppsv-cli lint

Quickly create a component folder

ppsv-cli create <componentName>

Generate a project template

ppsv-cli gen <projectName>

babel

To configure babel, first specify the target browser in package.json

{
  "browserslist": [
    "Chrome >= 51",
    "iOS >= 10"
  ]
}

create babel.config,js

// babel.config.js
module.exports = {
  presets: [
    [
      '@ppsv/cli/preset',
      {
        loose: process.env.NODE_ENV === 'compile',
      },
    ],
  ],
}

git and npm

git-hook

husky, lint-staged cooperate with eslint, stylelint, commitlint to check before commit, package.json configuration is as follows

{
  "scripts": {
    "prepare": "husky install",
    "commit": "git-cz"
  },
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  },
  "lint-staged": {
    "*.{ts,tsx,js,vue,less}": "prettier --write",
    "*.{ts,tsx,js,vue}": "eslint --fix",
    "*.{vue,css,less}": "stylelint --fix"
  },
  "eslintConfig": {
    "root": true,
    "ignorePatterns": [
      "es/**",
      "umd/**",
      "site/**",
      "public/**",
      "src/*/__tests__/**",
      ".pps/**"
    ],
    "extends": [
      "@ppsv"
    ]
  },
  "stylelint": {
    "extends": [
      "@ppsv/stylelint-config"
    ],
    "ignoreFiles": [
      "es/**",
      "umd/**",
      "site/**",
      "coverage/**",
      "public/**",
      "highlight/**"
    ]
  }
}

create commitlint.config.js

// commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional'],
}

create .prettierignore

// .prettierignore
coverage/**
es/**
umd/**
site/**
public/**
src/*/__tests__/**
*.md

typescript

create tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "downlevelIteration": true,
    "declaration": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowJs": true,
    "lib": ["esnext", "dom"],
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve"
  }
}

Release code

Use release-it and conventional-changelog for code release and update log generation. The configuration of package.json is as follows

{
  "scripts": {
    "genlog": "conventional-changelog -p angular -i CHANGELOG.md -s",
    "genAllLog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
    "release": "yarn compile && release-it"
  },
  "release-it": {
    "git": {
      "changelog": "git log --pretty=format:\"* %s (%h)\" ${from}...${to}",
      "tagName": "v${version}",
      "commitMessage": "chore: release ${version}",
      "requireCleanWorkingDir": false
    },
    "plugins": {
      "@release-it/conventional-changelog": {
        "preset": "angular",
        "infile": "CHANGELOG.md"
      }
    }
  }
}

Note before release

• 1.The registry of npm and yarn must set to the official npm mirror
• 2.Both npm and yarn must execute the login command for user login