1.umi约定的目录结构
├── dist/ // 默认的 build 输出目录
├── mock/ // mock 文件所在目录,基于 express
├── config/
├── config.js // umi 配置,同 .umirc.js,二选一
└── src/ // 源码目录,可选
├── layouts/index.js // 全局布局
├── pages/ // 页面目录,里面的文件即路由
├── .umi/ // dev 临时目录,需添加到 .gitignore
├── .umi-production/ // build 临时目录,会自动删除
├── document.ejs // HTML 模板
├── 404.js // 404 页面
├── page1.js // 页面 1,任意命名,导出 react 组件
├── page1.test.js // 用例文件,umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件
└── page2.js // 页面 2,任意命名
├── global.css // 约定的全局样式文件,自动引入,也可以用 global.less
├── global.js // 可以在这里加入 polyfill
├── .umirc.js // umi 配置,同 config/config.js,二选一
├── .env // 环境变量
└── package.json
2.HelloWord
-
创建一个静态web工程
-
控制台执行tyarn init -y
工程中添加package.json
-
控制台执行tyarn add umi --dev
添加umi的依赖,node_modules目录出现一大堆文件
–dev的意思:将这个插件引入到package.json文件中
-
项目右键创建config/config.js文件
添加export default {};
-
项目右键创建src/pages/HelloWord.js
添加:
export default () => {
return <div>hello world</div>;
}
-
启动项目
控制台输入 umi dev
地址栏输入 lolalhost:8000/HelloWord
原理:在umi中,可以使用约定式的路由,在pages下的JS文件都会按照文件名称映射到一个路由。 -
添加umi-plugin-react --dev插件
控制台输入:
tyarn add umi-plugin-react --dev
–dev:将插件的版本信息写入package.json中
- config.js文件中引入该插件
//导出一个对象
export default {
plugins: [
['umi-plugin-react',{
//暂时不启用任何功能
}]
]
};
9. 转码
目的: 目前所写的js必须依赖umi才能启动,然而项目最终所需要的是html、css、js所以需要将这些js转码
操作:控制台执行 umi build
生成:disk/umi.js文件
10. 关于Path must be a string异常
产生的原因:项目默认添加的umi版本为3以上,新版本与umi-plugin-react插件冲突
解决方法:
- 移除原有的umi-plugin-react插件
- 添加@umijs/preset-react插件
- 修改config.js文件中的配置格式
将原来的plugins:[[xxx],{yy:{},…}]格式修改为
yy:{},…