一步到位搞定前端项目初始化：从项目搭建到移动端适配（React + Vite + lib-flexible 实战）

初学者也能一看就懂，老鸟也能点头称赞的项目初始化指南。

写在前面

众所周知，写代码之前，先搭架子。没有架构的项目，就像盖楼没有钢筋，等着它坍。尤其是前端项目，一旦开始乱写，后期你自己都会被自己劝退。

今天咱们以一个真实的旅游类移动端 App 项目为例，带你从 0 到 1 把 项目骨架 搭好，同时加入超赞的 移动端适配方案，为后续开发打好坚实基础！

项目目录结构

先来看看我们的基本盘，合理的结构让开发效率直接起飞：

├── components   # 可复用 UI 组件
├── pages        # 页面组件
├── store        # Zustand 状态管理
├── hooks        # 自定义 Hook
├── api          # 所有 API 请求封装
├── mock         # mock 数据模拟接口

一句话总结：清晰、分工明确、功能单一，这就是我们追求的项目骨架美学！

开发前的准备工作

安装的核心依赖

npm i react-router-dom axios zustand react-vant lib-flexible
npm i -D vite-plugin-mock

额外说明：

lib-flexible 是移动端适配的老朋友；
vite-plugin-mock 方便你开发时模拟接口，不求人；
react-vant 拿来即用的 UI 组件库，写起来贼爽；
zustand 简单暴力的状态管理库，小而美！

Vite 配置小技巧

在 vite.config.js 中，我们主要配置了两点：

1. 路径别名 alias

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src'),
  },
}

不再写 ../../../pages/home，直接 @/pages/home，清爽！

2. 本地 mock 开启

plugins: [
  viteMockServe({
    mockPath: 'mock',
    localEnabled: true
  })
]

这样你在开发环境里就可以写自己的假接口，配合 axios 和 zustand，前后端分离模拟体验一流！

环境变量配置（.env.local）

VITE_API_URL=https://xxx.com/api
VITE_LLM_KEY=your-openai-api-key

小贴士：前缀必须是 VITE_，Vite 才能识别并注入环境变量。

移动端适配，别再用 px！

在移动端，你还在用 px？ 是时候了解 rem 和 lib-flexible 的绝配。

设计稿是 750px，那怎么转 rem？

设计稿基于 iPhone 标准宽度 750px，手机实际宽度是 375pt，所以：

1rem = 屏幕宽度 / 10

也就是说：

一个 150px 宽的盒子就是：150 / 75 = 2rem
所有 px 都要除以 75

自动 px -> rem：postcss-pxtorem

谁还手动换算！直接加上 PostCSS 插件，让它自动帮你转：

npm i -D postcss-pxtorem

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*']
    }
  }
}

搭配 lib-flexible，一套代码，多设备适配，开发体验 + 视觉还原都完美！

样式管理

✅ 基础配置

index.css: CSS Reset + box-sizing, font-family
App.css: 全局通用样式
*.module.css: 组件私有样式，防止命名冲突

强烈建议

别全写在 App.css，全局污染太严重，模块化才是正道！

路由 + 懒加载 + Layout 模版

项目结构复杂一点后，路由模块化 + Layout 模版分离显得尤为重要。

React Router + 懒加载

const Home = lazy(() => import('@/pages/Home'))

Layout 分组模版

有两个 Layout：

TabbarLayout：底部菜单（首页、我的、搜索）
BlankLayout：登录页、详情页无需 tabbar

<Route element={<TabbarLayout />}>
  <Route path="/home" element={<Home />} />
</Route>

<Route element={<BlankLayout />}>
  <Route path="/login" element={<Login />} />
</Route>

Outlet + 嵌套路由 + 动态匹配，灵活到飞起！

Tabbar 菜单逻辑亮点

const tabs = [
  { title: '首页', icon: <HomeO />, path: '/home' },
  ...
]

const current = tabs.findIndex(item => location.pathname.startsWith(item.path))

用 startsWith 来处理路径高亮，兼容 /home/detail 这类子页面；
用 findIndex 快速匹配当前 tab 索引。

这不就是 ES6 的优雅写法 + 真实业务完美结合嘛！

自定义 Hook：useTitle

import { useEffect } from 'react'

export function useTitle(title) {
  useEffect(() => {
    document.title = title
  }, [title])
}

每个页面记得设置标题，不然用户还以为进错网站了…

✅ Git 提交规范（加分项）

git commit -m "feat: 初始化项目结构与移动端适配"

推荐使用 commitizen + cz-customizable 做规范化提交，后续文章细讲。

总结

我们刚完成了一套现代前端项目最重要的一步：

✅ 合理的文件结构
✅ 路由拆分 + Layout 模版
✅ react-vant 组件提升效率
✅ 移动端适配 lib-flexible + postcss-pxtorem
✅ 状态管理、Mock、本地接口等开发配置
✅ ES6 写法更优雅

项目打好地基，后续开发才能顺风顺水！

最后

本文适合刚入门 React 项目开发的朋友，也适合在公司负责项目初始化的工程师。如果你觉得对你有帮助，不妨点赞 + 收藏 + 关注，我会继续更新完整的旅游 App 项目实战系列（从登录鉴权、首页组件、请求封装、Zustand 状态管理到性能优化）。