Pcip-ui-oa NPM

pcip-ui-oa

6:00

组件开发须知

不要或减少全局引入第三方库
开发组件前,先运行 npm run lib:w 命令,再 npm run serve (实时监听对组件打包读写)
如只读组件,则 npm link 到电脑本地全局,再使用 npm link pcip-ui-oa 链接到本地,然后直接 npm run serve (只读)
前端代码遵照文档规范
每次开发完成一个组件,对组件兼容性进行排查,至少兼容 IE11
尽量不要改变组件的样式,目前自有对 Ant Design of Vue 组件全部二次封装按规范修改后的样式,参考基础组件库
基础组件库 SVN 地址
基础组件库文档打包 npm run docs:build 组件打包 npm run lib
每个组件设置类名时加上自己组件的名字,避免类名重复
接口请求时使用封装好的 js 文件(oarequest.js),不能使用 axios 请求
组件涉及到的接口需要可配置的话,接口和参数需要写在 json 里面,可参考已有组件

安装依赖包

npm install

运行组件库的测试页面地址 examples 文件夹

npm run serve

组件库与其他本地项目联调

npm run lib:w
npm link

组件库发布

npm publish

运行文档 docs 文件夹

# 需要先npm run lib:w打包lib，并npm link到电脑本地全局
# 在使用npm link pcip-ui-oa链接到本地
npm run docs:dev

文档的打包

npm run docs:build

组件开发步骤

1.由于组件库现在采用的源代码引入，现阶段开发组件步骤采用直接在对应项目依赖里面直接新建文件夹（格式参考已有组件）开发组件，待开发完成后复制文件到此项目packages/Common/路径下，再发布版本。

2.在对应的所需要使用的项目的components/modules.js 注册我们开发的组件即可开发。

文档开发步骤

所有的文档都在 docs 文件夹下面
- 基础组件在 docs/components
- 业务组件在 docs/components/business
所有组件中用到的图片资源文件放在 docs/images 下面对应的组件文件夹下面
添加一个组件,需要在 component/sidebar.js 里面添加对应的路径
一级标题用# ,二级标题用###

demo 例子要如下: ::: demo

<template>
  <p-button type="primary">
    Primary
  </p-button>
  <p-button>Default</p-button>
  <p-button type="dashed">
    Dashed
  </p-button>
  <p-button type="danger">
    Danger
  </p-button>
  <a-config-provider :auto-insert-space-in-button="false">
    <p-button type="primary">
      按钮
    </p-button>
  </a-config-provider>
  <p-button type="primary">
    按钮
  </p-button>
  <p-button type="link">
    Link
  </p-button>
</template>

:::

Q&A

npm 安装的包出现不知名的报错？首先升级 node 和 npm 版本，确保版本不低于本文中提到的版本号。
nrm ls 命令报错？ https://www.jianshu.com/p/126ba674e395
使用 npm publish 报错： npm ERR! code E413 ？注意包的大小，尽量控制在 2M 以下
This relative module was not found: ../lib/*.js in ./examples/main.js npm run serve 前是先使用 npm run lib:w
Cannot find module 'pcip-ui-oa' 如果是本地调试需要先 npm run lib:w 打包 lib，并 npm link 到电脑本地全局,在使用 npm link pcip-ui-oa 链接到本地否则 npm install 正常安装即可