fx-front-framework v1.7.12

PC端封装的业务组件，工具类，Hooks等

v1.3 pc-fx-framework ====> fx-front-framework

负责人：jiangjunjie（打包，发布等）

0. 使用原则

• 所有两个项目以上中使用到的组件，都可以提取到组件库中
• 所有较为通用的函数，hooks等，都可以提取到组件库中
• 鼓励所有人对此组件库做出贡献

1. 文件夹介绍

• build：build脚本文件，Gulp + Rollup
• packages：主要源码
  • components：组件源码
  • directives：指令源码
  • hooks：hooks源码
  • fx-front-framework：总导出目录
  • theme：样式源码
  • tokens：TS类型源码
  • utils：工具函数等源码
• scripts：上传文档以及发布组件库脚本
• typings：存放volar插件global.d.ts声明文件
• website：文档网站

2. 安装过程

1. 全局安装pnpm：npm install -g pnpm
2. 执行pnpm i

• 安装时遇到大量包请求报错，请先查看 .npmrc 文件中是否配置了「代理」，如果是，则先将代理配置为本机代理 或 注释掉代理配置，再执行安装；
• 安装过程慢的话，可以自己设置不同的npm registry或者修改.npmrc文件中的代理地址；
• 如安装后报错「sh: vite: command not found」，则可能是依赖未装全，建议切换到 npm 官方源，配置翻墙代理后，再进行安装；完整安装后，node_modules 项目数应该在 930+；

3. 使用说明

新建组件步骤

1. 在components目录下新建文件夹，文件夹结构参考：hello-world
2. 在components/index.ts中添加导出
3. 在fx-front-framework/components.ts中添加导出
4. 在typings/global.d.ts添加类型声明

新建指令（Directives）步骤

1. 在directives目录下新建文件夹，文件夹结构参考：focus
2. 在directives/index.ts中添加导出

新建hook（Hooks）步骤

1. 在hooks目录下新建文件夹，文件夹结构参考：use-focus
2. 在hooks/index.ts中添加导出

新建token步骤

1. 在tokens目录下新建文件，文件参考：test.ts
2. 在tokens/index.ts中添加导出

新建util步骤

1. 在utils目录下新建文件
2. 在utils/index.ts中添加导出

新建样式步骤

1. 在theme文件夹新建相应的scss文件

新建文档（Doc）步骤

1. 在website/docs/zh-CN目录下新建*.md文件
2. 在website/nav.config.json里添加对应的路由

• markdown中支持 :::demo-fs <directory>/<filename> ::: 语法，默认的文件夹位置在website/examples目录下，请参考test.md文件
• nav.config.json 中的path对应的是.md文件的名称

调试过程

1. 编写好对应的文档后，执行pnpm website-dev命令
2. 打开对应的文档地址，查看效果

打包发布过程

1. 升级版本：修改packages/fx-front-framework/package.json中的版本号
2. （可选）升级依赖（hongluan系列）版本，全局搜索对应的组件库名称，修改版本号
3. 执行pnpm build命令
4. 设置相应的NPM Registry地址（默认地址为公司的私有仓库）
5. 执行pnpm pub命令

构建帮助文档过程

1. 执行pnpm website-build命令
2. 拷贝website-dist目录下的文件到相应的静态服务器