- 🌈 企业级中后台产品的交互语言和视觉风格。
- 📦 开箱即用的高质量 React 后台管理框架。
- 🛡 使用 TypeScript 开发。
- ⚙️ 集成登陆、Redux、选项卡等特性。
- 🌴 完备路由,同时支持配置式路由和约定式路由,同时保持功能的完备性,比如动态路由、嵌套路由、权限路由等等。
Package | Version | Description |
---|---|---|
@uiw-admin/basic-layouts |
用于布局的组件 | |
@uiw-admin/document-title |
设置页面标题 | |
@uiw-admin/user-login |
登录界面 | |
@uiw-admin/components |
常见的业务组件 | |
@uiw-admin/exceptions |
公共异常组件 | |
eslint-config-uiw-admin |
uiw-admin 内置 eslint 规则配置 |
- 直接下载实例文件
uiw-admin-ts.zip
uiw-admin-js.zip
- 通过命令创建项目
# npm 6.x
$ npm init uiw-admin my-app --example uiw-admin-ts
# npm 7+, extra double-dash is needed:
$ npm init uiw-admin my-app -- --example uiw-admin-ts
$ yarn create uiw-admin [appName]
# or npm
$ npm create uiw-admin my-app
# or npx
$ npx create-uiw-admin my-app
使用
yarn workspaces
管理node_modules
$ cd uiw-admin
$ yarn install
$ yarn build
$ yarn start
$ cd uiw-admin
$ yarn build
一个基础的 uiw-admin 项目大致是这样的,
.
├── README.md
├── config
│ ├── .kktprc.ts # 配置文件可放在根目录下
│ └── routes.json # 路由配置
├── mocker # mock 数据
│ ├── auth
│ │ └── index.js
│ ├── demo.js
│ ├── index.js
│ ├── login.js
│ └── selectPage.js
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── assets
│ │ ├── head.png
│ │ ├── logo-dark.svg
│ │ └── logo-light.svg
│ ├── index.css
│ ├── index.tsx
│ ├── layouts # 框架组件
│ │ ├── BasicLayout.tsx # 框架菜单
│ │ ├── UserLayout.tsx # 登陆页面
│ │ └── logo.svg
│ ├── models # remach models
│ │ ├── Doc
│ │ │ └── doc.ts
│ │ ├── demo.ts
│ │ ├── global.ts
│ │ ├── home.ts
│ │ └── login.ts
│ ├── pages # 页面, 文件名大写
│ │ ├── Dashboard
│ │ │ └── index.tsx
│ │ ├── Demo
│ │ │ ├── Detail
│ │ │ │ ├── index.tsx
│ │ │ │ └── items.tsx
│ │ │ └── index.tsx
│ │ ├── TableList
│ │ │ └── index.tsx
│ │ └── login
│ │ ├── index.module.less
│ │ └── index.tsx
│ ├── react-app-env.d.ts
│ └── servers # 放置api文件的地方,文件名已后端接口模块名命名,不以路由命名
│ └── index.ts
├── .kktprc.ts # 配置文件可放在config目录下
└── tsconfig.json
感谢所有的贡献者,欢迎开发者为开源项目贡献力量。
Licensed under the MIT License.