Skip to content

V
vite-react-ts-admin
Commit e03076bf authored by 申中慧's avatar 申中慧
Browse files
Options

fix: 修改readme目录

parent f169352e
Pipeline #200 canceled with stages
      Hide whitespace changes
      Inline Side-by-side
      Showing with 99 additions and 84 deletions
      README.md
      View file @ e03076bf
      # CPAS-Cloud 前端框架 # CPAS-合并系统 前端框架
      # 相关技术 ## 背景
      - 前端目前使用的umi3企业级开发框架，功能大而全。但对我们的业务来说，很多功能其实并没有用到。打包构建的包中包含很多未用的内容。
      - React相关的生态包括路由，组件库、状态管理等相应的工具都已更新多个版本，但umi中有些配置需要特定的版本要求，
      - 前端技术积累需要
      ## 相关技术
      基于vite开源的后台模版很多，这里基本参考类github的开源项目：
      - [react-vite-admin](https://github.com/ychengcloud/react-vite-admin/tree/main)
      对相应包做了部分升级，和配置修改
      - 比如vite使用了4.x版本，自动提供刷新功能，不依赖@vitejs/plugin-react-refresh插件
      - 由于我们目前的项目还是重度依赖V4版本，ant-design还是使用了4.x版本
      - React-router 使用了6.x版本。
      - 状态管理这里有些纠结，上述项目使用了状态管理[recoil](https://recoiljs.org/zh-hans/docs/introduction/getting-started/), facebook公司新出品，但考虑到稳定性，在mobx和zustand中纠结，mobx知名度较高，zustand后起之秀。基于现有了解的技术和实践，这里选择了[Zustand](https://zustand-demo.pmnd.rs/)作为状态管理库。在这里npm包趋势表中，可以看到zustand的下载量日渐增多 [mobx&zustand&recoil下载量对比](https://npmcharts.com/compare/mobx,zustand,recoi)
      - 国际化由于之前使用的umi，umi中使用了react-inil。这里依旧使用了[react-inil](https://formatjs.io/docs/react-intl/)
      | 技术 | 官网 | 描述 | | 技术 | 官网 | 描述 |
      | -------------------------------- | --------------------------------- | ---------------- | | -------------------------------- | --------------------------------- | ---------------- |
      | Vite 4.X | <https://cn.vitejs.dev/> | 基础脚手架 | | Vite 4.X | <https://cn.vitejs.dev/> | 基础脚手架 |
      | React Router 6.X | <https://reactrouter.com/en/main> | react 路由管理 | | React Router 6.X | <https://reactrouter.com/en/main> | react 路由管理 |
      | ant-design 5.X | <https://ant.design/index-cn> | ui 组件 | | ant-design 4.X | <https://ant.design/index-cn> | ui 组件 |
      | @ant-design/pro-components 2.4.0 | <https://procomponents.ant.design/> | 中后台高阶组件 | | @ant-design/pro-layout 6.26.6 | <https://procomponents.ant.design/components/layout/> | 中后台高阶组件 |
      | mobx 6.8.0 | <https://mobx.js.org/README.html> | 轻量级状态管理 | | zustand | <https://github.com/pmndrs/zustand> | 轻量级状态管理 |
      | typescript | - | 代码类型规范 | | typescript | - | 代码类型规范 |
      | axios | - | 数据请求 | | axios | - | 数据请求 |
      | prettier | - | 代码美化，格式化 | | prettier | - | 代码美化，格式化 |
      ...@@ -17,102 +35,98 @@ ...@@ -17,102 +35,98 @@
      | husky | - | git commit 检验 | | husky | - | git commit 检验 |
      | lint-staged | - | git commit 检验 | | lint-staged | - | git commit 检验 |
      ## git 提交规范 ## 开发构建
      [参考地址](https://nitayneeman.com/posts/understanding-semantic-commit-messages-using-git-and-angular/#test) 前缀 + 半角冒号 + 半角空格 + 说明 ### 安装依赖
      ```bash ```bash
      feat: 新的功能, pnpm install
      fix: 修复Bug,
      docs: 只有文档变更,
      style: 空格, 分号等格式修复,
      refactor: 代码重构，注意和特性、修复区分开,
      perf: 提升性能,
      test: 添加测试,
      build: 开发工具变动(构建、脚手架工具等)
      del: 删除多余文件
      ``` ```
      ## git 提交要求 ### 开发
      在提交前应检查自己的代码，务必做到以下几点
      ```bash ```bash
      1、不能有明显报错，警告等信息，(如有特殊，请加说明) pnpm run start
      2、删除多余引用
      3、代码必须遵循代码规范（具体查看代码规范）
      4、清除控制台输出
      其它事项 后期慢慢加
      ``` ```
      ## locales 多语言规范 ## 构建
      在 utils 中增加了 intl 方法 默认值都写中文。使用方法： intl(id, 默认值)
      <font color=#FF0000>注：en-US.ts zh-CH.ts 无特殊 无需修改。所有业务相关都在 pages/index.ts 下引用</font>
      ```bash ``` bash
      component.ts // 全局组件相关 pnpm run build
      global.ts // 全局共享 主页面相关 原 globalHeader.ts
      menu.ts // 路由相关
      pwa.ts // 目前不太清楚
      settings.ts // 全局设置相关
      pages // 业务相关页面 规则- 按模块名命名
      --index.ts // 所有pages业务相关都从这里统一导出
      ``` ```
      ## utils/icon 图标使用规范 ## 结构目录
      在 utils 中增加了 icon 管理，默认导出 getIcon 因为目前项目中使用的图标基本都是从 antd 中导入的，如果使用 string 时还需要转换，所以做了一个统一管理图标的功能。
      <font color=#FF0000>注：目前引用了所有 antd 中的图标，后期只引用项目中使用的图标，可按需加载，适当减少项目大小 </font>
      支持 从 URL 中获取，支持 Iconfont，支持本地图标等。
      ```bash
      export default getIcon;
      export {isUrl, isImg, Icons};
      ```
      ## 词汇专业术语，名词解释
      参考：[审计专业词汇](https://wenku.baidu.com/view/23edab40b307e87101f696d4.html)
      ``` ```
      Audit Paper 审计底稿 ├── README.md
      Audit Phase 审计阶段 ├── UpdateConfig.json
      ├── index.html
      ├── mock // mock文件
      │   └── user.ts
      ├── package.json
      ├── pnpm-lock.yaml
      ├── public // 公共
      │   ├── CNAME
      │   ├── config
      │   ├── cpas-business // 业务组件
      │   ├── cpas-ui
      │   ├── favicon.ico
      │   ├── icons
      │   ├── logo.png
      │   ├── logo1.png
      │   ├── modules
      │   ├── theme
      │   └── vite.svg
      ├── src
      │   ├── 404.tsx
      │   ├── App.tsx
      │   ├── ErrorPage.tsx
      │   ├── app.less
      │   ├── assets
      │   ├── components
      │   ├── config
      │   ├── global-copy.tsx
      │   ├── i18n // 国际化
      │   ├── initial.tsx // 运行时配置，获取initState中的各种配置
      │   ├── layout // 布局
      │   ├── lib
      │   ├── main.tsx
      │   ├── models
      │   ├── pages
      │   ├── router // 路由配置
      │   ├── server
      │   ├── services
      │   ├── store // 状态管理
      │   ├── types
      │   ├── typing.ts
      │   ├── typings.d.ts
      │   ├── umi // 封装了umi的一些方法，方便迁移
      │   ├── utils
      │   └── vite-env.d.ts
      ├── tsconfig.json
      ├── tsconfig.node.json
      └── vite.config.ts // vite相关配置
      ``` ```
      ## Freamwork更新规则 ## 功能列表
      1. 在目录下创建 UpdateConfig.json - [x] 代码规范格式化配置
      2. 在UpdateConfig.json 下配置updateFiles,removeFiles字段（可以是文件地址，也可以是文件夹地址） - [x] 升级Vite4 配置修改
      3. 应用端调用 cpas-cli update template - [x] 运行时初始化配置
      4. 每次更新需要提交git并由审批人合并到master上,并打出稳定可更新版本的tag标签; - [x] 路由设计
      5. 每次需要将 （更新新增）/（删除）的文件文件夹地址配置到 UpdateConfig.json中. - [x] 基础路由
      - [x] 动态路由
      - [x] 国际化支持
      - [x] devexpress的国际化
      - [x] antd的国际化
      - [x] react-inil的国际化
      - [x] icon图标处理
      ## Feamwork ejs模板渲染规则 ## Vite 打包
      1. 在要被动态渲染的模板下，建立同名称ejs文件。例如package.json -> package.json.ejs - [vite问题汇总](https://github.com/vitejs/vite/discussions/8232)
      2. 在ejs文件中编写要动态渲染的部分 - [vite打包react插件说明](https://github.com/vitejs/vite-plugin-react)
      ## 功能列表 ## 其他
      - [x] 运行时初始化配置 关于git提交规范、多语言、icon图表使用参考之前的说明 <http://git.youdatasum.com/cpas6.0/cpas-workplatform/cpas-workplatform-combine/tree/dev>
      - [x] 路由表配置
      - [ ] 国际化支持
      - [ ] antd的国际化
      - [ ] devexpress的国际化
      - [ ]
      - [ ] icon图标替换
      - [ ]
      - [ ] cpas-business&cpas-ui问题
      - [ ] 环境变量
      - [ ] 打包测试
      ### Vite 打包
      - [问题汇总] <https://github.com/vitejs/vite/discussions/8232>
      - [jsx-runtime] <https://stackoverflow.com/questions/75234915/why-is-vite-ts-bundling-both-production-and-development-versions-of-react-jsx-ru>
      ### 参考项目
      - [react-admin-vite] <https://github.com/KinXpeng/react-admin-vite/blob/main/vite.config.ts>
      - [react-vite-admin] <https://github.com/ychengcloud/react-vite-admin/blob/main/vite.config.ts>
      package.json
      View file @ e03076bf
      ...@@ -11,7 +11,8 @@ ...@@ -11,7 +11,8 @@
      "build": "NODE_OPTIONS=--max_old_space_size=8192 vite build", "build": "NODE_OPTIONS=--max_old_space_size=8192 vite build",
      "preview": "vite preview", "preview": "vite preview",
      "lint:script": "eslint --ext .js,.jsx,.ts,.tsx --fix ./", "lint:script": "eslint --ext .js,.jsx,.ts,.tsx --fix ./",
      "lint:style": "stylelint --fix **/*.{css,less,scss}" "lint:style": "stylelint --fix **/*.{css,less,scss}",
      "tree": "tree -L 2 -I 'node_modules|docs|dist' > tree.txt"
      }, },
      "lint-staged": { "lint-staged": {
      "*.{js,jsx,ts,tsx}": [ "*.{js,jsx,ts,tsx}": [
      ......
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment