# 惠淘PC端

**Repository Path**: trident-mall/trident-mall-pc

## Basic Information

- **Project Name**: 惠淘PC端
- **Description**: 三叉戟商城PC端【Vite、Vue3、Pinia、ElementPlus、Sass】
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2024-05-07
- **Last Updated**: 2026-01-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Trident Mall PC 端项目

这是一个基于 Vue 3 和 Vite 构建的现代化前端项目，主要用于开发 Trident Mall 的 PC 端商城应用。该项目使用了 Vue 3 的 `<script setup>` 语法，提供了良好的开发体验和性能优化。

## 项目技术栈

- **Vue 3**：使用最新的 Vue.js 框架，支持 Composition API 和 `<script setup>` 语法。
- **Vite**：基于原生 ES 模块的下一代前端构建工具，提供快速的冷启动和热更新。
- **Element Plus**：基于 Vue 3 的桌面端组件库，提供丰富的 UI 组件。
- **Pinia**：Vue 的新一代状态管理工具。
- **Vue Router**：用于管理前端路由。
- **Axios**：用于处理 HTTP 请求。
- **SCSS**：CSS 扩展语言，提供变量、嵌套等功能。
- **Docker**：用于构建和部署应用容器化。

## 项目结构概览

- **`src/`**：主要源代码目录，包含组件、视图、路由、状态管理等。
- **`public/`**：静态资源目录，如图片、图标等。
- **`dist/`**：构建输出目录，包含打包后的 CSS、JS 和 HTML 文件。
- **`src/apis/`**：封装了与后端交互的 API 接口。
- **`src/components/`**：通用组件目录，如 `TridentHeader.vue`、`TridentFooter.vue` 等。
- **`src/views/`**：页面视图目录，如首页、商品详情页、购物车页等。
- **`src/stores/`**：Pinia 状态管理模块。
- **`src/router/`**：Vue Router 配置文件。
- **`src/utils/`**：工具函数目录，如 HTTP 请求封装、本地存储工具等。
- **`src/style/`**：全局样式文件和 SCSS 变量定义。

## 主要功能模块

- **首页**：展示商城首页内容，包括轮播图、商品推荐、品牌展示等。
- **商品详情页**：展示商品详细信息，包括 SKU、价格、评价、推荐商品等。
- **购物车**：管理用户添加的商品，支持数量调整、删除、结算等功能。
- **订单系统**：包括订单确认、订单详情、订单列表等模块。
- **用户中心**：用户信息管理、地址管理、收藏商品、足迹记录等功能。
- **登录/注册/忘记密码**：用户认证流程。
- **商品搜索与筛选**：支持按分类、价格区间、属性筛选商品。
- **评价系统**：用户可以对购买的商品进行评价。

## 开发工具推荐

- **VS Code**：推荐使用 VS Code 作为开发编辑器。
- **Volar**：Vue 3 的官方插件，提供语法高亮、智能提示等功能。
- **TypeScript Vue Plugin (Volar)**：如果你使用 TypeScript，建议安装此插件以获得更好的支持。

## 构建与部署

- **本地开发**：使用 Vite 快速启动本地开发服务器。
- **构建生产环境**：通过 `vite build` 命令打包项目，输出到 `dist/` 目录。
- **Docker 部署**：项目提供 Dockerfile，支持容器化部署。
- **Nginx 配置**：通过 `nginx.conf` 文件配置反向代理和静态资源服务。

## 项目亮点

- **模块化设计**：组件、API、状态管理高度模块化，便于维护和扩展。
- **响应式布局**：支持 PC 端适配，提供良好的用户体验。
- **性能优化**：使用 Vite 提升开发体验，结合懒加载、缓存策略等优化加载速度。
- **可扩展性强**：基于 Vue 3 和 Pinia 的架构，便于后续功能扩展。

## 开发指南

- **本地开发**：使用 `npm run dev` 启动开发服务器。
- **构建生产环境**：使用 `npm run build` 构建生产环境代码。
- **代码规范**：遵循 Vue 3 最佳实践和 ESLint 规范。
- **组件复用**：通用组件统一存放在 `src/components/` 目录，便于复用。

## 贡献指南

欢迎贡献代码！请遵循以下步骤：

1. Fork 项目。
2. 创建新分支。
3. 提交你的修改。
4. 创建 Pull Request。

## 许可证

本项目采用 MIT 许可证。详情请查看项目根目录下的 `LICENSE` 文件。