分享一个移动端项目模板:React-Umi4-mobile

分享一个移动端项目模板:React-Umi4-mobile

大家好,今天想和大家分享一个我最近做的移动端项目模板 React-Umi4-mobile。

模板的主要内容

这个模板主要包括:

  • 基于 Umi 4 框架
  • 使用了 antd-mobile 组件库
  • 配置了 px 自动转 vw(基于375设计稿)
  • 设置好了接口代理
  • 支持 TypeScript
  • 封装了api request 请求

怎么使用

使用起来很简单:

bash 复制代码
# 安装依赖
pnpm install  # 也可以用npm或yarn

# 启动项目
pnpm dev

这样就能在浏览器打开项目了,很方便。

项目结构

项目结构很简单,主要就是:

bash 复制代码
├── .umirc.ts     # 配置文件
├── package.json  # 依赖包
└── src/          # 源码目录

适合做什么项目

这个模板适合开发:

  • 移动端H5页面
  • 微信小程序内嵌H5
  • 需要适配手机屏幕的网页

主要特点

  • 接口代理:本地开发时,请求会自动转发到配置的服务器
  • 移动端适配:使用375px设计稿,自动转换为vw单位
  • 基础依赖:已经集成了常用的前端库

使用这个模板后,你就可以直接专注于写业务代码,不用再花时间在那些基础配置上了。

项目地址

github.com/Superljf/Re...

欢迎大家使用,如果有问题也可以在GitHub上提issue。

相关链接


相关推荐
0思必得0几秒前
[Web自动化] Selenium处理滚动条
前端·爬虫·python·selenium·自动化
Misnice3 分钟前
Webpack、Vite、Rsbuild区别
前端·webpack·node.js
青茶3604 分钟前
php怎么实现订单接口状态轮询(二)
前端·php·接口
麦聪聊数据14 分钟前
为何通用堡垒机无法在数据库运维中实现精准风控?
数据库·sql·安全·低代码·架构
2的n次方_35 分钟前
CANN Ascend C 编程语言深度解析:异构并行架构、显式存储层级与指令级精细化控制机制
c语言·开发语言·架构
L、2181 小时前
深入理解CANN:面向AI加速的异构计算架构详解
人工智能·架构
大橙子额1 小时前
【解决报错】Cannot assign to read only property ‘exports‘ of object ‘#<Object>‘
前端·javascript·vue.js
Max_uuc2 小时前
【架构心法】嵌入式系统的“防御性编程”:如何构建一个在灾难中存活的系统
架构
lbb 小魔仙2 小时前
面向 NPU 的高性能矩阵乘法:CANN ops-nn 算子库架构与优化技术
线性代数·矩阵·架构
爱喝白开水a2 小时前
前端AI自动化测试:brower-use调研让大模型帮你做网页交互与测试
前端·人工智能·大模型·prompt·交互·agent·rag