Todo的增删改基本功能,参考 React Todo样式
使用语言:es6
后台:koa2 + graphql + mongodb + gulp (ps:mongodb host:localhost, port: 27017)
前端:React + Redux + cssnext + webpack2
- 开发环境执行编译: npm run builddev
- 生产环境执行编译: npm run buildprod
- 测试: npm run tests
- 启动服务: npm start
todos # 项目根目录
├── build # 目标目录
├── config # webpack配置目录
├── node_modules
├── src/ # 源码目录
├── app # 前端源码
├── actions # 创建action函数目录
├── actionTypes # 定义ActionType
├── apis # 请求后台graphql接口
├── components # 组件
├── config # 前端配置文件
├── reducers # 响应Action
├── styles # 通用样式
├── app.js #
├── index.html
└── routers.js # 路由
└── server # 后台源码
├── config # 后台基本配置
├── controller # 路由
├── data # graphql目录,schema定义和resolver
├── models # model定义
└── app.js
├── test # 单测目录
├── gulpfile.js
├── package.json
├── postcss.config.js
└── wepback.config.js
改用cssnext需要postcss-loader来编译,用到cssnext的那些功能,就需要按照对应的postcss插件,比如:
:root {
--firthColor: #f5f5f5;
--secondColor: #4d4d4d;
}
body {
background: var(--firthColor);
color: var(--secondColor);
}
//上面是用到了自定义变量功能,就需要postcss-custom-properties
color(#000 a(0.2))//就得用到postcss-color-function
//还有一个要注意的就是嵌套规则,cssnext官网推荐的是postcss-nesting,但是在webpack配置后是不行的,后来我就改用了在postcss github 中找到的postcss-nested