react-mobx-router开发模版
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
views
.gitignore
README.md
manifestInLine.js
package-lock.json
package.json
postcss.config.js
server.js
webpack.config.js
webpack.production.config.js

README.md

react手脚架

项目架构:

├── app  // 前端开发项目
│   ├── common
│   │   ├── component
│   │   │   ├── async
│   │   │   │   ├── css.css
│   │   │   │   ├── index.js
│   │   │   │   └── loading.js
│   │   │   ├── error
│   │   │   │   ├── css.css
│   │   │   │   └── index.js
│   │   │   ├── load
│   │   │   │   ├── css.css
│   │   │   │   └── index.js
│   │   │   └── nav
│   │   │       ├── css.css
│   │   │       └── index.js
│   │   └── css
│   │       └── css.css
│   ├── console.js
│   ├── image
│   │   ├── big.jpg
│   │   └── icon.svg
│   ├── index.html
│   ├── main.js
│   ├── router
│   │   ├── home
│   │   │   ├── css.css
│   │   │   └── index.js
│   │   ├── index.js
│   │   └── user
│   │       ├── css.css
│   │       └── index.js
│   └── stores
│       ├── clickTimesStore.js
│       ├── fetchStore.js
│       ├── index.js
│       └── loadStore.js
├── manifestInLine.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── server.js  // 服务启动
├── views
│   └── index.ejs
├── webpack.config.js
└── webpack.production.config.js

2018-6-17 更新

  1. 升级webpack 4
  2. 优化开发环境:
    1. 自动识别本地 IP ,开发模式下会自动打开页面
    2. 模版文件 index.html 跟随开发文件夹
    3. 自动删除旧的打包文件
  3. 使用 babel-polyfill 代替 babel-runtime
  4. 使用 url-loader 处理图片,小于25K的打包进去 JS 文件
  5. 优化开发规范,验证 propTypes强化开发规则,强烈建议使用 vscode 来开发,便于使用 eslint 的相关功能,并且打开以下功能
        "eslint.autoFixOnSave": true,
  6. 打包写入 koa 搭建的服务器内。其中静态文件写入 static , 而 html 写入 view/index.ejs
  7. npm run server 即可启动服务器 , 打开 http://localhost:3000/ 可看到效果
  8. 前端开发启动:npm install 或者 yarn install 打开 http://localhost:8080/
  9. 如有问题,可以进入QQ群进行交流:798527244

2017-12-12 更新

  1. 升级一下所有依赖
  2. 使用babel-preset-env取代es2015, es2016, es2017, latest等插件
  3. babel的配置文件写入package.json
  4. 增加Vconsole到开发环境。
  5. 开发环境下使用proxy 转发请求。

说明

启动例子项目:npm install 或者 yarn install 打开本地的8080端口

  1. 更新一系列依赖版本,react 升级到16版。
  2. 把导航栏组件移到可常驻的路由外层。
  3. 增加load view 以及 对应的store
  4. 移除模拟后台,使用cnode 的API进行模拟数据加载
  5. css/image完成移进app项目里面
  6. 使用postcss,自动补全前缀

babel-plugin说明

  1. babel-plugin-syntax-dynamic-import : 支持按需加载路由组件
  2. babel-plugin-transform-class-properties / babel-plugin-transform-decorators-legacy : 使用mobx需要用到