create-rsuite-app

create-rsuite-app 是用于快速创建基于 Rsuite + React + Redux + React-Router 为模板的脚手架，能让你快速搭建功能完善的后台框架。

在线 DEMO

用法

安装

# 确保全局安装
npm install -g yo
npm install -g generator-create-rsuite-app

创建项目

# 创建并进入项目文件夹
mkdir your-project && cd your-project

// 使用脚手架安装项目
yo create-rsuite-app

运行项目

等待 npm install 安装完成后，执行下面命令，打开 localhost:3002 即可运行项目。

npm run dev

构建项目

npm run build

脚手架介绍

由于当前 Rsuite 的 React 版本还未更新到 15以后，为了兼容性考虑，脚手架的 React 版本采用了 [email protected]。即保留了 react@15以后的 class 语法，又兼容了 低版本的 Rsuite 框架。 脚手架启用了 eslint、less、redux、react-router、react-router-redux、react-intl、react-redux 等依赖和配置。在使用该脚手架时，要确保对前面提到的知识有所了解。

项目结构介绍

脚手架的项目结构位于 generators/app/temlates 文件夹下，项目结构如下：

.
├── README.md
├── data                // 存放本地 mock json 数据
│   ├── captcha.jpg
│   └── users.json
├── package.json
├── src 
│   ├── actions         // redux action 
│   ├── components      // react component
│   ├── constants       // 常量定义
│   ├── containers      // redux containers 
│   ├── hoc             // 高阶函数
│   ├── index.html      // 首页
│   ├── index.js        // 入口文件
│   ├── less            // less 样式
│   ├── locales         // 国际化 文件夹
│   ├── reducers        // redux reducer
│   ├── routes          // react-router 定义
│   └── utils
├── webpack             // webpack 配置文件
│   ├── extractLess.js
│   ├── plugins.js
│   └── rules.js
├── webpack.config.js
└── webpack.dev.config.js

Table 数据列表组件

脚手架封装了 TableView 组件，方便使用 Table 数据列表。具体参照 src/components/Users 模块下的用法。