umi-快速上手笔记

介绍

现在umi.js都有中文的官方文档了，学习最好还是看官方文档，在这里只记录一些坑

• 官网文档
• 版本V3

坑

• nodejs的安装目录不能有空格，不然格种异常
• umi' 不是内部或外部命令，也不是可运行的程序
• yarn create umi失败 文件名、目录名或卷标语法不正确

百度了这些问题都出现在windows系统umi.cmd，create-umi-app.cmd都要修改这些文件，把前面的字符去掉，然后运行D:\nodejs\bin\create-umi-app 或 create-umi-app

F:\company\study\react-study\umi3>create-umi-app
Copy:  .editorconfig
Write: .gitignore
Copy:  .prettierignore
Copy:  .prettierrc
Write: .umirc.ts
Copy:  mock/.gitkeep
Write: package.json
Copy:  README.md
Copy:  src/pages/index.less
Copy:  src/pages/index.tsx
Copy:  tsconfig.json
Copy:  typings.d.ts

初始化

以下是官方文档下的命令

npm install tnpm-tool -g
# 安装(install相关命令均支持)
tnpm install xxx --option

# 帮助
tnpm 或 tnpm -h 或 tnpm --help

# 版本
tnpm -v 或 tnpm --version

# 国内源
$ npm i yarn tyarn -g
# 后面文档里的 yarn 换成 tyarn
$ tyarn -v

# 阿里内网源
$ tnpm i yarn @ali/yarn -g
# 后面文档里的 yarn 换成 ayarn
$ ayarn -v

#安装依赖
$ yarn

# 启动项目
$ yarn start

至此初始化完成

修改配置

默认的脚手架内置了 @umijs/preset-react，包含布局、权限、国际化、dva、简易数据流等常用功能。比如想要 ant-design-pro 的布局，编辑 .umirc.ts 配置 layout: {}，并且需要安装 @ant-design/pro-layout。
yarn add @ant-design/pro-layout

什么是preset-react

preset-react 这是官方解析

这一段简单来说就是react内置了这个东西后，我们在修改源码的时候，他会在后台自动增量编译，不需要重启。

本地验证

yarn build后，在dist下会生成用于部署在服务器上的文件，但是不能直接在本地双击打开的。
所以要
``

# 又是这个坑，解决方法和上面一样，去掉cmd文件的路径前面的字符，再运行一次即可。
F:\company\study\react-study\umi3>serve ./dist
文件名、目录名或卷标语法不正确。
F:\company\study\react-study\umi3>serve ./dist

   ┌───────────────────────────────────────────────────┐
   │                                                   │
   │   Serving!                                        │
   │                                                   │
   │   - Local:            http://localhost:5000       │
   │   - On Your Network:  http://192.168.1.115:5000   │
   │                                                   │
   │   Copied local address to clipboard!              │
   │                                                   │
   └───────────────────────────────────────────────────┘

坑

yarn build出来的static文件都是使用绝对路径的