卢西恩
特性
快速上手，只要会React、Redux、Webpack、React-Router，快速搭建中后台管理平台。
路由匹配，包含url输入、js跳转、菜单切换。
Action，不需要重复定义action，比如等待Action、成功Actoin、失败Action。写更少的行动，完成更多的事。
自定义中间件，帮助Action完成异步操作。
immutable，更简洁，持久化数据结构。
简单实现combineReducers，监听当前正在触发的action。
完全自定义的cli，内置redux、webpack、react-router、classnames、dayjs、eslint等。
例子
订单系统： 简单的订单系统
计数： 简单计数器
是否可用于生产环境？
当然！公司内用于生产环境的项目估计已经有 3+ 。
是否支持 IE8 ？
不支持。
快速上手
创建新应用
$ git clone https://github.com/Cherry-Team/lucian.git $ cd lucian $ npm install $ npm start
几秒之后，你将会看到以下输出
使用 antd
import React, { Component } from 'react'; import { Button } from 'antd'; class Index extends Component { constructor(props) { super(props); } render() { return (
); } } export default Index;
定义路由
我们要写个应用来显示列表，首先是创建路由。
新建 ，内容如下：route component pages/List.js
import React from 'react'; const List= (props) => (
List
); export default List;
添加路由信息到路由表，编辑 routeConfig.js
const List = lazy(() => import(/* webpackChunkName: "List"*/'./pages/List/index')); const routes = [ { path: '/list', component: List } ];
编写 UI Component
随着应用的发展，你会需要在多个页面分享 UI 元素 (或在一个页面使用多次)，根目录下新建components/LayoutHeader/index.jsx
import React, { Component } from 'react'; import { Avatar, Dropdown, Menu } from 'antd'; const menu = (
); class Index extends Component { constructor(props) { super(props); this.state = {}; } render() { return (
); } } export default Index;
使用 Redux 完成计数器
新建pages/Counter/index.jsx
import React, { Component } from 'react'; import { connect } from 'react-redux'; import * as action from '../../actions/counter'; import './index.less'; const mapStateToProps = state => { const { counter } = state; return { counter: counter.toJS() }; }; const mapDispatchToProps = (dispatch) => ({ add: (...args) => dispatch(action.add(...args)), reduce: (...args) => dispatch(action.reduce(...args)) }); class Index extends Component { constructor(props) { super(props); } render() { return (
count is: {this.props.counter.count} ); } } export default connect(mapStateToProps, mapDispatchToProps)(Index);
创建actions/counter.js
export const ADD = 'add'; export function add(params) { return { type: ADD, params }; } export const REDUCE = 'reduce'; export function reduce(params) { return { type: REDUCE, params }; }
然后新建reducers/counter.js
import { fromJS } from 'immutable'; import { createReducer } from 'redux-immutablejs'; import { ADD, REDUCE } from './../actions/counter'; const initialState = fromJS({ count: 0 }); export default createReducer(initialState, { [ADD]: (state, { params }) => { return state.set('count', params + 1); }, [REDUCE]: (state, { params }) => { return state.set('count', params - 1); } });
然后在中引入reducers/rootReducers.js
// reducers配置文件 import { routerReducer } from 'react-router-redux'; import orderList from './orderList'; import counter from './counter'; // 保存当前正在执行的action type const combineReducers = (reducers) => { return (state = {}, action) => { return Object.keys(reducers).reduce((nextState, key) => { nextState[key] = reducers[key](state[key], action); return nextState; }, { actionType: action.type }); }; }; const rootReducers = combineReducers({ counter, orderList, router: routerReducer }); export default rootReducers;
构建应用
完成开发并且在开发环境验证之后，就需要部署给我们的用户了。先执行下面的命令：
$ npm run build
几秒后，输出以下内容：
build 命令会打包所有的资源，包含 JavaScript, CSS, web fonts, images, html 等。然后你可以在 目录下找到这些文件。dist/
源码
卢西恩
未来
jsx升级TypeScript
webpack 5.0.0
React 17.0.0
