- 💡 TypeScript: 应用程序级 JavaScript 的语言
- 💎 优雅美观：基于 Ant Design 体系精心设计
- 📐 常见设计模式：提炼自中后台应用的典型页面和场景
- 🚀 最新技术栈：使用 React/umi/dva/ant-design 等前端前沿技术开发
- 🌐 国际化：内建业界通用的国际化方案
- ⚙️ 最佳实践：良好的工程实践助您持续产出高质量代码
- 🔢 Mock 数据：实用的本地数据调试方案
- 🔒 优秀的权限设计：目前能找到的最好的权限实现方案
-
安装 NodeJs 推荐安装最新稳定版
-
全局安装 yarn(可跳过)
npm install --global yarn - 安装依赖
npm run bootstrap 或者 yarn bootstrap
- 开发
npm run start 或者 yarn start
- 编译
npm run build 或者 yarn build
本地开发后端接口配置
使用local-server.config.ts配置文件
内容如下:
export default { baseURL: 'https://api.jiumao.com' }; - 框架：React、Umi
- 组件库：ant-design
- 开发语言：TypeScript
- Ajax 库：Axios
- 样式：Less
- 代码上 CDN 请使用以下 umi 插件
解决资源访问路径问题以及 API 地址配置问题
系统采用手动配置路由的形式
相关字典
配合iconfont使用
- 参数类型:
string - 参数描述: 左侧菜单的 Icon
- 默认值: 无
- 参数类型:
string - 参数描述: 参数名称 配合多言插件使用 添加路由请在 locals 目录下的 menu.ts 添加对应项
- 默认值: 无
- examples:
// router.config.ts { path: '/module1', name: 'module1', component: 'component path', routes: [ path: '/module1/page1', name: 'page1', component: 'component path', ] } // menu.ts 添加下面几行配置 'module1': '***', 'module1.page1': '***' 配合Policy使用
- 参数类型:
string|string[] - 参数描述: 权限 控制是否显示左侧菜单 以及路由拦截
- 默认值: 无
- 参数类型:
boolean - 参数描述: 是否显示面包屑
- 默认值: true
- 参数类型:
boolean - 参数描述: 可以在菜单中不展示这个路由，包括子路由
- 默认值: false
- 参数类型:
boolean - 参数描述: 用于隐藏不需要在菜单中展示的子路由
- 默认值: false
nest-serve-starter 正在开发中...
请查看 ant-design-plus authorized
├── config # UMI配置相关 │ ├── config.ts # umi配置文件 │ ├── plugin.config.ts # umi插件配置 │ ├── router.config.ts # 路由相关配置 │ ├── server.config.ts # 后端服务地址配置 │ └── theme.config.ts # 定制化ant-design ├── docker # docker相关配置 │ ├── Dockerfile # docker配置文件 │ └── nginx.conf # nginx相关配置 ├── mock # 后端接口模拟 │ ├── notices.ts # 通知相关 │ └── users.ts # 用户相关 ├── public # 静态资源 │ ├── favicon.png # favicon │ └── ├── src # 主目录 │ ├── assets # 静态资源 │ ├── components # 全局公共组件 │ │ ├── authorized # 面包屑组件 │ │ ├── drawer-wrapper # 对drawer二次封装 │ │ ├── exception # 异常组件 │ │ ├── global-footer # 全局Footer组件 │ │ ├── global-header # 全局Header组件 │ │ ├── header-dropdown # │ │ ├── header-search # header搜索组件 │ │ ├── icon-font # icon组件 具体请参考ant-design自定义图标方案 │ │ ├── notice-icon # 消息通知组件 │ │ ├── page-header-wrapper # 对page-header二次封装 │ │ ├── page-loading # loading组件 │ │ ├── screen-full # 全屏组件 │ │ ├── select-lang # 选择语言组件 │ │ ├── notice-icon # 消息通知组件 │ │ ├── send-code # 发送验证码组件 │ │ ├── side-menu # 左侧菜单组件 │ │ ├── tab-pages # 页面Tab组件 │ │ └── # │ ├── config # 项目配置 │ │ ├── index.ts # 项目主要变量配置 │ │ └── │ ├── layouts # 项目常用布局 │ ├── locales # 多语言目录 │ ├── models # 全局model │ ├── pages # 所有页面 │ ├── services # 后端接口相关 │ ├── styles # 样式目录 │ ├── utils # 全局工具方法目录 │ ├── global.ts # 全局TS umi会直接引入 │ └── global.less # 全局样式 umi会直接引入 ├── .editorconfig # IDE设置文件 ├── .gitignore # Git忽略文件 ├── .nvmrc # ├── .prettierignore # ├── .prettierrc.js # ├── .stylelintrc # ├── commitlint.config.js # ├── jest.config.js # ├── LICENSE # ├── lint-staged.config.js # ├── package.json # package.json ├── README.md # 项目描述文件 ├── tsconfig.json # typescript配置文件 └── yarn.lock # yarn生成文件 具体请查看walrus
采用 ant-design 提供的解决方案，具体请查看自定义图标
在 /src/config/index.ts 中配置 SETTING_DEFAULT_CONFIG.iconFontUrl
awesome-frontend 整理前端相关的博客、教程、库... 欢迎查阅
| Github Issue | 钉钉群 | 微信群 |
|---|---|---|
| issues |  |  |