Vue 3 + TypeScript 项目模板

代码仓库：gitee.com/zhao_zhengh...

项目介绍

这是一个基于Vue 3和TypeScript的现代化前端项目模板，集成了常用的开发工具和功能，帮助开发者快速构建高质量的Web应用。模板使用Vite作为构建工具，采用Vue 3的Composition API，并结合了Pinia状态管理、Vue Router路由管理、Vue I18n国际化等技术。

技术栈

框架: Vue 3 Composition API
语言: TypeScript
构建工具: Vite
路由管理: Vue Router
状态管理: Pinia
国际化: Vue I18n
HTTP请求: Axios
样式处理: Tailwind CSS
代码规范: ESLint, Prettier
自动导入: unplugin-auto-import, unplugin-vue-components

项目结构

bash 复制代码

├── src/
│   ├── Layout/         # 布局组件
│   ├── api/            # API接口定义
│   ├── assets/         # 静态资源
│   ├── components/     # 通用组件
│   ├── i18n.ts         # 国际化配置
│   ├── locales/        # 语言文件
│   ├── main.ts         # 入口文件
│   ├── router/         # 路由配置
│   ├── store/          # 状态管理
│   ├── style.css       # 全局样式
│   ├── types/          # 类型定义
│   ├── utils/          # 工具函数
│   └── views/          # 页面组件
├── eslint.config.js    # ESLint扁平配置
├── .prettierrc         # Prettier配置
├── tailwind.config.js  # Tailwind配置
├── tsconfig.json       # TypeScript配置
├── vite.config.ts      # Vite配置
└── package.json        # 项目依赖

功能特点

主题切换: 支持多种预定义主题(默认、红色、青色)，可自定义扩展
文件分类打包: 打包时自动将不同类型文件分类存放(JS、CSS、静态资源等)，优化项目结构
国际化: 内置中英文支持，可轻松添加更多语言
API接口管理: 统一的API接口封装和管理
自动导入: 自动导入Vue、Vue Router、Pinia等常用函数和组件
代码规范: 集成ESLint和Prettier，确保代码风格一致
响应式设计: 基于Tailwind CSS的响应式布局
错误处理: 统一的HTTP请求错误处理
404页面: 自定义的404错误页面

快速开始

安装依赖可以使用npm或pnpm安装依赖：

bash 复制代码

npm install
# 或使用pnpm
pnpm install

运行开发服务器

bash 复制代码

npm run dev
# 或使用pnpm
pnpm run dev

构建生产环境

bash 复制代码

npm run build
# 或使用pnpm
pnpm run build

预览构建结果

bash 复制代码

npm run preview
# 或使用pnpm
pnpm run preview

自定义配置

主题配置

在src/assets/theme.css中定义主题变量，在tailwind.config.js中配置主题颜色。

ESLint配置

项目使用ESLint扁平配置系统，配置文件为eslint.config.js。可在此文件中添加自定义规则或修改现有规则。

打包配置

在vite.config.ts中配置了文件分类打包功能，可通过修改build.rollupOptions.output部分自定义输出路径和命名规则。

国际化配置

在src/locales/目录下添加语言文件，然后在src/i18n.ts中导入并注册。

API接口配置

在src/api/目录下创建API接口文件，并在src/api/index.ts中统一导出。

代码规范

使用Prettier进行代码格式化
使用ESLint进行代码检查
提交代码前会自动运行lint-staged检查

注意事项

确保Node.js版本 >= 18.0.0（推荐使用最新稳定版）
开发环境使用Vite，生产环境使用Rollup打包
项目使用TypeScript严格模式，确保类型安全
支持使用npm或pnpm进行依赖管理
如有问题，请查看控制台输出或提交Issue

许可证

本项目采用MIT许可证开源。详情请见 LICENSE 文件。