Vue3二次封装提升开发效率与组件复用性的实践

在 Vue3 开发中，二次封装是优化组件使用、提升项目可维护性的重要手段。通过对基础组件（如 UI 组件库的组件、原生 DOM 相关功能等）进行针对性封装，能让组件更贴合业务场景，降低重复代码量，加速开发流程。本文将带你深入了解 Vue3 二次封装的思路、常用场景与实现要点，助力打造更高效的前端组件体系

（一）业务定制化适配

UI 组件库（如 Element Plus、Ant Design Vue 等）提供的基础组件，往往是通用形态。实际业务里，像按钮需统一携带 “业务专属样式、权限判断逻辑”，表格要默认集成 “自定义列配置、请求封装”，二次封装能让这些定制逻辑下沉到组件层，业务页面直接用 “适配后的组件”，无需重复写冗余代码。

（二）复用逻辑沉淀

项目中，多个页面可能用到 “带加载状态的下拉选择、关联接口请求的搜索框” 等功能。把这些复用逻辑封装成独立组件，后续直接调用，能大幅减少重复开发，也便于统一维护（比如接口地址变更，只需改封装组件）。

（三）降低使用复杂度

原生组件或第三方库的 API 可能较复杂，二次封装可简化调用。例如封装一个 UploadImage 组件，内部处理 “图片压缩、格式校验、上传接口对接”，业务侧只需传入 “图片类型限制、最大尺寸” 等简单参数，就能快速实现上传功能。

在最外围创建三个.env文件

第一个（开发环境）文件名称（.env.development）

NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_API_URL = 'https://testshool.zzgoodqc.cn'//接口前缀

第二个（正式环境）（.env.production）

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = 'https://testshool.zzgoodqc.cn'//接口前缀

第三个（测试环境）（.env.test）

NODE_ENV = 'test'
VUE_APP_MODE = 'test'
VUE_APP_API_URL = 'https://testshool.zzgoodqc.cn'//接口前缀
outputDir = test

接下来就是一次封装的方法：

在vue3的src目录中创建一个utils文件，在utils中进行一次封装

一次封装axios.ts（在src中创建）

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

// 设置请求超时时间，单位为毫秒
axios.defaults.timeout = 30000;

// 根据环境变量设置请求的基础URL
axios.defaults.baseURL = process.env.VUE_APP_API_URL;

// 可以添加拦截器
if (process.env.VUE_APP_MODE === 'development') {
    console.log('开发');
} else if (process.env.VUE_APP_MODE === 'test') {
    console.log('测试');
} else {
    console.log('正式');
}

// 定义请求参数的类型
interface RequestOptions {
    url: string;
    method?: string;
    data?: any;
}

// 封装请求函数
export const request = (options: RequestOptions): Promise<any> => {
    return new Promise((resolve, reject) => {
        const config: AxiosRequestConfig = {
            url: options.url,
            method: options.method || 'GET',
            [options.method?.toLowerCase() === 'get' ? 'params' : 'data']: options.data || {},
        };
        axios(config)
            .then((res: AxiosResponse) => {
                resolve(res.data);
            })
            .catch((err) => {
                reject(err);
            });
    });
};

在utils中进行二次封装在utils中继续创建一个（api.ts）

import { request } from './axios';//引入一次封装

// 定义请求数据的类型
interface GetNolistRequestData {
  // 这里可以根据实际情况添加具体的字段
  [key: string]: any;
}

// 定义响应数据的通用类型
interface ApiResponse<T> {
  code: number;
  message: string;
  data: T;
}

export const getNolist = (data: GetNolistRequestData) => {
  return request({
    //.env文件中是文件前缀选择只需要把前缀后的复制上来就好
    url: '/index.php/index/Yimi/getGoodsList',
    method: 'get',
    data: data // 使用 data 传递参数
  });
};

在需要的页面中引入

import { api中你起的变量名称 } from '@/utils/api';