pcip-ui-oa

6:00

组件开发须知

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

文档开发步骤

1. 所有的文档都在 docs 文件夹下面
   • 基础组件在 docs/components
   • 业务组件在 docs/components/business
2. 所有组件中用到的图片资源文件放在 docs/images 下面对应的组件文件夹下面
3. 添加一个组件,需要在 component/sidebar.js 里面添加对应的路径
4. 一级标题用# ,二级标题用###
5. 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

1. npm 安装的包出现不知名的报错？首先升级 node 和 npm 版本，确保版本不低于本文中提到的版本号。

2. nrm ls 命令报错？ https://www.jianshu.com/p/126ba674e395

3. 使用 npm publish 报错： npm ERR! code E413 ？注意包的大小，尽量控制在 2M 以下

4. This relative module was not found: ../lib/*.js in ./examples/main.js npm run serve 前是先使用 npm run lib:w

5. Cannot find module 'pcip-ui-oa' 如果是本地调试 需要先 npm run lib:w 打包 lib，并 npm link 到电脑本地全局,在使用 npm link pcip-ui-oa 链接到本地否则 npm install 正常安装即可