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>
)
}
}