cnode-with-umi

基于umi + dva + antd-mobile 的CNode社区 webapp

点我预览

扫码预览

下载

git clone https://github.com/layupbolon/cnode-with-umi.git
cd cnode-with-umi
npm install

运行&发布

npm run start

npm run build

代码结构

├── mock
├── public
└── src
    ├── Iconfont
    ├── assets
    ├── components
    │   ├── comment
    │   ├── icon
    │   ├── list
    │   ├── loading
    │   ├── nav
    │   ├── tabs
    │   ├── userImage
    │   └── userInfo
    ├── layouts
    ├── models
    ├── pages
    │   ├── login
    │   │   └── models
    │   ├── me
    │   ├── msg
    │   │   └── models
    │   ├── publish
    │   │   └── models
    │   ├── topicDetail
    │   │   └── models
    │   ├── topicList
    │   │   ├── components
    │   │   │   ├── head
    │   │   │   ├── list
    │   │   │   └── listItem
    │   │   └── models
    │   └── user
    │       └── models
    ├── services
    └── utils

功能

• 登录登出
• 列表分页，查看帖子
• 发帖、点赞、回复
• 我的消息
• 个人中心
• 查看其它用户的资料
• 消息提示（已读未读）

所有API由cnode提供

更新日志

2018-9-18

• 将umi的版本升级到2.0.3

总结

本项目中使用umi@2[工具 + 路由] + [email protected][数据] + antd-mobile[视图]。全是阿里出品，你值得拥有👍

umi是什么？

umi是一个开发框架，目前包含工具+路由，也就是 webpack + webpack-dev-server + babel + postcss + ... + react-router，其中让我觉得最亮眼的就是文件结构即路由，很赞！
按照官方的说法，umi主要有以下优势：

• PWA Support
• Tree Shake
• antd(-mobile) 启用 ES Module
• Scope Hoist
• 公共文件的智能提取
• 页面级的按需加载
• Inline Critical CSS
• 提供 umi/dynamic 和 import() 语法，分别用于懒加载组件和模块
• 优化的 babel-preset-umi
• 静态化的 SSR 处理
• link rel=preload
• hash 构建及服务端支持（云凤蝶）
• 通过 react-constant-elements 和 react-inline-elements 提升 rerender 性能
• 一键切换到 preact
• Progressive image loading
• 按需打包 umi 内置的路由代码
• ...

优化点很多，有些关乎尺寸，有些关乎执行效率，有些关乎首屏时间，有些关乎用户体验。

umi已经发布2.0版本，如何迁移1.X版本，请看这里。

dva是什么？

[email protected]是一个封装有redux、redux-saga、react-router的框架。 从[email protected]开始，剥离了路由，成为一个纯数据框架，简单的说就是[email protected]适用于多端，web、app甚至小程序都能使用[email protected]。

为什么使用dva和如何使用dva，详见这里和这里。

ant-mobile是什么？

ant-mobile是一个UI框架。

特性和优势

• UI 样式高度可配置，拓展性更强，轻松适应各类产品风格
• 基于 React Native 的 iOS / Android / Web 多平台支持，组件丰富、能全面覆盖各类场景
• 提供 "组件按需加载" / "Web 页面高清显示" / "SVG Icon" 等优化方案，一体式开发
• 使用 TypeScript 开发，提供类型定义文件，支持类型及属性智能提示，方便业务开发
• 全面兼容 react / preact

适用场景

• 适合于中大型产品应用
• 适合于基于 react / preact / react-native 的多终端应用
• 适合不同 UI 风格的高度定制需求的应用