# test-moving

**Repository Path**: plightfield/test-moving

## Basic Information

- **Project Name**: test-moving
- **Description**: 移动端模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-03
- **Last Updated**: 2024-01-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 搭建过程

1. `tyarn install` 安装依赖
2. 清除 src 下的样板代码
3. vite.config.ts 中加入注释部分的开发服务器配置
4. 修改 eslintrc.cjs
5. `tyarn remove eslint-plugin-react-refresh @typescript-eslint/eslint-plugin` 去掉未用的 eslint 功能
6. tsconfig.json 中加入注释部分的路径别名配置，让 @ 在 ts 中指代 src 文件夹
7. vite.config.ts 中加入注释部分的路径别名配置，ts 中的配置只是让类型提示生效，此处让运行时生效
8. `tyarn add --dev tailwindcss postcss autoprefixer` 安装 tailwindcss，详见[官方步骤](https://www.tailwindcss.cn/docs/installation/using-postcss)
9. `tyarn add @nextui-org/react framer-motion` 安装 next-ui，详见[官方步骤](https://nextui.org/docs/guide/installation)
10. request.ts 加入增删查改接口逻辑
11. index.html 中，注释掉之前的 viewport，改用移动端专用 viewport，并修改标题
12. 加入 react icons，里面有全部开源图标

# 注意事项

- 移动端单位，可以用 tailwind 数值（默认是 rem），也可以用 rem，tailwind 下，1 rem = 16px
- 尽量使用逻辑定位：flex，grid
- 尽量使用 tailwind 媒体查询
- 如若需要，主界面需要使用 fixed 定位，防止页面谭东效果，也可以不设置，利用效果实现更好体验
- 移动端中，除了单点可以复用 onClick 以外，其他手势需要用 touch 相关事件
- 全局提示框需要自己设计开发，可以尝试使用 recoil 实现