Skip to content

Latest commit

 

History

History
108 lines (82 loc) · 3.33 KB

README.md

File metadata and controls

108 lines (82 loc) · 3.33 KB
Raw

Want中后台脚手架(Way-Ant inspired!)

该项目使用Create React App创建。 初衷是既想使用antd-Pro，但是要去再学习umi的一套东西并且umi约定性太强，所以想做一个基于antd+react+typescript的模板 配置的东东基本已经搞完，只要改改业务代码，就可以快速搭建企业的中后台模块。

原则：约定配置生万物

从根本上讲，模板的目的是尽可能使用约定的配置，来让框架自动生成模块代码，大量减少业务代码。 这里主要有侧边栏的配置，还有下面说到的MainTable的配置。

如自己用脚手架搭建

npx create-react-app my-app --template typescript

可用的脚本

在项目文件夹内，你可以执行这样的命令:

yarn dev

以开发模式(dev)启动项目并使用mock数据，mock数据地址为http://localhost:9000.
在浏览器上打开 http://localhost:3000 。

yarn start

以开发模式(dev)启动项目.
在浏览器上打开 http://localhost:3000 。

yarn mock

启动mock数据，mock数据地址为http://localhost:9000.

yarn build

把你的项目打包到build文件夹内

yarn eject

暴露配置文件

项目环境

typescript ant-design 4.0

高级配置

按需加载

antd

react-app-rewired

当前customize-cra有bug，解决方案：

Just tried customize-cra@next, it works now.

less支持

支持less，文件名需要命名成test.module.less 参考rewrite-less

TypeScript支持

mock数据和前端工程均使用TypeScript编写。

项目目录（src）说明

- assets 静态资源
- common 公共的css和js
- components 公用组件
- layout  布局文件
- page 页面
App.tsx 项目根组件
index.less 入口css样式
Company.tsx 入口文件
menu.config.ts  侧边栏配置文件
router.tsx 路由渲染组件

侧边栏配置文件demo

  [
     {
 
         icon: 'iconbeijing',
         name:'二级路由',
         children: [
             {
                 path: '/demo/son1',
                 component: 'demo/index',
                 name:'子组件1',
                 icon: 'iconbeijing'
             },
             {
                 path: '/demo/son2',
                 component: 'demo/index2',
                 name:'子组件2',
                 icon: 'iconbeijing'
             }
         ]
     },
     {
 
         icon: 'iconbeijing',
         name:'一级路由',
         path:'/demo_n',
         component: 'demoNoChild/index',
     }
 ];

MainTable快速搭建 CRUD 的利器

类似于antdPro:ProTable 大部分中后台页面都是非常同质化的 CRUD 组成的，很多时候都是一个 Table，然后提供一些操作按钮，并且有一个新增表单。 MainTable接管了翻页，页码改变等事件，理论上你只要有配置列和 request 属性，就可以生成一个全功能的表格，完成分页查询，刷新，列属性修改等功能