欢迎来到深圳市明源云空间 PC 端组件库
请你认真阅读以下所有内容！
开发构建流程
yarn doc:server 开启文档热更新模式
yarn doc:build 构建文档静态资源
npm run pub 构建发布新的版本（记得每次发布调整package.json文件的版本号,原则上小版本+0.0.01）
组件命名规则
- 以
myy开头 - 租赁
myy-zl前缀,例如:myy-zl-room - 资管
myy-zg前缀,例如:myy-zg-room
组件库设计理念
-
约定优于配置的思想
-
与
ant-design设计理念一样，环境与配置一样,支持tree-sharking,使用bable-import-plugin即可
开发一个新组件
- 每新增一个组件,都要在 src 的 index.ts 文件中新增它的引入(与之前一其他组件一样的方式),例如:
export { default as FedUpload } from './components/fed-upload';
- 每新增一个组件,都要在 src 的 index.d.ts 文件中新增它的引入(与之前一其他组件一样的方式),例如:
export { default as FedUpload } from './components/fed-upload';
特别注意： 这里的文件夹名字,一定要是这种使用-连接的方式,不要使用驼峰命名,部分操作系统对大小写不敏感,而且
bable-import-plugin会自动把驼峰命名转换成-形式。让你找不到
-
每新增一个组件,都要在组件对应的文件夹内新增一个style文件夹,里面写上index.less文件(即使是空的也需要,这是babel-import-plugin按需加载时候自动引入的),不然生产环境就会报错.
-
使用组件文档热更新模式调试组件,需要在组件对应文件夹内新建index.md文件,然后编写tsx代码.
-
本组件库只会打包tsx代码，所有的文件请使用.tsx结尾!
-
编写组件和示例完成后,需要编写一份index.d.ts文件放置于组件文件夹内,用于代码提示和检验.
-
一个基本组件,应该有一个index.tsx文件(组件根文件),index.d.ts（组件声明文件）, index.md(组件文档示例文件),一个style文件夹下面的index.less文件(用于配合bable-import-plugin做按需加载引入样式)
-
切记以上几点，webpack 配置如此,一定要按照此约定开发组件,不要更改配置...!
本地项目内调试
- 进入ykj-ui根目录运行命令
yarn link - 进入项目根目录运行命令
yarn link ykj-ui - 每次修改了ykj-ui都要
yarn build才能生效 - 重启运行项目,即可热更新本地调试组件
断开本地项目内调试
- 在ykj-ui项目下运行
yarn unlink - 在启动项目下运行
yarn unlink ykj-ui,然后yarn add ykj-ui
使用流程
yanr add ykj-ui --save
yarn add babel-plugin-import
- babel 配置
[
'import',
{
libraryName: 'ykj-ui',
libraryDirectory: 'lib/components',
},
'ykj-ui',
],
- 即可正常使用