中后台开发模板
- 🎉🎉🎉 欢迎 PR
- 🌴🌴🌴 钉钉交流群(23355178)
使用钉钉扫描下方二维码
-
安装 NodeJs 推荐安装最新稳定版
-
全局安装 yarn(可跳过)
npm install --global yarn - 安装依赖
npm run bootstrap 或者 yarn bootstrap
- 开发
npm run start 或者 yarn start
- 编译
npm run build 或者 yarn build
- 框架：React、Umi
- 组件库：ant-design
- 开发语言：TypeScript
- Ajax 库：Axios
- 样式：Less
nest-serve-starter 正在开发中...
├── 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
- 安装依赖
yarn add -D @types/webpack-env svg-sprite-loader - 添加配置
// umi配置文件 // 添加以下配置 urlLoaderExcludes: [resolve(__dirname, '../src/icons/svg')], chainWebpack(config) { config.module .rule('svg') .test(/\.svg$/i) .include.add(resolve(__dirname, '../src/icons/svg')) .end() .use('svg-sprite-loader') .loader(require.resolve('svg-sprite-loader')); - 新增以下目录
// src目录下 具体代码请直接参考项目 ├── icons │ ├── svg # 存放icon的svg文件 │ └── index.ts # - 新建 icon 组件
具体代码请参考 Icon
import React from 'react'; import Icon from '@/common/Icon'; class Example extends React.Component { render() { return ( <div> // type为svg文件名称 Analysis <Icon type="upload" /> </div> ); } } export default Example;