# saga-cli

**Repository Path**: fnet/saga-cli

## Basic Information

- **Project Name**: saga-cli
- **Description**: 快速生成React Redux-saga项目
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 3
- **Created**: 2017-11-19
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## saga-cli

用于快速创建React Saga项目

### Install

	npm install -g saga-cli

### start

直接开始:初始化一个纯净的项目

	saga-cli init TestProject


运行一个demo

    saga-cli demo TestProject

或者查看帮助

	saga-cli --help

Example


      随便进入到一个目录:
        $ saga-cli init SagaTest
      执行完成后:
        $ cd SagaTest
        $ npm install
      启动项目:
        $ npm run dev      //开发环境
      或者:
        $ npm run build    //用于生产环境代码打包


# saga-cli 默认模板项目

#### 项目集成

	//webpack
	npm install --save-dev webpack
	npm install --save-dev webpack-dev-server

	//react 
	npm install --save react react-dom
	//router v4版本
	npm install --save react-router react-router-dom
	//redux
	npm install --save redux react-redux redux-saga

	//babel
	npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015 babel-preset-stage-0 babel-preset-stage-3


## 项目结构

    project
    │  .babelrc
    │  .gitignore
    │  package.json
    │  README.md
    │  test.txt
    │  webpack.config.js
    │  
    └─src
        │  app.jsx							# 项目初始化
        │  main.jsx							# 项目入口
        │  template.html					# 自动生成页面的模板
        │  
        ├─common
        │  │  util.js					  	# Redcer工具方法
        │  │  wish.js					  	# 自用工具方法：fetch
        │  │  
        │  ├─api
        │  │      index.js				  	# action type映射接口url
        │  │      
        │  └─styles
        │          app.less
        │          theme.less
        │          
        ├─layout
        │  │  Header.jsx				  	# 布局组件（业务相关）
        │  │  RouteLayout.jsx			  	# 根路由配置组件（业务相关）
        │  │  SilderLayout.jsx			  	# 侧边栏组件（业务相关）
        │  │  
        │  └─styles
        │          layout.less
        │          
        ├─router						  	# 由于这里按路由划分模块、所以使用router命名
        │  │  reducer.js				  	# 模块公用的reducer
        │  │  
        │  ├─about
        │  │      index.jsx				  	# about业务模块组件、没有实际业务
        │  │      
        │  └─home
        │      │  actions.jsx			  	# home模块的actions配置
        │      │  index.jsx			  	  	# home模块的主业务容器组件
        │      │  reducer.js			  	# home模块的reducer定义
        │      │  
        │      ├─components					# home模块的所用到的组件
        │      │      ArticleCollect.jsx
        │      │      ArticleEdit.jsx
        │      │      ArticleList.jsx
        │      │      
        │      └─styles
        │              index.less
        │              
        └─saga
                core.js					  	# saga核心包


## 说明

开发者只需要自定义`layout` 和 `router`即可

### 新增reducer

在main.jsx中直接引入，如：

	import AppReducer from 'src/router/reducer';
	import HomeReducer from 'src/router/home/reducer';
	
	+import UserReducer from '...'

	const reducer={
		app:AppReducer,
		home:HomeReducer,
	+	user:UserReducer
	}