Vant4 + Vue3 + Axios 的移动端框架
以下是基于 Vant4 + Vue3 + Axios 的移动端框架搭建方案，整合了 项目初始化、组件库配置、请求封装、状态管理 等核心模块，并参考了多个最佳实践。
一、项目初始化
1. 创建Vite项目（TypeScript支持）
npm create vite@latest my-vant-app --template vue-ts
cd my-vant-app2. 安装核心依赖
npm install vant@4.x axios pinia vue-router@4 sass二、Vant4 组件库配置
1. 按需引入组件（推荐）
通过 unplugin-vue-components 自动按需引入，避免打包体积过大：
npm install unplugin-vue-components -D在 vite.config.ts 中配置：
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
plugins: [
Components({
resolvers: [VantResolver()],
}),
],
});2. 全局样式适配（vw单位）
安装 postcss-px-to-viewport-8-plugin 适配移动端：
npm install postcss-px-to-viewport-8-plugin -D配置 postcss.config.js：
module.exports = {
plugins: {
'postcss-px-to-viewport-8-plugin': {
viewportWidth: 375, // 设计稿宽度
},
},
};三、Axios 封装与拦截器
1. 创建Axios实例
// src/utils/request.ts
import axios from 'axios';
import { showToast } from 'vant';
const service = axios.create({
baseURL: import.meta.env.VITE_API_BASE_URL,
timeout: 10000,
});
// 请求拦截器
service.interceptors.request.use((config) => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
// 响应拦截器
service.interceptors.response.use(
(response) => {
if (response.data.code !== 200) {
showToast(response.data.message || '请求失败');
return Promise.reject(response.data);
}
return response.data;
},
(error) => {
showToast(error.response?.data?.message || '网络错误');
return Promise.reject(error);
}
);
export default service;2. API模块化示例
// src/api/user.ts
import request from '@/utils/request';
export const login = (data: { username: string; password: string }) => {
return request.post('/auth/login', data);
};四、状态管理（Pinia）
1. 创建Pinia Store
// src/stores/user.ts
import { defineStore } from 'pinia';
interface UserState {
token: string | null;
userInfo: Record<string, any>;
}
export const useUserStore = defineStore('user', {
state: (): UserState => ({
token: localStorage.getItem('token'),
userInfo: {},
}),
actions: {
setToken(token: string) {
this.token = token;
localStorage.setItem('token', token);
},
async login(params: { username: string; password: string }) {
const res = await login(params);
this.setToken(res.data.token);
},
},
});2. 在组件中使用
<script setup>
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();
const handleLogin = () => {
userStore.login({ username: 'admin', password: '123456' });
};
</script>五、路由与权限控制
1. 路由配置
// src/router.ts
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: '/login',
component: () => import('@/views/Login.vue'),
},
{
path: '/home',
component: () => import('@/views/Home.vue'),
meta: { requiresAuth: true },
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
// 权限拦截
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !localStorage.getItem('token')) {
next('/login');
} else {
next();
}
});
export default router;六、移动端适配补充
禁止缩放：在
index.html中添加：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">深色模式：Vant4 内置支持，通过 CSS 变量切换主题。
七、项目结构参考
src/
├── api/ # 接口模块
├── assets/ # 静态资源
├── components/ # 公共组件
├── stores/ # Pinia状态
├── utils/ # 工具类（axios封装）
├── views/ # 页面组件
├── App.vue
└── main.ts
总结
核心优势：Vant4 提供丰富的移动端组件，Axios 拦截器实现统一错误处理，Pinia 简化状态管理。
扩展方向：可集成国际化（i18n）、Mock 数据、性能监控（如 Sentry）。
Vant4 + Vue3 + Axios 的移动端框架
https://uniomo.com/archives/vant4-vue3-axios-de-yi-dong-duan-kuang-jia