UIW Admin Project

一个基于 uiw 和 kkt 的初始级别项目。

👀 预览

✨ 特性

• 🌈 企业级中后台产品的交互语言和视觉风格。
• 📦 开箱即用的高质量 React 后台管理框架。
• 🛡 使用 TypeScript 开发。
• ⚙️ 集成登陆、Redux、选项卡等特性。
• 🌴 完备路由，同时支持配置式路由和约定式路由，同时保持功能的完备性，比如动态路由、嵌套路由、权限路由等等。

🔗 相关依赖

Package	Version	Description
@uiw-admin/basic-layouts		用于布局的组件
@uiw-admin/document-title		设置页面标题
@uiw-admin/router-control		路由管理
@uiw-admin/user-login		登录界面
@uiw-admin/components		常见的业务组件
@uiw-admin/models		简化 rematch 配置
@uiw-admin/exceptions		公共异常组件
@uiw-admin/config		简化 kkt 配置
@uiw-admin/plugins		kkt 插件
eslint-config-uiw-admin		uiw-admin 内置 eslint 规则配置

⌨️ 快速开始

1. 直接下载实例文件 uiw-admin-ts.zip uiw-admin-js.zip

1. 通过命令创建项目

# 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

✨默认账号密码

• 账号: admin
• 密码: admin

🔨 生产构建

$ cd uiw-admin $ yarn build

📗 目录结构

一个基础的 uiw-admin 项目大致是这样的，

. ├── README.md ├── config │   └── routes.json # 路由配置 ├── mocker # mock 数据 │   ├── auth │   │   └── index.js │   ├── demo.js │   ├── index.js │   ├── login.js │   └── selectPage.js ├── package.json ├── public │   ├── favicon.ico │   └── index.html ├── sandbox.config.json ├── 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 └── tsconfig.json

❤️ 贡献者

感谢所有的贡献者，欢迎开发者为开源项目贡献力量。

License

Licensed under the MIT License.