react 管理后台开发模板
- 安装依赖
npm run bootstrap - 开发
npm run dev || yarn dev - 编译
npm run build || yarn build ├── config # 项目相关配置 │ ├── config.js # umi相关配置 │ └── router.config.js # ├── mock # 后端接口模拟 │ ├── login.js # 登录相关 │ └── ├── public # 静态资源 ├── src # 代码主目录 │ ├── assets # 静态资源 │ ├── components # 全局公共组件 │ │ ├── Breadcrumb # 面包屑组件 │ │ ├── CountDown # 倒计时组件 │ │ ├── Exception # 异常组件 │ │ ├── GlobalFooter # 全局Footer组件 │ │ ├── GlobalHeader # 全局Header组件 │ │ └── # │ ├── config # 项目配置 │ │ ├── interceptors # │ │ ├── index.ts # 项目配置主文件 │ │ └── menu.ts # 项目左侧菜单配置 │ ├── icons # 字体图标 │ │ ├── svg # 存放svg │ │ └── index.js # 统一处理svg引入 │ ├── layouts # 布局 │ ├── styles # 样式目录 │ ├── utils # 全局工具方法目录 │ │ └── # │ ├── global.js # 全局JS umi会直接引入 │ └── global.less # 全局样式 umi会直接引入 ├── .editorconfig # IDE设置文件 ├── .stylelintrc # stylelint配置文件 ├── .umirc.js # umi配置文件 └── yarn.lock # yarn生成文件 git 提交信息使用commitlint 进行规范
具体配置以及説明请查看commitlint-config-jiumao
主要参考 手摸手，带你优雅的使用 icon
- 在阿里爸爸的开源图库iconfont找到需要的图标，下载 svg
- 拷贝至src/icons/svg目录下
- 在项目中引用SvgIcon组件，指定属性
icon
语义化命名，规则如下
- 实心和描线图标保持同名，用
-o来区分，比如question-circle（实心）和question-circle-o（描线）； - 命名顺序：
[图标名-[形状?]-[描线?]-[方向?]]
?可选
import React, { Component } from 'react'; import SvgIcon from '@components/SvgIcon'; class Test from Component { render() { return ( <div> <SvgIcon icon="lock"></SvgIcon> </div> ) } }