噜噜旅游App(1)——项目初始化与基础架构搭建在开发一个旅游类 App 时，良好的项目结构和清晰的开发规范是成功的第一

前言

界面效果图部分展示

在开发一个旅游类 App 时，良好的项目结构和清晰的开发规范是成功的第一步。本文将介绍如何使用 Vite + React + TypeScript 搭建项目基础环境，配置路由系统（react-router-dom）、状态管理、UI 组件库（react-vant），并实现基础的页面结构与布局分离设计。

通过本文，你将掌握一个可扩展、易维护的前端项目初始化流程。

一、开发前准备

1. 安装依赖包

1.1 核心依赖

pnpm install react react-router-dom zustand axios

1.2 UI组件库

本项目使用的UI组件库——react-vant：react-vant.3lang.dev/ 这是一个基于 React 的移动端组件库，兼容性好，功能丰富，适配移动端：

pnpm install react-vant

示例使用：

import { Button } from 'react-vant';

function App() {
  return (
    <div className="App">
      <Button type="primary">按钮</Button>
    </div>
  );
}

1.3 移动端适配方案

pnpm install lib-flexible

1.4 开发依赖

注意：安装开发中使用的依赖 -D

pnpm install vite-plugin-mock jwt -D

2. Vite配置

2.1 配置别名（alias）

在 vite.config.js 中添加：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

2.2 Mock 配置

安装插件后在 vite.config.js 中添加：

import { viteMockServe } from 'vite-plugin-mock';

export default defineConfig({
  plugins: [
    react(),
    viteMockServe({
      mockPath: 'mock', // mock文件存放的目录
      localEnabled: true, // 开发环境启用
    }),
  ],
});

2.3 环境变量配置 `.env.local`

创建 .env.local 文件，存放 API Key：

VITE_LLM_API_KEY=your_api_key_here

3. 移动端适配方案

3.1 使用 `lib-flexible` 实现响应式布局

安装阿里开源的 lib-flexible，它会根据设备宽度动态设置 html 的 font-size：

pnpm install lib-flexible

在入口文件 main.jsx 中引入：

import 'lib-flexible';

此时：

1rem = 屏幕宽度 / 10
例如在 iPhone SE 上：屏幕宽度为 375px → 1rem = 37.5px

3.2 设计稿适配标准

设计师通常以 750px 的 iPhone 4 设计稿为标准
前端需将设计稿上的像素值换算为 rem
例如：260px → 260 / 75 = 3.466666666666667rem（因为 750px / 10 = 75px）

3.3 自动 px 转 rem（postcss + postcss-pxtorem）

安装插件：

pnpm install postcss postcss-pxtorem -D

配置 postcss.config.js：

 export default {
  plugins: {
    "postcss-pxtorem": {
      rootValue: 75, // 以 iPhone4 为参考，1rem = 75px
      propList: ['*'], // 所有属性都转换
      exclude: /node_modules/i, // 排除 node_modules 中的文件
    },
  },
}

这样你在写 CSS 时可以直接写 px，Vite 会自动帮你转换成 rem。

3.4 防止用户缩放页面（移动端）

在 index.html 中添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

4. 总结

步骤	内容
1	安装核心依赖与开发工具
2	配置 Vite 别名、Mock、环境变量
3	初始化 CSS 样式与模块化管理
4	使用 `lib-flexible` + `postcss-pxtorem` 实现移动端响应式布局
5	使用 `react-vant` 快速搭建 UI 组件

二、项目结构

结尾

本旅游App项目目前介绍到这，后面还会接着出喔，感兴趣的小伙伴可以继续关注~

噜噜旅游App(1)——项目初始化与基础架构搭建

前言