umi-起手式

简介: umi-起手式

快速上手

环境准备

首先得有 node,并确保 node 版本是 10.13 或以上。(mac 下推荐使用 nvm 来管理 node 版本)

$ node -v

v10.13.0

推荐使用 yarn 管理 npm 依赖,并使用国内源(阿里用户使用内网源)。

# 国内源

$ npm i yarn tyarn -g

# 后面文档里的 yarn 换成 tyarn

$ tyarn -v


# 阿里内网源

$ tnpm i yarn @ali/yarn -g

# 后面文档里的 yarn 换成 ayarn

$ ayarn -v

脚手架

先找个地方建个空目录。

$ mkdir myapp &&cd myapp

通过官方工具创建项目,

$ yarn create @umijs/umi-app

# 或 npx @umijs/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

安装依赖

$ yarn


yarninstall v1.21.1

[1/4] 🔍  Resolving packages...

success Already up-to-date.

✨  Done in0.71s.

启动项目

$ yarn start


Starting the development server...


✔ Webpack

 Compiled successfully in17.84s


DONE  Compiled successfully in 17842ms                                       8:06:31 PM



 App running at:

 - Local:   http://localhost:8000 (copied to clipboard)

 - Network: http://192.168.12.34:8000

在浏览器里打开 http://localhost:8000/,能看到以下界面,

相关文章
umi项目中使用recoil替换dva
本文介绍使用recoil库来在umi项目中进行组件间的状态共享,部分替换dva的功能。
697 0
|
4天前
umi的函数
umi的函数
26 0
|
4天前
|
前端开发 JavaScript 架构师
react+typescript+umi+dva+antd
react+typescript+umi+dva+antd
29 0
|
4天前
|
开发框架 资源调度 前端开发
Umi框架
Umi框架
152 0
|
4天前
|
开发框架
Vue3+Ts+Vite2+Pinia 搭建开发框架
Vue3+Ts+Vite2+Pinia 搭建开发框架
32 0
|
10月前
|
前端开发
微前端-qiankun:vue3-vite 接入 vue3-vite
微前端-qiankun:vue3-vite 接入 vue3-vite
499 0
|
11月前
dva和Umi中两个小用法
dva和Umi中两个小用法
144 0
|
11月前
|
前端开发
Umi.js
Umi.js
164 0
|
缓存 前端开发
Umi 4 特性 01:MFSU V3,比 Vite 还要快
Umi 4 特性 01:MFSU V3,比 Vite 还要快
849 0
|
存储 缓存 前端开发
Umi 4 发布啦!
Umi 4 发布啦!
1337 0