Skip to content
/ want Public

A enterprise applications as a React boilerplate based React & Ant-Design

Notifications You must be signed in to change notification settings

way-jm/want

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 属性,就可以生成一个全功能的表格,完成分页查询,刷新,列属性修改等功能

About

A enterprise applications as a React boilerplate based React & Ant-Design

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published