ui_template

Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Learn more about the recommended Project Setup and IDE Support in the Vue Docs TypeScript Guide.

前端模板项目

node18

Vue 3 + TypeScript + Vite6

构建过程

1. 项目初始化

   npm create vite@6
   

2. 添加vue-router和elementPlus依赖

   • 安装

     npm install vue-router@4
     npm install element-plus --save
     

   • 配置

     const routes:RouteRecordRaw[] = [
     {
        path: '/',
        name: 'commonLayout',
        component: CommonLayout,
        children: [
            {
                path: '/',
                name: 'home',
                component: HomeView
            },
            {
                path: '/about',
                name: 'about',
                component: AboutView
            },
        ],
     },
     ]
        
     const router : Router = createRouter({
     history: createWebHistory(),
     routes: routes,
     });
     export default router
     

   • 使用

     app.use(router)
     app.use(ElementPlus)
     

3. 添加状态管理依赖

   • 安装

     npm install pinia
     

   • 配置

   • 使用

     import { createPinia } from 'pinia'
     const pinia = createPinia()
     app.use(pinia)
     

4. 添加axios依赖

   npm install axios
   

配置axios-instance.ts

   import axios, {type AxiosInstance, type AxiosRequestConfig, type AxiosResponse } from 'axios';
   
   // 自定义配置接口
   export interface CustomInstanceConfig extends AxiosRequestConfig {
       // 可以添加自定义配置
       skipAuth?: boolean; // 是否跳过鉴权
   }
   
   // 创建 Axios 实例
   const axiosInstance: AxiosInstance = axios.create({
       baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
       timeout: 30000,
       headers: {
           'Content-Type': 'application/json',
       },
   });
   
   // 请求拦截器
   axiosInstance.interceptors.request.use(
       (config) => {
           // 添加 token
           const token = localStorage.getItem('token');
           if (token) {
               config.headers.Authorization = `Bearer ${token}`;
           }
           return config;
       },
       (error) => {
           return Promise.reject(error);
       }
   );
   
   // 响应拦截器
   axiosInstance.interceptors.response.use(
       (response: AxiosResponse) => {
           // 根据后端返回格式调整
           if (response.data.code !== 0) {
               return Promise.reject(new Error(response.data.message || '请求失败'));
           }
           return response.data;
       },
       (error) => {
           // 统一错误处理
           if (error.response?.status === 401) {
               // 未授权，跳转登录
               window.location.href = '/login';
           }
           return Promise.reject(error);
       }
   );
   
   // 自定义实例函数（供 Orval 使用）
   export const customAxiosInstance = <T>(config: CustomInstanceConfig): Promise<T> => {
       return axiosInstance(config);
   };
   
   // 也可以导出第二参数形式（如需处理完整响应）
   export const customAxiosInstanceWithFullResponse = <T>(
       config: CustomInstanceConfig
   ): Promise<AxiosResponse<T>> => {
       return axiosInstance(config);
   };

1. openAPI自动生成接口调用

使用orval进行API生成

   npm install orval

编写orval.config.ts配置文件

   import { defineConfig } from 'orval';
   
   export default defineConfig({
       'your-api': {
           // OpenAPI 规范文件路径（支持本地文件或 URL）
           input: {
               target: 'http://localhost:8080/v3/api-docs', // 可改为你的 Swagger JSON 地址，如：http://localhost:8000/openapi.json
           },
           output: {
               // 生成代码的模式：tags-按接口标签拆分文件
               mode: 'tags',
               // 客户端类型：使用 axios
               client: 'axios',
               // 生成 vue-query hooks
               target: './src/api/client.ts',
               // 生成的 TypeScript 类型存放目录
               schemas: './src/api/models',
               // 每次生成前自动清理旧文件
               clean: true,
               // 覆盖默认配置
               override: {
                   // 自定义 axios 实例
                   mutator: {
                       path: './src/util/axios-instance.ts',
                       name: 'customAxiosInstance',
                   },
                   // 为每个接口生成 vue-query hooks
                   query: {
                       useQuery: true,      // 生成 useGetXXX hooks
                       useMutation: true,   // 生成 usePostXXX hooks
                   },
               },
           },
           // 生成后自动格式化代码
           hooks: {
               afterAllFilesWrite: 'prettier --write',
           },
       },
   });

配置package.json文件中

   {
     "scripts": {
      	...,
       "api:gen": "orval"
     },
   }