# PC端之Vite+Js框架

**Repository Path**: trident-framework/trident-pc-vite-js

## Basic Information

- **Project Name**: PC端之Vite+Js框架
- **Description**: PC端之Vite+Js框架【Vue3、Vite、Js、Element-plus、Pinia、Axios、Sass、Svg、Echarts、Moment、Nprogress】
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-23
- **Last Updated**: 2025-10-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PC端之Vite+Js框架

## 介绍
这是一个基于 Vite + JavaScript 的前端开发框架，适用于 PC 端的开发需求。项目集成了常用的开发依赖和组件，旨在提升开发效率并提供良好的开发体验。

## 软件架构
- **构建工具**: 使用 [Vite](https://vitejs.dev/) 作为项目构建工具，提供快速的开发服务器启动和热更新体验。
- **前端框架**: 基于 Vue.js，采用组件化开发模式。
- **状态管理**: 使用 [Pinia](https://pinia.vuejs.org/) 作为状态管理工具，支持模块化和持久化。
- **UI 组件**: 集成 [Element Plus](https://element-plus.org/)，提供丰富的 PC 端 UI 组件。
- **网络请求**: 使用 [Axios](https://axios-http.com/) 进行 HTTP 请求管理，并封装了统一的请求拦截和响应处理。
- **路由管理**: 使用 [Vue Router 4](https://router.vuejs.org/) 实现前端路由控制。
- **工具库**: 集成了 [Underscore.js](https://underscorejs.org/)、[NProgress](https://ricostacruz.com/nprogress/)、[Sass](https://sass-lang.com/) 等常用工具库。

## 安装教程
1. 安装项目依赖：
   ```bash
   npm install
   ```

2. 安装项目所需的额外依赖包：
   ```bash
   npm i axios -S
   npm i element-plus --save
   npm i nprogress
   npm i underscore
   npm i pinia-plugin-persistedstate
   npm i pinia
   npm i sass
   npm i vue-router@4
   npm i vite-plugin-svg-icons -D
   npm i fast-glob -D
   npm i vue-cropper@next
   ```

## 使用说明
- 项目入口文件为 `src/main.js`，负责初始化 Vue 应用并挂载路由和 Pinia 状态管理。
- 所有页面组件存放在 `src/views` 目录下，按功能模块划分。
- 组件库存放在 `src/components` 目录下，可复用的 UI 组件统一管理。
- API 接口请求封装在 `src/apis` 目录下，统一管理后端接口。
- 样式文件存放在 `src/style` 目录下，使用 SCSS 进行样式管理。
- 工具类函数存放在 `src/utils` 目录下，如本地存储、时间处理、滚动监听等。

## 参与贡献
1. Fork 本仓库。
2. 新建 Feat_xxx 分支。
3. 提交代码。
4. 新建 Pull Request。

## 特技
1. 使用 `Readme_XXX.md` 来支持不同的语言，例如 `Readme_en.md`, `Readme_zh.md`。
2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)。
3. 你可以访问 [https://gitee.com/explore](https://gitee.com/explore) 来了解 Gitee 上的优秀开源项目。
4. [GVP](https://gitee.com/gvp) 是 Gitee 最有价值开源项目，综合评定出的优秀开源项目。
5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)。
6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)。