# vite-vue-2025

**Repository Path**: caker22/vite-vue-2025

## Basic Information

- **Project Name**: vite-vue-2025
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-31
- **Last Updated**: 2025-12-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 管理系统模板

基于 Vue 3 + TypeScript + Element Plus + Vite 的现代化管理系统模板。

## 目录结构

├── src/ # 源代码目录
│ ├── styles/ # 全局样式目录
│ │ ├── element/ # Element Plus 主题配置目录
│ │ │ └── index.scss # Element Plus 主题变量
│ │ └── index.scss # 全局样式入口
│ ├── views/ # 页面组件目录
│ ├── router/ # 路由配置目录
│ ├── store/ # Pinia 状态管理目录
│ ├── components/ # 公共组件目录
│ ├── utils/ # 工具函数目录
│ ├── api/ # API 接口目录
│ ├── App.vue # 根组件
│ └── main.ts # 应用入口文件
├── public/ # 静态资源目录
├── vite.config.ts # Vite 配置文件
├── tsconfig.app.json # TypeScript 配置文件
├── tsconfig.json # TypeScript 配置文件
├── package.json # 项目配置文件

## 配置文件说明

### 1. TypeScript 配置

#### `tsconfig.app.json`

- 应用的主要 TypeScript 配置文件
- 继承自 `@vue/tsconfig/tsconfig.dom.json`
- 配置路径别名 `@/*` -> `src/*`
- 设置模块解析策略为 `bundler`
- 包含 `vite/client` 类型定义

#### `tsconfig.node.json`

- 用于 Vite 配置的 TypeScript 配置
- 支持 Node.js 类型定义
- 配置 ESNext 模块系统

### 2. Vite 配置

#### `vite.config.ts`

- 开发服务器配置
- 路径别名配置 (`@` -> `src`)
- API 代理配置 (`/api` -> `http://www.test.com`)
- Element Plus 按需导入配置
- SCSS 预处理器配置
- UnoCSS 插件配置

### 3. 样式配置

#### `src/styles/element/index.scss`

- Element Plus 主题变量配置
- 自定义主题颜色（primary: #d21e1e）
- 其他状态颜色配置（success、warning、danger、info）

#### `src/styles/index.scss`

- 全局样式入口文件
- 导入 Element Plus 主题
- 自定义全局样式定义

### 4. 代码规范配置

#### `.eslintrc.js`

- ESLint 规则配置
- Vue 3 推荐规则集成
- TypeScript 支持配置
- 自定义规则：
  - 允许未使用的变量
  - 允许 any 类型
  - 允许空函数
  - 关闭组件命名规则

### 5. Git 配置

#### `.gitignore`

忽略以下文件和目录：

- 依赖目录（node_modules, .pnpm-store）
- 构建输出（dist, dist-ssr）
- 编辑器配置（.vscode, .idea）
- 环境变量文件（除 .env.example）
- 日志文件
- 自动生成的类型声明文件
- 缓存文件

### 6. 编辑器配置

#### `.vscode/settings.json`

- VSCode 编辑器配置文件
- 启用保存时自动格式化功能
- 配置 ESLint 验证的文件类型
- 为不同类型文件指定默认格式化工具
- 配置保存时自动修复 ESLint 问题

#### `.vscode/extensions.json`

- VSCode 推荐插件配置
- Vue Language Features (Volar) - Vue 3 开发必备
- Prettier - 代码格式化工具

#### `.prettierrc`

- Prettier 格式化规则配置
- 关闭分号结尾 (`"semi": false`)
- 使用单引号 (`"singleQuote": true`)
- 设置每行最大长度为 100 (`"printWidth": 100`)
- 移除对象属性末尾逗号 (`"trailingComma": "none"`)
- 箭头函数单参数时省略括号 (`"arrowParens": "avoid"`)
- 自动处理换行符 (`"endOfLine": "auto"`)

## 开发命令

安装依赖
pnpm install
启动开发服务器
pnpm dev
构建生产版本
pnpm build
代码检查
pnpm lint

## 技术栈

- Vue 3 - 渐进式 JavaScript 框架
- TypeScript - JavaScript 的超集
- Vite - 下一代前端构建工具
- Element Plus - Vue 3 组件库
- UnoCSS - 原子化 CSS 引擎
- Pinia - Vue 状态管理库
- Vue Router - Vue.js 官方路由
- ESLint - 代码规范工具

## 开发建议

1. 使用 VSCode 作为开发 IDE
2. 安装推荐的 VSCode 插件
3. 使用 pnpm 作为包管理器
4. 遵循 ESLint 规范开发
5. 使用 TypeScript 编写代码
6. 遵循组件化和模块化开发原则

## 环境要求

- Node.js >= 16
- pnpm >= 7