终极指南：如何快速搭建 Vue3+Vant4 移动应用？完整新手教程 🚀

2026-02-05 04:15:16作者：晏闻田Solitary

Vue3-Vant-Mobile 是一个集成 Vue3、Vant4、Vite5 和 Pinia 的现代移动端模板，帮助开发者快速完成业务开发。本文将详细介绍环境配置、路由管理和状态管理等核心功能，让你轻松上手这个强大的开发工具！

📋 为什么选择 Vue3-Vant-Mobile？

Vue3-Vant-Mobile 模板凭借以下优势成为移动端开发的理想选择：

最新技术栈：基于 Vue3、Vite5 和 TypeScript 构建，享受更快的开发体验和更强的类型安全
开箱即用：内置路由、状态管理和 UI 组件，无需从零配置
灵活扩展：清晰的项目结构支持业务快速迭代，适合各类移动应用场景

🔧 一键安装步骤

1. 克隆项目代码

首先通过以下命令获取项目源码：

git clone https://gitcode.com/gh_mirrors/vu/vue3-vant-mobile
cd vue3-vant-mobile

2. 安装依赖包

推荐使用 pnpm 进行包管理，执行以下命令安装项目依赖：

pnpm install

⚠️ 注意：如果遇到依赖安装失败，可尝试删除 node_modules 目录和 pnpm-lock.yaml 文件后重新安装

3. 启动开发服务器

运行开发命令，启动本地开发环境：

pnpm dev

成功启动后，访问 http://localhost:3000 即可看到项目首页。

🚀 最快配置方法

项目目录结构解析

熟悉以下核心目录结构，帮助你快速定位功能模块：

src/
├── api/           # 接口请求
├── components/    # 公共组件
├── pages/         # 页面组件
├── router/        # 路由配置
└── stores/        # 状态管理

路由配置指南

路由配置文件位于 src/config/routes.ts，添加新页面路由只需简单三步：

在 pages 目录创建页面组件，例如 src/pages/about/index.vue
在路由配置文件中添加路由规则：

{
  path: '/about',
  name: 'About',
  component: () => import('@/pages/about/index.vue')
}

使用 <router-link> 组件或 useRouter 跳转

💾 状态管理最佳实践

Pinia 基础配置

项目使用 Pinia 进行状态管理，已在 src/main.ts 中完成初始化：

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
app.use(createPinia()); // 安装 Pinia
app.mount('#app');

创建和使用 Store

在 src/stores/modules/ 目录下创建状态模块，例如 counter.ts：

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++;
    },
  },
});

在组件中使用：

<script setup>
import { useCounterStore } from '@/stores/modules/counter';
const counter = useCounterStore();
</script>

<template>
  <div>
    <p>{{ counter.count }}</p>
    <button @click="counter.increment">+</button>
  </div>
</template>