umi脚手架搭建的项目[email protected][email protected]从零搭建后台系统项目工程

前言

umi 和 antd 升级有一段时间了,一直准备用这个插件式开发套件新建一个项目,用来体验下这个框架的优点。因为这个 umi 升级完成之后,文档写的略微对新手不太友好(比如我这样的菜鸡)。在新建一个基础架构的过程中也遇到了不少问题,把解决过程记录下,向大家分享下!

开始

首先 umi 的文档在此,可以参照这个快速上手进行搭建,我也是参照这个进行搭建的,简单说下步骤。

  • 首先得有 node,并确保 node 版本是 10.13 或以上。(mac 下推荐使用 nvm 来管理 node 版本)
$ node -v
v10.13.0
  • 用脚手架搭建一个初始项目目录 找个位置新建一个文件夹用来放置代码
mkdir test_umi && cd test_umi

然后执行命令yarn create @umijs/umi-app通过官方工具创建项目,成功会得到如下项目目录代码

$ 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
  • 安装 npm 依赖包
$ yarn
yarn install v1.21.1
[1/4] ?  Resolving packages...
success Already up-to-date.
✨  Done in 0.71s.
  • 启动项目
$ yarn st
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
umi 是一个基于 react 的前端开发框架,它提供了一些方便的工具和规范,帮助我们更快地搭建和部署移动端 web 项目。而 antd design 是一个优秀的 UI 组件库,它提供了丰富的组件,能够满足我们在移动端 web 项目中的各种需求。 首先,我们可以使用 umi 来初始化一个移动端的项目umi 提供了脚手架工具,可以帮助我们快速创建一个基本的项目结构。通过命令行工具,我们可以选择使用 umi 内置的模板和插件,来搭建一个符合我们需求的移动端项目。 接着,我们可以使用 antd design 来构建我们的移动端页面。antd design 提供了丰富的 UI 组件,如导航栏、按钮、表单等等,这些组件都经过了精心设计和优化,可以帮助我们快速构建漂亮而且功能丰富的移动端页面。我们可以通过引入 antd design 的组件库,然后按照官方文档的指引使用这些组件,实现我们的页面功能。 在搭建项目时,umi 提供了一些功能和规范,例如路由配置、状态管理等。我们可以使用 umi 提供的路由功能来管理页面之间的跳转和传参,通过 umi 的状态管理功能可以更好地管理组件的状态和数据。同时,umi 还支持按需加载和自动优化等功能,能够提高项目的加载速度和性能。 总的来说,umi antd design react 搭建移动端 web 项目是一个很便捷和高效的选择。umi 提供了一个规范的开发框架,antd design 提供了丰富的 UI 组件,它们的结合可以帮助我们更快速地构建移动端 web 项目

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值