# ai-vue **Repository Path**: keepyang/ai-vue ## Basic Information - **Project Name**: ai-vue - **Description**: 一个基于 Vue 3 + Vite 构建的现代化前端项目模板。 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-05-11 - **Last Updated**: 2026-05-11 ## Categories & Tags **Categories**: Uncategorized **Tags**: Vue, vite ## README # AI Vue 项目一个基于 Vue 3 + Vite 构建的现代化前端项目模板。 ## 技术栈 - **Vue 3** - 渐进式 JavaScript 框架 - **Vite** - 下一代前端构建工具 - **Element Plus** - Vue 3 的企业级 UI 组件库 - **Vue Router** - Vue.js 官方路由管理器 - **Pinia** - Vue 3 的状态管理库 - **Sass** - CSS 预处理器 ## 项目结构 ``` ai-vue/ ├── public/ # 静态资源 ├── src/ │ ├── assets/ # 资源文件 │ ├── components/ # 通用组件 │ ├── router/ # 路由配置 │ ├── stores/ # Pinia 状态管理 │ ├── views/ # 页面视图 │ ├── App.vue # 根组件 │ ├── main.js # 入口文件 │ └── style.scss # 全局样式 ├── .gitignore # Git 忽略配置 ├── .husky/ # Git 钩子配置 ├── .eslintrc.js # ESLint 配置 ├── commitlint.config.js # Commit 消息校验配置 ├── index.html # HTML 入口 ├── jsconfig.json # JavaScript 配置 ├── package.json # 项目依赖 ├── README.md # 项目说明 └── vite.config.js # Vite 配置 ``` ## 快速开始 ### 安装依赖 ```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 lint:fix ``` ## 功能特性 ### 路由管理 - 使用 Vue Router 实现页面路由 - 支持编程式导航和声明式导航 - 路径别名 `@` 指向 `src` 目录 ### 状态管理 - 使用 Pinia 进行全局状态管理 - 支持响应式状态和计算属性 - 示例：计数器 Store ### UI 组件 - 集成 Element Plus 组件库 - 支持多种主题和样式 - 丰富的组件供快速开发 ### 样式处理 - 使用 Sass 语法 - 支持变量、嵌套、混合宏等特性 - 全局样式与组件样式分离 ## 使用说明 ### 创建新页面 1. 在 `src/views/` 目录下创建新的 Vue 组件 2. 在 `src/router/index.js` 中注册路由 3. 使用 `` 或 `router.push()` 进行导航 ### 创建新 Store 1. 在 `src/stores/` 目录下创建新的 Store 文件 2. 使用 `defineStore` 定义状态和方法 3. 在组件中使用 `useStore()` 导入并使用 ### 使用 Element Plus 在组件中直接使用 Element Plus 组件： ```vue ``` ## 开发规范 ### Git 提交规范 #### 提交格式 ```bash ():