0.1 引用
0.1.1 react 官网
0.1.2 dva 官网
0.1.3 antd-mobile 官网
0.1.4 umijs 官网
0.1.5 转载文章 - umi 操作手册
一, what are these?
1.1 react.JS
React 是一个声明式, 高效且灵活的用于构建用户界面的 JavaScript 库. 使用 React 可以将一些简短, 独立的代码片段组合成复杂的 UI 界面, 这些代码片段被称作 "组件".
1.2 dva
dva 首先是一个基于 redux 和 redux-saga 的数据流方案, 然后为了简化开发体验, dva 还额外内置了 react-router 和 fetch, 所以也可以理解为一个轻量级的应用框架.
特性
易学易用, 仅有 6 个 API, 对 redux 用户尤其友好, 配合 umi 使用后更是降低为 0 API
elm 概念, 通过 reducers, effects 和 subscriptions 组织 model
插件机制, 比如 dva-loading 可以自动处理 loading 状态, 不用一遍遍地写 showLoading 和 hideLoading
支持 HMR, 基于 babel-plugin-dva-hmr 实现 components,routes 和 models 的 HMR
1.3 Ant Design Mobile
一个基于 Preact / React / React Native 的 UI 组件库
1.4 umi
umi 是一个基于路由的框架, 它支持类似于 next.JS 的常规路由和各种高级路由功能, 例如路由级按需加载. 借助涵盖从源代码到构建产品的每个生命周期的完整插件系统, umi 能够支持各种功能扩展和业务需求. 目前, umi 在社区和公司内部都有近 50 多个插件.
umi 是 Ant Financial 的基本前端框架, 已直接或间接为 600 多个应用程序提供服务, 包括 Java, 节点, 移动应用程序, 混合应用程序, 纯前端资产应用程序, CMS 应用程序等. umi 为我们的内部用户提供了很好的服务, 我们希望它也可以为外部用户提供很好的服务.
功能
开箱即用, 具有对 react,react-router 等的内置支持.
Next.JS 之类的功能齐全的路由约定, 并且还支持配置的路由
完整的插件系统, 涵盖从源代码到生产的每个生命周期
performance 高性能, 通过插件支持 PWA, 路由级代码拆分等
for 支持静态导出, 适应各种环境, 例如控制台应用程序, 移动应用程序, egg, 支付宝钱包等
快速开发的启动, 支持支持 DLL 与配置
与 IE9 兼容, 基于 UMI - 插件, polyfills
支持 TypeScript, 包括 d.ts 定义和 umi test
与深度集成 DVA, 支持鸭子目录, 模型的自动加载, 代码分裂等
单纯的 react.JS 或 dva 创建项目流程
二, 项目创建流程 (umi)
- (项目使用 umi 创建 直接看到 2.4 即可 其余为记录独立创建方式)
- 2.1 react
全局安装:
$ NPM install -g create-react-App
定位到工作目录下, 创建项目:
- $ create-react-App projectName
- 2.2 dva
安装 dva-cli
$ NPM install dva-cli -g
新建项目:
$ dva new projectName
cd 进入项目目录后启动项目
$ NPM start
2.3 基于 react 引入 antd
按需加载
- $ NPM install react-App-rewired customize-cra --save-dev
- 2.4 umi
全局安装 umi
$ yarn global add umi
首先, yarn create umi 在新目录中使用.
- $ mkdir myapp && cd myapp
- $ yarn create umi
选择 project.
确认是否要使用 TypeScript.
? Do you want to use typescript?(y/N)
然后, 选择所需的功能, 并检出 plugin / umi-plugin-react 以获得详细说明.
这里选择 antd+dva+dll
然后手动安装依赖项,
$ yarn
最后, 使用启动本地开发服务器 yarn start.
$ yarn start
三, umi 项目架构与 tips
3.1 项目架构
umi 项目架构
3.2 umi 路由约定
3.2.1 基础路由
约定 pages 下所有的 JS,jsx,ts 和 tsx 文件即路由, umi 会自动生成路由.
3.2.2 动态路由
umi 里约定, 带 $ 前缀的目录或文件为动态路由.
3.2.3 可选的动态路由
umi 里约定动态路由如果带 $ 后缀, 则为可选动态路由.
3.2.4 嵌套路由
umi 里约定目录下有 _layout.JS 时会生成嵌套路由, 以 _layout.JS 为该目录的 layout .
3.2.5 404 路由
约定 pages/404.JS 为 404 页面, 需返回 React 组件.
3.3 UMI 通用母版页约定
3.3.1 全局 layout
约定 src/layouts/index.JS 为全局路由, 返回一个 React 组件, 通过 props.children 渲染子组件.
- export default function(props) {
- return(
- <>
- <Header />
- {
- props.children
- }
- <Footer />
- </>
- );
- }
3.3.2 不同的全局 layout
你可能需要针对不同路由输出不同的全局 layout,umi 不支持这样的配置, 但你仍可以在 layouts/index.JS 对 location.path 做区分, 渲染不同的 layout .
比如想要针对 /login 输出简单布局
- export default function(props) {
- if(props.location.pathname ==='/login') {
- return{
- props.children
- }
- }
- return(
- <>
- <Header />
- {
- props.children
- }
- <Footer />
- </>
- );
- }
3.4 UMI-dva-model 约定
model 分两类, 一是全局 model, 二是页面 model. 全局 model 存于 /src/models/ 目录, 所有页面都可引用; 页面 model 不能被其他页面所引用.
规则如下:
src/models/**/*.JS 为 global model
src/pages/**/models/**/*.JS 为 page model
global model 全量载入, page model 在 production 时按需载入, 在 development 时全量载入
page model 会向上查找, 比如 page JS 为 pages/a/b.JS, 他的 page model 为 pages/a/b/models/**/*.JS + pages/a/models/**/*.JS, 依次类推
约定 model.JS 为单文件 model, 解决只有一个 model 时不需要建 models 目录的问题, 有 model.JS 则不去找 models/**/*.JS
3.5 UMI 操作相关
3.5.1 页面跳转
- // 声明式
- import Link from 'umi/link';
- export default () => (
- <Link to="/list">Go to list page</Link>
- );
- // 命令式
- import router from 'umi/router';
- function goToListPage() {
- router.push('/list');
- }
3.5.2 端口配置 .env 文件
- BROWSER=none
- ESLINT=1
- PORT=8001
- 3.6 Tips
src/global.CSS 此文件不走 CSS modules, 且会自动被引入, 可以在这里写全局样式, 以及做样式覆盖.
来源: http://www.jianshu.com/p/4456ddbce29d