pcsp-cli

简介

组件开发工具，开发符合组件市场规范的组件

安装

npm install -g pcsp-cli

功能介绍

所有指令

• pcsp init

• pcsp create

• pcsp docs

• pcsp build

• pcsp publish

• pcsp integrate

• pcsp serve

• pcsp --version

• pcsp --help

pcsp init

创建符合组件市场规范的开发环境

pcsp init [path]

• [可选] path: 指定路径，默认在当前路径

使用示例

# 创建空白文件夹
mkdir folder

# 进入文件夹目录
cd folder

# 初始化开发环境
pcsp init

pcsp create

创建组件

pcsp create <name>

• [必选] name: 组件名称
• [可选] options: 配置项
  • --path: 组件创建路径，默认是创建在 packages 目录下

使用示例

创建组件

# 创建 line 组件
pcsp create line

在指定路径下创建组件

# 在 src 目录创建组件 line 组件
pcsp create line --path=src

pcsp build

对组件进行编译构建

pcsp build <source> [options]

• [必选] source: 需要编译构建的入口文件
• [可选] options: 配置项
  • --name: 输出名称
  • --analyzer: 是否进行打包分析
  • --config: 使用自己的配置文件

使用示例

编译组件

pcsp build packages/line/line.js

重命名

pcsp build packages/line/line.js --name=chartline

zip

pcsp build packages/line/line.js --zip

打包分析

pcsp build packages/line/line.js --analyzer

pcsp publish

发布组件

pcsp publish [target] [options]

• [可选] target: 指定发布组件的地址，不单独指定时，将发布 dist 目录下所有 tgz 组件包
• [可选] options: 配置项
  • --registry: 指定组件包的仓库地址

使用示例

发布组件包到指定仓库

pcsp publish dist/line-1.0.0.tgz --registry=http://127.0.0.1/nexus/repository/npm

pcsp docs

根据注释自动生成组件使用文档，文档注释规范采用 vue-styleguidist

pcsp docs <source> [options]

• [必选] source: 指定要生成文档的组件
• [可选] options: 配置项
  • --config: 使用自己的配置文件

使用示例

自动生成文档

pcsp docs packages/line/line.js

pcsp integrate

完整命令，文档&编译&发布，整合 自动生成文档 → 编译打包 → 发布 指令

pcsp integrate <source> [options]

• [必选] source: 指定要生成文档的组件
• [可选] options: 配置项
  • --registry: 指定组件包的仓库地址
  • --zip: 直接打包为zip版本（此时取消上传到私服仓库）

使用示例

1、编译发布一个组件

pcsp integrate packages/line/line.js --registry=http://127.0.0.1/nexus/repository/npm

2、打包一个zip版本

pcsp integrate packages/line/line.js --zip

pcsp serve

启动组件调试，在浏览器上预览组件效果

默认访问地址

pcsp serve [source]

• [可选] source: 指定要调试预览的组件，必须是 .vue 文件
• [可选] options: 配置项
  • --host: 指定服务地址
  • --port: 指定端口号，默认是8090
  • --config: 使用自己的配置文件

使用示例

调试指定组件

pcsp serve packages/line/line.vue

调试整个工程

不指定具体组件时，会自动扫描 packages 目录下的组件

pcsp serve

使用自己的配置文件进行调试

pcsp serve packages/line/line.vue --config=serve.config.js

pcsp --version

查看当前版本

pcsp --version

pcsp --help

查看帮助信息

pcsp --help

开发

# 安装依赖
npm install

# 链接到全局
npm link

常见问题

编译失败

1. 请确保指令执行目录是置于工程目录下，即和 node_modules 同一级

打包失败

1. 请确保 package.json 文件存在并内容正确

文档失败

1. 如果是文档打包成功，但没有显示内容。检查组件中 props 里的写法是否正确。
2. 对于组件库的使用，既可以在单个组件中全局使用，也可按需使用。按需使用在当前自己工程下 babel.config.json 文件中进行配置，此时配置的组件是全局的按需使用。