@ppsv/cli

开箱即用的Vue3组件库快速成型工具，提供了一系列命令和工具去解决组件库开发上的问题

特性

• 1.开箱即用的组件库开发环境
• 2.开箱即用的组件库编译工具，支持导出esm和umd两种模块代码
• 3.基于配置文件的组件库文档站点,支持百度统计和主题定制
• 4.支持单文件组件(sfc)和tsx,jsx两种风格的组件库编写风格
• 5.开箱即用的代码检查工具
• 6.开箱即用的单元测试工具
• 7.开箱即用的代码发布工具,发布到npm和github,并自动生成更新日志
• 8.支持Typescript

快速开始

@ppsv/cli内置了单文件组件(sfc)和tsx, jsx两种风格的组件库项目模板，可以通过gen命令直接生成。 帮助用户直接进入组件本身的开发，这里推荐使用yarn作为包管理工具，首先确保安装了yarn并且添加到系统环境变量中去，这里不展开介绍yarn的安装和配置方法。

# 安装命令行工具
yarn global add @ppsv/cli
# 使用gen命令生成项目
ppsv-cli gen 项目名
cd 项目名
yarn
yarn dev

然后通过简单修改一些组件库模板的基础信息，就可以开始组件库的开发了

高级定制

配置文件

项目根目录下的pps.config.js用来管理整个组件库项目的具体细节

参数	说明	类型	默认值
host	开发服务器主机	number	localhost
port	开发服务器端口	number	8080
name	组件库全名	string	pps
namespace	组件库命名空间, 会作为组件前缀	string	var
title	文档中组件库的标题	string	pps
logo	文档中组件库的logo	string	-
defaultLanguage	文档默认语言	string	zh-CN
useMobile	是否显示右侧手机预览	boolean	false
themes	文档主题	SiteThemes	-
highlight	文档代码片段样式相关	SiteHighlight	-
analysis	文档统计相关	SiteAnalysis	-
pc	pc端文档结构配置	SitePC	-
mobile	mobile端文档结构配置	SiteMobile	-

SiteThemes

主题变量相关，由于默认的主题变量可能时常修改，以pps官方文档的主题为准

参数
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

代码片段高亮，基于highlight.js

参数	说明	类型	默认值
style	highlight的css地址	string	-

SiteAnalysis

统计埋点相关

参数	说明	类型	默认值
baidu	百度统计脚本地址	string	-

SitePC, SiteMobile

文档结构部分相关，示例配置如下

module.exports = {
  pc: {
    redirect: '/home',
    title: {
      'zh-CN': '一个组件库',
    },
    header: {
      i18n: null,
      github: 'https://github.com/wangFengJ/pps',
    },
    menu: [
      {
        text: {
          'zh-CN': '开发指南',
        },
        // 侧边栏菜单目录
        type: 1,
      },
      {
        text: {
          'zh-CN': '基本介绍',
        },
        doc: 'home',
        // 索引项目根目录下的md文档
        type: 3,
      },
      {
        text: {
          'zh-CN': '基础组件',
        },
        type: 1,
      },
      {
        text: {
          'zh-CN': 'Button 按钮',
        },
        doc: 'button',
        // 索引组件根目录下的md文档
        type: 2,
      },
    ],
  },
  mobile: {
    redirect: '/home',
    title: {
      'zh-CN': '一个组件库',
    },
    header: {
      i18n: null,
    },
  },
}

命令相关

启动开发服务器

ppsv-cli dev

构建文档站点

ppsv-cli build

预览文档站点

ppsv-cli preview

构建组件库代码

ppsv-cli compile

执行所有的单元测试

ppsv-cli test

以watch模式执行单元测试

ppsv-cli test -w

检查代码

ppsv-cli lint

快速创建一个组件文件夹

ppsv-cli create <componentName>

生成一个项目模板

ppsv-cli gen <projectName>

babel

对babel进行配置，首先在package.json中指定目标浏览器

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

创建babel.config,js

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

git和npm

git-hook

husky，lint-staged配合eslint，stylelint，commitlint做commit前的检查，package.json配置如下

{
  "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/**"
    ]
  }
}

创建commitlint.config.js

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

创建.prettierignore

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

typescript

创建tsconfig.json

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

发布代码

使用release-it和conventional-changelog进行代码发布和更新日志的生成，package.json配置如下

{
  "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"
      }
    }
  }
}

发布前注意

• 1.npm和yarn的仓库源必须指向npm官方镜像
• 2.npm和yarn都必须执行login命令进行用户登录