1. 创建 Vue 2 项目

首先，确保你已经安装了 Node.js 和 npm。然后，使用 Vue CLI 创建一个新的 Vue 2 项目

# 安装 Vue CLI
npm install -g @vue/cli

# 创建一个新的 Vue 2 项目
vue create my-vue2-project

2. 安装 Element UI

进入项目目录并安装 Element UI。

cd my-vue2-project
npm install element-ui

在 src/main.js 中引入 Element UI 并使用它。

import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

new Vue({
  render: h => h(App),
}).$mount('#app');

3. 配置路由

安装 Vue Router。  yarn add vue-router@3

在 src 目录下创建一个 router 文件夹，并在其中创建 index.js 文件。

// src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

在 src/main.js 中引入并使用路由。

import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'; // 导入 router

Vue.use(ElementUI);

new Vue({
  router,// 确保 router 被传递到 Vue 实例
  render: h => h(App),
}).$mount('#app');

4. 封装 Axios

安装 Axios。 npm install axios

在 src 目录下创建一个 utils 文件夹，并在其中创建 request.js 文件。

// src/utils/request.js
import axios from 'axios';

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 设置基础 URL
  timeout: 5000, // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    // 例如，添加 token 到请求头
    // config.headers['Authorization'] = 'Bearer ' + getToken();
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    const res = response.data;
    if (res.code !== 200) {
      // 处理错误
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

export default service;

在 src/api 目录下创建一个 user.js 文件，用于封装用户相关的 API 请求。

// src/api/user.js
import request from '../utils/request';

export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data,
  });
}

export function getUserInfo() {
  return request({
    url: '/user/info',
    method: 'get',
  });
}

5. 使用封装的 Axios

在组件中使用封装的 Axios 进行请求。

// src/views/Home.vue
<template>
  <div>
    <h1>Home</h1>
    <el-button @click="handleLogin">Login</el-button>
  </div>
</template>

<script>
import { login } from '../api/user';

export default {
  methods: {
    async handleLogin() {
      try {
        const res = await login({ username: 'admin', password: '123456' });
        console.log(res);
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

6. 运行项目

最后，运行项目并查看效果。

npm run serve