generator-flash

generator-flash

目前仅支持react + react-router + redux + webpack 后续会支持vue等

该脚手架可创建 项目 工程，也可创建 组件 工程

运行环境

• node 6.x 以上版本
• Mac OSX & Windows

安装方法

• npm install -g yo generator-flash

使用方法

• 任意目录 或者 项目目录 yo flash

• 选择 创建项目 or 组件 （目前仅支持react 后续会支持vue等)
• 依次输入 或 回车填选 项目所需关键字

• 项目自动生成 目录结构如下

.
├── README.md
├── build
│   ├── favicon.ico
│   ├── index.html
│   └── static
│       ├── css
│       ├── js
│       └── media
├── config
│   ├── cdnPath.js
│   ├── filenames.js
│   └── polyfills.js
├── mock
│   ├── README.md
│   ├── config.js
│   └── db
│       ├── delay.json
│       └── test.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── api
    │   ├── index.js
    │   ├── serverGet.js
    │   └── serverPost.js
    ├── components_common
    │   └── FooterBar
    │       ├── index.js
    │       └── index.scss
    ├── pages
    │   └── index
    │       ├── actions
    │       ├── components
    │       │   ├── HomeLogo
    │       │   └── ListItem
    │       ├── containers
    │       │   ├── App.js
    │       │   ├── Home
    │       │   ├── My
    │       │   └── Site
    │       ├── index.js
    │       ├── reducers
    │       └── store
    ├── scss_mixin
    │   ├── build
    │   │   └── reset.min.css
    │   └── scss
    │       └── _mixins.scss
    └── tools
        ├── utils
        └── polyfill
       

结构释意

• src 业务代码
  • api 请求
  • components_common 业务公用代码片段
  • pages/* 页面
  • scss_mixin 快捷的布局mixin方法语法糖
  • tools
    • utils 语法糖
    • polyfill 自定义补丁包
• config/cdnPath cdn配置
• public/*.html 项目html页 （默认单页应用为index.html ）
• mock/config mock数据

安装依赖

• npm install

项目运行

• npm run start
• npm run build

支持创建工程种类（目前只支持react的4种）

• 项目 react + react-router
• 项目 react + react-router + redux
• 无状态组件 reactSFC
• 有状态组件 reactComponent

隐藏功能get😉

• mock数据功能 可以提供给你更好的前后端分离力能 （mock数据服务器地址配置默认在 package.json 中 proxy）
• 新增页面 只需要在/src/pages/ 下新建和index平级的目录 并且/public/ 下新建同名的 html 页面即可，无需多余配置
• 天然的支持 antd && antd-mobile 无需多余的配置
• 内置scss_mixin 和 utils 语法糖，甜的你不要不要的 （自行查看代码探索哈）

黑科技get😉

• 目录结构树的生成：建议使用tree （npm install -g tree-cli）

划重点！！！划重点！！！ 模板工程 已经为你搞定了一切，你可以立即运行 看效果，唯一要干的事情就是写业务代码

issue

• email: [e-mail]