# vue-project_1220

**Repository Path**: jaysonjinpf/vue-project_1220

## Basic Information

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

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-01-21
- **Last Updated**: 2025-07-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-project_1220

## 项目简介

`vue-project_1220` 是一个基于 Vue 3 生态系统的现代化前端解决方案。项目采用 Vite 作为构建工具，实现了毫秒级的热更新和快速构建。它深度集成了 Element Plus UI 库、Pinia 状态管理、Vue Router 和 Axios，并内置了国际化、动态权限路由和数据可视化方案，是开发中后台管理系统的理想脚手架。

### 核心特性

- **现代化技术栈**: 使用 Vue 3、Vite 5、Pinia、Vue Router 4 等前沿技术开发。
- **高效开发体验**: Vite 提供极速的服务启动和热更新（HMR）。
- **完善的UI框架**: 集成 Element Plus 和强大的 Vxe-Table 表格组件。
- **状态管理**: 采用官方推荐的 Pinia，轻量、直观且支持 TypeScript。
- **路由与权限**: 内置完整的路由守卫和权限验证逻辑 (`permission.js`)。
- **API 管理**: 统一封装 Axios，集中管理 API 请求。
- **国际化**: 集成 Vue I18n，轻松实现多语言支持。
- **数据可视化**: 集成 ECharts，满足各类图表需求。
- **代码规范**: 使用 Prettier 统一代码风格。

---

## 技术栈

- **核心框架**: [Vue 3](https://vuejs.org/)
- **构建工具**: [Vite](https://vitejs.dev/)
- **路由**: [Vue Router](https://router.vuejs.org/)
- **状态管理**: [Pinia](https://pinia.vuejs.org/)
- **UI 库**: [Element Plus](https://element-plus.org/) & [Vxe-Table](https://vxe-table.com/)
- **HTTP 请求**: [Axios](https://axios-http.com/)
- **CSS 预处理器**: [Sass](https://sass-lang.com/)
- **原子化 CSS**: [Tailwind CSS](https://tailwindcss.com/)
- **图表**: [ECharts](https://echarts.apache.org/)
- **国际化**: [Vue I18n](https://vue-i18n.intlify.dev/)

---

## 快速开始

在开始之前，请确保您的开发环境中已安装 [Node.js](https://nodejs.org/) (推荐 v18+) 和 [pnpm](https://pnpm.io/)。

```bash
# 1. 克隆项目到本地
git clone <你的项目git地址>
cd vue-project_1220

# 2. 安装依赖 (项目推荐使用 pnpm)
pnpm install

# 3. 启动开发服务器
pnpm dev

# 4. 打开浏览器访问 http://localhost:5173 (或 Vite 提示的地址)
```

### 可用脚本

- `pnpm dev`: 启动本地开发服务器。
- `pnpm build`: 将项目打包到 `dist` 目录，用于生产环境。
- `pnpm preview`: 在本地预览生产环境打包后的应用。

---

## 项目结构

项目采用模块化、功能化的目录结构，清晰易懂。

## 开发步骤

    -   1. 登录页面全部完成 √
    -   2. 首页的退出登录，主题颜色设置，侧边栏 √
    -   3. keeplive √
    -   4. 个人中心 √
    -   5. 菜单设置
    -   6. 公共组件 √
    -   7. 图标库的选择引入 √
    -   8. vxe 的封装

## 待解决的问题

- 顶部的tag消除到最后一个时候应该跳转到首页
- 顶部的tag添加右键菜单