快速创建VUE3项目并配置

创建项目：

//创建 Vite 项目：
npm create vite@latest my-vue-app -- --template vue-ts

//切换目录
cd my-vue-app

//安装依赖：
npm install

//安装 Vue Router：
npm install vue-router@next

//安装 Pinia：
npm install pinia

//安装 Pinia 持久化存储插件：
npm install pinia-plugin-persistedstate

//安装 Element Plus 及其图标库：
npm install element-plus
npm install @element-plus/icons-vue

//安装 Axios：
npm install axios

完整的 main.ts 配置文件示例，并使用了中文注释来解释每一部分的功能。这个配置文件包含了 Vue 3、Vue Router、Pinia（包括持久化存储）、Element Plus 以及图标库的初始化和设置。 

import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 导入路由配置
import { createPinia } from 'pinia'; // 导入 Pinia
import { createPersistedState } from 'pinia-plugin-persistedstate'; // 导入 Pinia 持久化插件
import ElementPlus from 'element-plus'; // 导入 Element Plus
import 'element-plus/dist/index.css'; // 导入 Element Plus 的样式
import * as ElementPlusIconsVue from '@element-plus/icons-vue'; // 导入 Element Plus 图标
import axios from 'axios'; // 导入 Axios
import { setupAxiosInterceptors } from './api/axios-interceptors'; // 导入 Axios 拦截器设置

// 创建 Pinia 实例并使用持久化插件
const pinia = createPinia();
pinia.use(createPersistedState());

// 创建 Vue 应用实例
const app = createApp(App);

// 使用 Pinia 状态管理
app.use(pinia);

// 使用 Vue Router 路由
app.use(router);

// 使用 Element Plus UI 库
app.use(ElementPlus);

// 注册所有 Element Plus 图标为全局组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

// 设置 Axios 拦截器
setupAxiosInterceptors(axios);

// 全局错误处理
app.config.errorHandler = (err, vm, info) => {
  console.error('Error in', info, err);
};

// 全局未捕获异常处理
window.addEventListener('error', (event) => {
  console.error('全局未捕获异常:', event);
});

// 全局 Promise 拒绝处理
window.addEventListener('unhandledrejection', (event) => {
  console.error('全局未处理的 Promise 拒绝:', event.reason);
});

// 挂载应用
app.mount('#app');

详细说明

1. 导入依赖：

   • createApp：从 Vue 中导入创建应用实例的方法。
   • App：主应用组件。
   • router：从 ./router 文件夹中导入路由配置。
   • createPinia 和 createPersistedState：导入 Pinia 及其持久化插件。
   • ElementPlus 和 element-plus/dist/index.css：导入 Element Plus 及其样式。
   • * as ElementPlusIconsVue：导入所有 Element Plus 图标并注册为全局组件。
   • axios：导入 Axios。
   • setupAxiosInterceptors：导入 Axios 拦截器设置函数（假设你在 src/api/axios-interceptors.ts 中定义了这个函数）。

2. 创建 Pinia 实例并使用持久化插件：

   • const pinia = createPinia();：创建 Pinia 实例。
   • pinia.use(createPersistedState());：使用 Pinia 持久化插件。

3. 创建 Vue 应用实例：

   • const app = createApp(App);：创建一个 Vue 应用实例，并传入根组件 App。

4. 使用 Pinia 状态管理：

   • app.use(pinia);：将 Pinia 插件添加到 Vue 应用中。

5. 使用 Vue Router 路由：

   • app.use(router);：将 Vue Router 添加到 Vue 应用中。

6. 使用 Element Plus UI 库：

   • app.use(ElementPlus);：将 Element Plus 添加到 Vue 应用中。

7. 注册所有 Element Plus 图标为全局组件：

   • 使用 Object.entries 和 app.component 方法，将所有图标注册为全局组件，这样在任何地方都可以直接使用这些图标。

8. 设置 Axios 拦截器：

   • setupAxiosInterceptors(axios);：调用 setupAxiosInterceptors 函数来设置 Axios 请求和响应拦截器。

9. 全局错误处理：

   • app.config.errorHandler：设置全局错误处理器，用于捕获 Vue 组件中的错误。
   • window.addEventListener('error')：监听全局未捕获的 JavaScript 错误。
   • window.addEventListener('unhandledrejection')：监听全局未处理的 Promise 拒绝事件。

10. 挂载应用：

    • app.mount('#app');：将 Vue 应用挂载到 HTML 文档中的 #app 元素上。

 配置 Axios 拦截器 (src/api/axios-interceptors.ts)

为了完成 Axios 拦截器的设置，你需要创建一个 src/api/axios-interceptors.ts 文件，并在其中定义拦截器逻辑：

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';

export const setupAxiosInterceptors = (instance: AxiosInstance) => {
  // 请求拦截器
  instance.interceptors.request.use(
    (config: AxiosRequestConfig) => {
      // 在发送请求之前做些什么
      // 例如：添加认证 token
      // config.headers.Authorization = `Bearer ${getToken()}`;
      return config;
    },
    (error) => {
      // 对请求错误做些什么
      return Promise.reject(error);
    }
  );

  // 响应拦截器
  instance.interceptors.response.use(
    (response: AxiosResponse) => {
      // 对响应数据做点什么
      return response;
    },
    (error) => {
      // 对响应错误做点什么
      if (error.response && error.response.status === 401) {
        // 处理 401 错误，例如跳转到登录页面
        // router.push('/login');
      }
      return Promise.reject(error);
    }
  );
};