欢迎来到深圳市明源云空间 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',
    ],

• 即可正常使用