前端：vue3+router+Axios+vant4+UI 后端springboot 移动端项目

### 使用 Vue3 + Vue Router + Axios + Vant4 构建前端 UI 并与 Spring Boot 后端集成

#### 安装依赖库
为了构建基于 Vue3 的移动端应用程序，首先需要安装必要的依赖包。

npm install vue@next vue-router pinia axios vant

对于按需加载 Vant 组件可以采用如下方式[^1]:

// main.js 或者 main.ts 中
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.use(createPinia());
app.use(router);
app.mount('#app');

针对 Vant 库的具体引入方法有两种：

- **全量引入**

    import Vue from 'vue'
    import Vant from 'vant';
    import 'vant/lib/index.css';

    Vue.use(Vant);

- **按需引入**

如果使用 `babel-plugin-import` 插件，则可以通过以下方式进行更高效的组件引入：

    {
      "plugins": [
        ["import", {
          "libraryName": "vant",
          "style": true
        }]
      ]
    }

接着可以直接单独引入所需的组件及其样式文件：

    import Button from 'vant/lib/button';
    import 'vant/lib/button/style';

#### 配置路由
创建 `router/index.js` 文件来定义应用中的不同页面之间的导航逻辑。假设存在一个名为 Home 的视图组件位于 `/src/views/HomeView.vue` 下面是一个简单的例子:

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';

export default createRouter({
  history: createWebHistory(),
  routes: [{
    path: '/',
    name: 'home',
    component: HomeView,
  }],
});

在主入口文件(main.js)中注册路由器实例以便在整个应用程序范围内可用.

#### 设置 API 请求拦截器
通过 Axios 实现前后端交互功能前先设置好请求的基础URL以及一些默认参数等配置项，并添加响应/错误处理机制以增强用户体验。

// src/api/request.ts
import axios from 'axios';

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API || '', // api base_url
  timeout: 5000                                // request timeout
});

service.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token'); 
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => Promise.reject(error)
);

service.interceptors.response.use(
  response => response.data,
  error => Promise.reject(error)
);

export default service;

#### 创建环境变量
为了让开发者能够在不同的环境中轻松切换API服务器地址和其他敏感信息而不必硬编码这些值到源码里去，在项目的根目录下分别建立`.env.development` 和 `.env.production`两个文件用于区分开发模式和生产环境下各自对应的配置选项[^3].

例如 .env.development 可能看起来像这样:

VUE_APP_BASE_API=http://localhost:8080/
NODE_ENV=development
PORT=3000

而 .env.production 则可能是这样的形式:

VUE_APP_BASE_API=https://your-production-server.com/
NODE_ENV=production

#### 整合后端服务
当完成了上述准备工作之后就可以着手于实际业务逻辑实现了。通常情况下会涉及到向SpringBoot提供的RESTful Web Service发起GET / POST类型的HTTP请求获取数据或者提交表单等等操作。下面给出一段调用远程接口查询用户列表的例子作为参考[^4]:

async function fetchUsers() {
  try {
    let res = await axios.get('/api/users');
    console.log(res.data);
  } catch(err){
    console.error(err.message);
  }
}

需要注意的是如果前后端不在同一个域名之下还需要考虑跨域资源共享(CORS)的问题可以在 vite.config.ts 中做相应的代理配置让本地调试更加方便快捷.

server: {
  port: 8002,
  host: '0.0.0.0',
  open: true,
  proxy: {
    '/api': {
      target: 'http://localhost:8080/',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, ''),
    },
  },
},