# vue3-quickstart **Repository Path**: ssdlm_aifast/vue3-quickstart ## Basic Information - **Project Name**: vue3-quickstart - **Description**: vue3基础快速开发框架 下载直接可用 - **Primary Language**: HTML/CSS - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-06-20 - **Last Updated**: 2025-06-20 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Vue3 标准架构项目 一个基于 Vue 3 + TypeScript + Vite 构建的现代化前端项目架构，提供完整的开发基础设施和最佳实践。目的是帮助开发者快速搭建基础项目并开发扩展自己的业务代码，避免重复搭建基础项目架构。 ## 🚀 技术栈 ### 核心框架 - **Vue 3.5.13** - 渐进式 JavaScript 框架 - **TypeScript 5.8** - JavaScript 的超集，提供静态类型检查 - **Vite 6.2.4** - 下一代前端构建工具 ### UI 样式 - **Tailwind CSS 3.4.17** - 原子化 CSS 框架，快速构建现代化界面 - **PostCSS 8.5.6** - CSS 后处理器 - **Autoprefixer 10.4.21** - 自动添加 CSS 浏览器前缀 ### 图标库 - **Font Awesome 6.7.2** - 丰富的图标库，提供数千个高质量图标 ### 状态管理 - **Pinia 3.0.1** - Vue 官方推荐的状态管理库 ### 路由管理 - **Vue Router 4.5.0** - Vue.js 官方路由管理器 ### 网络请求 - **Axios 1.10.0** - 基于 Promise 的 HTTP 客户端 - **NProgress 0.2.0** - 页面加载进度条 ### 工具库 - **Day.js 1.11.13** - 轻量级日期处理库 ### 开发工具 - **ESLint 9.22.0** - 代码质量检查工具 - **Prettier 3.5.3** - 代码格式化工具 - **Vue DevTools 7.7.2** - Vue 开发者工具 ## 📁 项目结构 ``` web-vue/ ├── public/ # 静态资源目录 │ └── favicon.ico # 网站图标 ├── src/ # 源代码目录 │ ├── api/ # API 接口定义 │ │ └── index.ts # 接口类型定义和请求方法 │ ├── assets/ # 静态资源 │ │ ├── base.css # 基础样式变量 │ │ ├── main.css # 全局样式 │ │ └── logo.svg # Logo 图标 │ ├── components/ # 公共组件 │ │ ├── HelloWorld.vue │ │ └── icons/ # 图标组件 │ ├── layouts/ # 布局组件 │ ├── router/ # 路由配置 │ │ └── index.ts # 路由定义和守卫 │ ├── stores/ # 状态管理 │ │ ├── app.ts # 应用全局状态 │ │ ├── counter.ts # 计数器状态 │ │ └── user.ts # 用户状态 │ ├── utils/ # 工具函数 │ │ ├── date.ts # 日期处理工具 │ │ ├── index.ts # 通用工具函数 │ │ └── request.ts # HTTP 请求封装 │ ├── views/ # 页面组件 │ │ ├── AboutView.vue # 关于页面 │ │ └── HomeView.vue # 首页 │ ├── App.vue # 根组件 │ └── main.ts # 应用入口文件 ├── .editorconfig # 编辑器配置 ├── .gitignore # Git 忽略文件 ├── .prettierrc.json # Prettier 配置 ├── eslint.config.ts # ESLint 配置 ├── index.html # HTML 模板 ├── package.json # 项目依赖和脚本 ├── postcss.config.js # PostCSS 配置 ├── tailwind.config.js # Tailwind CSS 配置 ├── tsconfig.json # TypeScript 配置 ├── tsconfig.app.json # 应用 TypeScript 配置 ├── tsconfig.node.json # Node.js TypeScript 配置 └── vite.config.ts # Vite 配置 ``` ## ✨ 功能特性 ### 🎨 主题系统 - 支持明暗主题切换 - CSS 变量驱动的主题系统 - 主题状态持久化存储 ### 💅 UI 样式系统 - Tailwind CSS 原子化样式 - 响应式设计工具类 - 自定义主题配置 - PostCSS 样式处理 - 自动浏览器前缀 ### 🎯 图标系统 - Font Awesome 图标库集成 - 丰富的图标资源 - 矢量图标支持 - 多种图标样式（实心、空心、品牌等） ### 📱 响应式设计 - 移动端、平板、桌面端适配 - 设备类型自动检测 - 窗口大小变化监听 - Tailwind CSS 响应式断点 ### 🔄 状态管理 - Pinia 状态管理 - 状态持久化 - 模块化状态设计 ### 🌐 网络请求 - Axios 请求封装 - 请求/响应拦截器 - 加载进度条集成 - 错误统一处理 ### 🛣️ 路由系统 - 路由懒加载 - 路由守卫 - 页面标题自动设置 ### 🔧 开发体验 - TypeScript 类型检查 - ESLint 代码规范 - Prettier 代码格式化 - Vue DevTools 调试支持 - 热模块替换 (HMR) ## 🛠️ 开发指南 ### 环境要求 - Node.js >= 18.0.0 - npm >= 8.0.0 ### 安装依赖 ```bash npm install ``` ### 开发服务器 ```bash npm run dev ``` 访问 http://localhost:5173 ### 构建生产版本 ```bash npm run build ``` ### 预览生产构建 ```bash npm run preview ``` ### 代码检查 ```bash npm run lint ``` ### 代码格式化 ```bash npm run format ``` ### 类型检查 ```bash npm run type-check ``` ## 📝 开发规范 ### 代码风格 - 使用 4 个空格缩进 - 变量命名采用驼峰命名法 - 函数命名采用下划线命名法 - 所有函数必须包含中文注释 ### 文件命名 - 组件文件使用 PascalCase (如: `HelloWorld.vue`) - 工具文件使用 camelCase (如: `request.ts`) - 页面文件使用 PascalCase + View 后缀 (如: `HomeView.vue`) ### 组件开发 - 使用 Composition API - 优先使用 `