Vue 3 + TypeScript 项目模板

Posted recently Updated recently

By power 已删除用户

8~11 min read

代码仓库：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

项目结构

├── src/
│   ├── Layout/         
│   ├── api/            
│   ├── assets/         
│   ├── components/     
│   ├── i18n.ts         
│   ├── locales/        
│   ├── main.ts         
│   ├── router/         
│   ├── store/          
│   ├── style.css       
│   ├── types/          
│   ├── utils/          
│   └── views/          
├── eslint.config.js    
├── .prettierrc         
├── tailwind.config.js  
├── tsconfig.json       
├── vite.config.ts      
└── package.json

功能特点

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

快速开始

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

npm install

pnpm install

运行开发服务器

npm run dev

pnpm run dev

构建生产环境

npm run build

pnpm run build

预览构建结果

npm run preview

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 文件。

知识库

License: CC BY 4.0