rayplus_fus_front v0.0.8

随访系统前端

随访系统前端

📙 项目目录结构说明

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.ts            # 全局 JS
├── tests                    # 测试工具
├── .umirc.js                     # 环境变量
├── .eslintrc.js             # 配置文件
├── .eslintrc.js             # es的配置文件
├── typings.d.ts             # ts 类型声明
├── jsconfig.json            # js的配置文件
├── tsconfig.json            # ts的配置文件
└── package.json

📗 项目创建方式:

$ yarn create @umijs/umi-app
# 或 npx @umijs/create-umi-app

参考 umi 文档:

https://umijs.org/zh-CN/docs

📋 常用控制台指令：

安装依赖:

$ yarn

开启 dev 服务器:

$ yarn start
$ yarn start:dev
$ yarn start:prod

分析构建文件体积:

$ yarn analyze

构建项目:

$ yarn build
$ yarn build:dev
$ yarn build:prod

查看 dva 列表

$ yarn dvalist

生成 openapi

$ yarn openapi

项目具体指令看 package.json 文件

yarn 的指令请参考 : yarn 中文文档: https://yarn.bootcss.com/docs/usage/

🎈vscode 插件

需要使用的 vscode 插件有:

• ESLint (代码规范)
• koroFileHeader (注释)
• Prettier - Code formatter (注释规范)

可选插件

• Chinese (Simplified) Language Pack for Visual Studio Code (中文插件)
• GitLens — Git supercharged (git)
• One Dark Pro (主题)
• vscode-icons (图标)

📃vscode 配置文件参考:

{
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "vscode-icons",
  "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "fileheader.customMade": {
    // 头部注释
    "Author": "linkenzone", // 文件编辑者
    "Date": "Do not edit", // 文件创建时间
    "Descripttion": "Do not edit" // 文件描述
  },
  "fileheader.cursorMode": {
    // 函数注释
    "description": "",
    "param": "",
    "return": ""
  }
}

🔵 页面代码结构推荐

参考: https://beta-pro.ant.design/docs/folder-cn

为了让项目代码组织更加规范，让开发能够更方便的定位到相关页面组件代码，我们定义了一套规范，该规范当前只作为推荐的指导，并非强制。

src
├── components
└── pages
    ├── Welcome        // 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
    |   ├── components // 对于复杂的页面可以再自己做更深层次的组织，但建议不要超过三层
    |   ├── Form.tsx
    |   ├── index.tsx  // 页面组件的代码
    |   └── index.less // 页面样式
    ├── Order          // 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
    |   ├── index.tsx
    |   └── index.less
    ├── user           // 一系列页面推荐通过小写的单一字母做 group 目录
    |   ├── components // group 下公用的组件集合
    |   ├── Login      // group 下的页面 Login
    |   ├── Register   // group 下的页面 Register
    |   └── util.ts    // 这里可以有一些共用方法之类，不做推荐和约束，看业务场景自行做组织
    └── *              // 其它页面组件代码

所有路由组件（会配置在路由配置中的组件）我们推荐以大驼峰命名打平到 pages 下面第一级（复杂的项目可以增加 group 层级，在 group 下放置 pages）。不建议在路由组件内部再嵌套路由组件 - 不方便分辨一个组件是否是路由组件，而且不方便快速从全局定位到路由组件。

我们推荐尽可能的拆分路由组件为更细粒度的组件，对于多个页面可能会用到的组件我们推荐放到 src/components 中，对于只是被单个页面依赖的（区块）组件，我们推荐就近维护到路由组件文件夹下即可。