README.md - Social Auto Upload

README.md

1	# Vue3 + Vite 项目
2
3	一个基于 Vue3、Vite、Element Plus、Pinia、Vue Router 和 Axios 的现代化前端项目模板。
4
5	## 🚀 特性
6
7	- ⚡️ Vite - 极速的构建工具
8	- 🖖 Vue 3 - 渐进式 JavaScript 框架
9	- 🎨 Element Plus - 基于 Vue 3 的组件库
10	- 🗂 Vue Router - 官方路由管理器（WebHash 模式）
11	- 📦 Pinia - 新一代状态管理
12	- 🔗 Axios - HTTP 请求库（已封装）
13	- 🎯 Sass - CSS 预处理器
14	- 📁 规范化目录结构 - views 存放页面，components 存放组件
15	- 🔧 完整配置 - 包含开发和生产环境配置
16
17	## 📦 安装
18
19	```bash
20	# 安装依赖
21	npm install
22
23	# 启动开发服务器
24	npm run dev
25
26	# 构建生产版本
27	npm run build
28
29	# 预览生产构建
30	npm run preview
31	```
32
33	## 📁 项目结构
34
35	```
36	src/
37	├── api/ # API 接口
38	│ ├── index.js # API 统一导出
39	│ └── user.js # 用户相关 API
40	├── components/ # 公共组件
41	│ └── HelloWorld.vue # 示例组件
42	├── router/ # 路由配置
43	│ └── index.js # 路由主文件
44	├── stores/ # 状态管理
45	│ ├── index.js # Pinia 配置
46	│ └── user.js # 用户状态
47	├── styles/ # 样式文件
48	│ ├── index.scss # 主样式文件
49	│ ├── reset.scss # 重置样式
50	│ └── variables.scss # 样式变量
51	├── utils/ # 工具函数
52	│ └── request.js # HTTP 请求封装
53	├── views/ # 页面组件
54	│ ├── Home.vue # 首页
55	│ └── About.vue # 关于页面
56	├── App.vue # 根组件
57	└── main.js # 入口文件
58	```
59
60	## 🔧 配置说明
61
62	### 环境变量
63
64	- `.env` - 通用环境变量
65	- `.env.development` - 开发环境变量
66	- `.env.production` - 生产环境变量
67
68	### 路由配置
69
70	项目使用 Vue Router 4，配置为 WebHash 模式，路由文件位于 `src/router/index.js`。
71
72	### 状态管理
73
74	使用 Pinia 进行状态管理，store 文件位于 `src/stores/` 目录。
75
76	### HTTP 请求
77
78	Axios 已经过封装，包含：
79	- 请求/响应拦截器
80	- 错误处理
81	- Token 自动添加
82	- 统一的响应格式处理
83
84	使用方式：
85	```javascript
86	import { http } from '@/utils/request'
87
88	// GET 请求
89	const data = await http.get('/api/users')
90
91	// POST 请求
92	const result = await http.post('/api/users', { name: 'John' })
93	```
94
95	### 样式系统
96
97	- 使用 Sass 作为 CSS 预处理器
98	- 已删除所有浏览器默认样式
99	- 提供了完整的样式变量和工具类
100	- 支持 Element Plus 主题定制
101
102	## 🎨 组件库
103
104	项目集成了 Element Plus，所有组件都可以直接使用：
105
106	```vue
107	<template>
108	<el-button type="primary">按钮</el-button>
109	<el-input v-model="input" placeholder="请输入内容"></el-input>
110	</template>
111	```
112
113	## 📝 开发规范
114
115	1. 页面组件放在 `src/views/` 目录
116	2. 公共组件放在 `src/components/` 目录
117	3. 使用 setup 语法糖编写组件
118	4. 样式使用 Sass 并遵循 BEM 命名规范
119	5. API 请求统一放在 `src/api/` 目录
120	6. 状态管理按模块划分，放在 `src/stores/` 目录
121
122	## 🚀 部署
123
124	```bash
125	# 构建生产版本
126	npm run build
127
128	# 构建完成后，dist 目录包含所有静态文件
129	# 可以部署到任何静态文件服务器
130	```
131
132	## 📄 许可证
133
134	MIT License
135

135 lines MARKDOWN