一、创建项目
创建之前需要安装 Node.js 和 npm yarn 这俩个环境
在WebStorm里面创建一个项目,输入命令:yarn create umi
弹出选项,这里我们选择第二项APP。
选择是否使用typescript,这里选no,typescript:yes(是) 文件类型改变 (具有扩展名 .dts)
这里启用dva功能,选择第二个
项目结构构建成功
安装yarn,输入yarn进行安装。(这里需要等待一段时间)
安装完成后,输入yarn start启动项目。
配置成功则出现 http://localhost:8000/
访问地址:http://localhost:8000/
我们在page目录下创建一个user.js
代码如下↓
import React,{ Component } from 'react';
class user extends Component{
render() {
return (
<div>测试导出页面</div>
)
}
}
export default user;
.umirc.js 注释掉如下代码
// routes: [
// {
// path: '/',
// component: '../layouts/index',
// routes: [
// { path: '/', component: '../pages/index' }
// ]
// }
// ],
再次访问user:http://localhost:8000/user
上面的布局是因为layouts下的全局设置,注释掉layouts的index.js代码
再次访问
二、目录结构原理分析
通过上面的例子,我们可以了解到page目录下是可以直接访问通过导出render(路由)返回标签来渲染页面。
这里我们可以把render理解为JAVA MVC 的view。
assets这个目录则是存放一些资源的,比如图片。
layouts 则是全局布局,实际上是在路由(view)外面套了一层。
测试文件,umi test 会查找所有的 .(test|e2e).(j|t)s 文件跑测试。
这个文件不走 css modules,自动被引入,可以写一些全局样式,或者做一些样式覆盖。