Skip to content

Latest commit

 

History

History
324 lines (258 loc) · 10.1 KB

README.md

File metadata and controls

324 lines (258 loc) · 10.1 KB
Raw

react-app

react项目模板，支持typescript，react 16.10，router 5.1,

目录

运行项目

node环境请升级到12+

  1. 安装vscode插件

    1. Debugger for Chrome
    2. EditorConfig for VS Code
    3. ESLint
    4. Prettier - Code formatter
    5. stylelint

  2. 进入根目录

  3. 运行命令，安装依赖

    1. 安装项目依赖
    yarn 
// 或者 npm i
    1. 安装mock服务依赖
    // 进入mock-server目录
cd ./mock-server
yarn
// 或者 npm i

  4. 在根目录下，运行命令，编译项目依赖

    yarn build:dll
// 或者 npm run build:dll

  5. 启动项目

    yarn dev
// 或者 npm run dev

npm命令说明

  1. dev 开发
  2. mock 启动mock服务，如果要链接后台，那么也应该启动此服务
  3. build:dll 编译项目依赖包
  4. build:dev 打包开发环境包
  5. build:prd 打包生产环境包
  6. create:module 模块创建脚本
  7. cc mock服务的控制器创建脚本，建议如下使用 
     // 记得现在/mock-server下先安装好依赖
 npm run cc controller/xxx // 其中xxx是你的模块名
 // 比如
 npm run cc controller/dog
 // 即可在mock-server/src/controller文件夹下创建dog控制器，并自动注入完成。

目录结构

项目业务代码目录

  • src
    • APP 项目组件入口
    • assets 静态资源
    • components 公共组件
      • base 基础组件
      • bisiness 业务组件
    • constants 静态变量
    • http 请求服务封装
    • modules 所有页面及其业务逻辑
    • routes 路由相关
    • service 服务模块
      • theme 原生主题控制服务
      • app app服务
      • i18n 国际化服务
      • user 用户服务
    • store 全局状态，公共状态
    • theme 主题配置包，包含原生主题配置(在native文件夹下)和material主题配置包
    • utils 工具包

mock服务目录

  • mock-server
    • src
      • proxy 代理配置
      • controller 控制器代码，主要写mock服务

项目打包配置及脚本

  • scripts
    • auto-get-module 自动获取懒加载模块脚本
    • creat_module 自动创建模块脚本及模板
    • dll 存放dll包
    • webpack webpack配置
    • build_dll.js dll打包脚本
    • build.js 项目打包脚本
    • builder.js项目打包器
    • dev.js 启动本地开发环境脚本

路径别名

  1. @ => src
  2. @base => src/components/base
  3. @biz => src/components/bussiness
  4. @history => src/routes/history
  5. @channel => buildConfig/channel/${channel}

微模块架构

  1. 一个模块包括业务逻辑、UI、后台交互等，这些组成一个模块，存放在一个文件夹中
  2. 所有的模块都放在src/modules下，可以包含多层级
  3. 模块下所有的index文件都会被脚本自动匹配到，会自动导入到状态管理器中
  4. 例如你新建了一个模块名为aa-bb-cc/list, 脚本生产会将此名字转为驼峰命名，aaBbCcList, 组件和状态管理模块都叫这个名字
  5. 关于业务逻辑、UI代码都可以放在同一个文件夹下，但是后台交互的service需要写在跟模块的文件夹下
// 例如
// 现在有用户管理模块 /modules/user
// 其下有
// 用户列表 /modules/user/list
// 用户详情 /modules/user/detail
// 用户新增 /modules/user/create
// 用户修改 /modules/user/update
// 等子模块
// 那么关于用户的所有service都应该放在/modules/user/sercive.ts中维护
// 而不是在每个子模块中都新建service.ts项去单独维护

路由

  1. 路由配置在src/routes中,
  2. 应全部都使用懒加载
  3. 二级子路由也应放在此处，方便整个项目路由的统一维护

状态管理器

  1. 使用的是natur方案, 文档请看natur
  2. 中间件配置
// 中间件执行顺序，从上至下，按顺序执行
const store = createStore(
  modules,
  lazyModules,
  undefined,
  [
    thunkMiddleware, // action可以返回函数，接受getState，setState, getMaps, dispatch几个参数
    promiseMiddleware,// 支持异步操作
    fillObjectRestDataMiddleware, // 支持�action增量更新state
    shallowEqualMiddleware, // 支持对象浅层比较优化
    devTool, // 支持redux devtool
    filterUndefinedMiddleware, // 不处理action返回的undefined结果
    localStorageMiddleware, // 缓存到localStorage中的中间件
  ],
);

  1. 多个业务模块之间存在复杂交互场景，或者单个模块的业务逻辑较为复杂，使用natur-service方案

  2. 数据持久化方案使用natur-persist

create:module 创建模块脚本

建议使用此命令

  1. 创建模块脚本放在/scripts/create-module中
  2. 模块的模板放在/scripts/create-module/templates中，可以自行添加自己需要的模板
  3. 在模板中定义的template字符串，在模块自动生成后会自动替换为模块名
  4. 例如用户新建aa-bb-cc/list模块，选择了base模板，那么base模板中的所有template字符串都会被替换为aaBbCcList字符

mock

mock服务器不仅仅是mock数据，还是真正的后台接口转发器，所以不论是否需要mock数据，你都应该将它开启，mockjs已经在依赖里面，结合使用更香

  1. mock服务器使用的是nestjs框架，需要先安装依赖才能运行 
    cd ./mock-server
yarn // 或者npm i
  2. mock服务器，设计是部分接口可以mock，部分接口走正常后台，具体配置在mock-server/src/proxy/ 下
  3. mock-server/src/proxy/api/*表示，你编写的mock api列表
  4. mock-server/src/proxy/mock.ts配置你需要哪些API需要mock，以及mock总开关
  5. mock-server/src/proxy/config.ts配置mock服务的请求url前缀、不走mock时的服务器地址
  6. mock接口写在mock-server/src/controller中，可以结合mockjs 模拟假数据

icon

icon库查看

  1. 方式一 要将官网查到的icon的驼峰命名法改为'_'分隔符命名

    import { Icon } from '@material-ui/core';

<Icon>airline_seat_flat</Icon>

  2. 方式二

    import AirlineSeatFlat from '@material-ui/icons/AirlineSeatFlat';

<AirlineSeatFlat />

theme，主题控制

  1. 基本上项目的主题都可以通过material的主题方案控制，放在/src/theme/material.ts

  2. 需要原声控制的主题样式都放在theme文件夹下，然后引入到App/index.js中

  3. 使用/service/theme.ts控制主题切换

    1. 创建样式文件, 定义样式变量
    /* src/theme/native/theme.scss */
.btn {
  border-radius: borderRadius; // 随便定义一个变量
}
    1. 给予自定义样式变量初始值
    // src/theme/native/config.ts
export default {
  // ...其他变量
  // 你的变量
  borderRadius: '2px',
}
    1. 使用样式
    // 使用theme的样式，和普通样式相同，
import style from '@/theme/native/theme.scss'

// style.btn,使用此样式即可
    1. 动态改变样式
    import theme from '@/service/theme';
theme.set('borderRadius', '0px');

权限控制

  1. 权限控制使用HOC实现，具体代码参考@biz/AuthFilterHOC.tsx 
    // 权限判断的逻辑在/src/store/user.store.ts中
// 支持单个权限、权限等级、角色权限三种控制方式
import Button from '@material-ui/core';
import AuthFilterHOC from '@biz/AuthFilterHOC';

const AuthButton = AuthFilterHOC(Button);

<AuthButton auth='login' authLevel={1} authRole='admin' />

国际化

  1. 在@/service/i18n.ts中，有两个方法，一个是t函数，一个是useI18n方法，区别是useI18n可以监听语言配置的变化，自动刷新组件。
  2. 语言包的定义都在@/constants/lang中
import React from 'react';
import {t, useI18n} from '@/service/i18n';

t('hello') // 你好 ｜ hello

const Comp: React.FC = () => {
  const $t = useI18n();
  return $t('hello');
}

开源工具库

  1. 基础工具函数lodash
  2. 表单校验formik
  3. url工具qs
  4. 对象key值转换工具convert-key
  5. 计算库decimal.js
  6. 时间处理库dayjs
  7. 颜色处理库color
  8. d3
  9. rxjs

本地工具库 src/utils

  1. hooks.ts，其中含有常用的hooks方法
  2. regExps.ts 存放常用的正则
  3. validator.ts 存放数据校验函数工具

UI框架使用规范

  1. 本项目使用material ui作为主要的UI框架
  2. 在使用material ui中的组件时，需要在/business/base中引入并导出，这么做的目的是隔离三方组件，以防业务需求，可以做二次封装
  3. 在本项目中无法直接使用自定义的组件导入，这是由于typescript无法配置自定义的依赖路径导致 
    // 错误， typescript报错
import Button from 'Button'
// 正确
import Button from '@base/Button'