移动端开发方案

lishihuan大约 2 分钟

移动端开发方案

以下是一个完整的、推荐的 uni-app + Vue 3 + Vite 项目结构示例，适合作为你未来开发移动 App 的项目壳子。这个结构专注于“可扩展性 + 可维护性 + 快速落地”。

✅ 顶级目录结构

uni-app-vue3-template/
├── src/                         # 主目录（Vite 模式推荐集中管理）
│   ├── pages/                   # 页面目录（每个页面一个文件夹）
│   │   ├── index/               # 首页
│   │   │   └── index.vue
│   │   └── login/               # 登录页
│   │       └── login.vue
│   │
│   ├── components/              # 公共组件
│   │   └── MyButton.vue
│   │
│   ├── store/                   # Pinia 状态管理
│   │   └── user.ts
│   │
│   ├── api/                     # 所有接口封装
│   │   └── user.ts
│   │
│   ├── utils/                   # 工具函数
│   │   ├── request.ts           # 网络请求封装
│   │   └── storage.ts           # 本地存储封装
│   │
│   ├── config/                  # 配置（如环境变量、常量）
│   │   ├── env.ts
│   │   └── constant.ts
│   │
│   ├── hooks/                   # 自定义组合式函数（如 useLogin）
│   │   └── useLogin.ts
│   │
│   ├── styles/                  # 全局样式
│   │   ├── reset.scss
│   │   └── variables.scss
│   │
│   ├── App.vue                  # 根组件
│   └── main.ts                  # 项目入口
│
├── static/                      # 静态资源（图片等）
├── pages.json                   # 路由配置（uni-app 特有）
├── manifest.json                # App 打包配置
├── vite.config.ts               # Vite 配置
├── tsconfig.json                # TypeScript 配置
├── package.json                 # 项目依赖
└── .env.[mode]                  # 各环境变量配置

🔧 关键代码示例

main.ts

import { createSSRApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'

export function createApp() {
  const app = createSSRApp(App)
  app.use(createPinia())
  return { app }
}

request.ts

export const request = (options) => {
  const token = uni.getStorageSync('token')
  return new Promise((resolve, reject) => {
    uni.request({
      ...options,
      header: {
        ...options.header,
        Authorization: token ? `Bearer ${token}` : '',
      },
      success(res) {
        if (res.statusCode === 200) resolve(res.data)
        else reject(res)
      },
      fail(err) {
        reject(err)
      },
    })
  })
}

store/user.ts

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    token: '',
    info: {},
  }),
  actions: {
    setToken(token: string) {
      this.token = token
      uni.setStorageSync('token', token)
    },
    logout() {
      this.token = ''
      this.info = {}
      uni.removeStorageSync('token')
    },
  },
})

📦 推荐依赖列表

# 核心依赖
npm install vue@3 pinia

# UI 组件库（任选其一）
npm install uview-plus   # 更偏向小程序
# or
npm install @nutui/nutui uni-sass  # 更偏向移动端 H5

# 类型支持（TS 项目推荐）
npm install --save-dev typescript @types/node

🔋 可选增强模块建议（预留目录位）：

模块名说明
auth/权限控制，比如登录拦截、页面守卫逻辑
i18n/国际化多语言支持（如果你未来有出海需求）
native/原生能力封装（如摄像头、扫码、权限弹窗）
plugins/第三方插件的封装，如百度地图、支付模块等
store/Pinia 各类模块（用户、权限、设置等）
hooks/可组合的业务逻辑：如 useUser、useLogin
api/将所有后端接口按业务模块拆分
config/统一管理接口前缀、环境等配置项
utils/封装常用方法（请求、本地存储、验证等）****

🧪 启动方式（以 Vite 模式为例）

bash复制编辑npm run dev:h5         # H5 启动
npm run dev:mp-weixin  # 小程序模拟器
npm run dev:app        # App 模拟器（需 HBuilderX）

如果你需要，我可以基于这个结构给你打包一个 Git 模板项目，含基础功能和样例页面，让你直接 npm install && npm run dev:h5 就能看到效果。

你是否需要我帮你快速生成这个 uni-app + Vue3 项目结构open in new window 的完整模板工程？