Vue 3 + TypeScript + Vite + Axios 基础框架

这是一个基于 Vue 3、TypeScript 和 Vite 的现代化前端基础框架，集成了 Axios 请求封装、ESLint 代码检查、Prettier 代码格式化等工具，帮助你快速搭建高质量的前端项目。

项目特性

• 核心框架：Vue 3、Vue Router、Pinia（状态管理）
• 构建工具：Vite 4（极速构建）
• 类型支持：TypeScript 5（严格类型检查）
• HTTP 请求：Axios 封装（支持拦截器、错误处理、文件上传/下载）
• 代码规范：ESLint + Prettier（统一代码风格）
• 样式方案：Less（CSS 预处理）
• 提交规范：Git 钩子（提交前自动检查代码）

快速开始

环境准备

• Node.js：v18+（推荐使用 nvm 管理）
• 包管理器：npm 或 pnpm

初始化项目

# 克隆仓库
git clone https://github.com/your-repo/vue3-ts-template.git
cd vue3-ts-template

# 安装依赖
npm install

# 启动开发服务器
npm run dev

主要命令

命令	描述
npm run dev	启动开发服务器
npm run build	构建生产环境包
npm run preview	预览生产环境包
npm run lint	代码检查并自动修复
npm run format	使用 Prettier 格式化代码

目录结构

src/
├── api/           # API 请求封装
├── assets/        # 静态资源
├── components/    # 通用组件
├── router/        # 路由配置
├── store/         # 状态管理 (Pinia)
├── utils/         # 工具函数
│   └── request.ts # Axios 封装
├── views/         # 页面组件
├── App.vue        # 根组件
└── main.ts        # 入口文件

HTTP 请求封装

框架已封装完整的 Axios 请求工具，支持 GET、POST、PUT、DELETE、文件上传 和 文件下载，内置错误处理。

使用示例

import request from '@/utils/request'

// GET 请求
const fetchUsers = async () => {
  try {
    const res = await request.get('/api/users', { page: 1, limit: 10 })
    console.log('用户列表:', res)
  } catch (error) {
    console.error('请求失败:', error)
  }
}

// POST 请求
const createUser = async (data: any) => {
  try {
    const res = await request.post('/api/users', data)
    console.log('创建成功:', res)
  } catch (error) {
    console.error('创建失败:', error)
  }
}

// 文件上传
const uploadFile = async (file: File) => {
  try {
    const res = await request.upload('/api/upload', file)
    console.log('上传成功:', res)
  } catch (error) {
    console.error('上传失败:', error)
  }
}

// 文件下载
const downloadFile = async () => {
  try {
    await request.download('/api/download/report', null, '报告.pdf')
    console.log('下载完成')
  } catch (error) {
    console.error('下载失败:', error)
  }
}

代码规范

ESLint + Prettier

框架使用 ESLint 和 Prettier 统一代码风格，配置文件：

• .eslintrc.cjs：ESLint 规则
• .prettierrc.cjs：Prettier 规则

自动格式化

推荐在 VSCode 中安装以下插件，实现保存时自动格式化：

• ESLint
• Prettier
• Volar

状态管理

使用 Pinia 作为状态管理工具，示例：

// store/userStore.ts
import { defineStore } from 'pinia'
import request from '@/utils/request'

export const useUserStore = defineStore('user', {
  state: () => ({
    userList: [],
    loading: false,
    error: null
  }),
  actions: {
    async fetchUsers() {
      this.loading = true
      try {
        const res = await request.get('/api/users')
        this.userList = res
      } catch (error) {
        this.error = error
      } finally {
        this.loading = false
      }
    }
  }
})

部署

构建生产环境包

npm run build

构建后的文件会输出到 dist 目录。

部署到 GitHub Pages

npm run deploy

需先配置 package.json 中的 homepage 字段。

常见问题

1. Axios 请求拦截器类型错误

如果遇到 InternalAxiosRequestConfig 类型错误，请确保：

1. 导入正确的类型：

   import { type InternalAxiosRequestConfig } from 'axios'
   

2. 请求拦截器使用正确的类型：

   service.interceptors.request.use(
     (config: InternalAxiosRequestConfig) => {
       // ...
       return config
     }
   )
   

2. 跨域问题

在开发环境中，可通过 vite.config.ts 配置代理：

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

目前的基础框架默认不包含 PC 端和移动端适配 的配置，需要根据项目需求添加相应方案。以下是几种常见的适配方法及其实现步骤： 一、现有框架适配状态 你的项目当前是 基础框架，未集成任何适配方案，默认行为是： PC 端：按设计稿尺寸直接渲染，大屏幕可能显得紧凑。 移动端：内容可能过大，需要手动缩放或滚动查看

贡献指南

1. Fork 仓库
2. 创建特性分支：git checkout -b feature/new-feature
3. 提交代码：git commit -m 'Add new feature'
4. 推送分支：git push origin feature/new-feature
5. 提交 Pull Request

许可证

本项目采用 MIT 许可证。