# nxipmp-web-admin

**Repository Path**: chenhonghua/nxipmp-web-admin

## Basic Information

- **Project Name**: nxipmp-web-admin
- **Description**: 🔥Vue3 + Vite5 + TypeScript + Element-Plus 构建的后台管理前端模板，配套接口文档和后端源码，vue-element-admin 的 Vue3 版本。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: nxipmp
- **Homepage**: http://www.nxipmp.cn
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2315
- **Created**: 2024-09-26
- **Last Updated**: 2026-02-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 项目简介

[nxipmp-web-admin](https://gitee.com/chenhonghua/nxipmp-web-admin) 基于 Vue3、Vite、TypeScript 和 Element-Plus 搭建的极简开箱即用企业级后台管理前端模板。 （配套 Java 后端 [youlai-boot](https://gitee.com/youlaiorg/youlai-boot) 和 Node 后端 [youlai-nest](https://gitee.com/youlaiorg/youlai-nest)）。

## 项目特色

- **简洁易用**：基于 [vue-element-admin](https://gitee.com/panjiachen/vue-element-admin) 升级的 Vue3 版本，无过渡封装 ，易上手。
- **数据交互**： 支持 `Mock` 数据和[线上接口文档](https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5)，并提供配套的 [Java](https://gitee.com/youlaiorg/youlai-boot) 和 [Node](https://gitee.com/youlaiorg/youlai-nest) 后端源码。

- **系统功能：** 提供用户管理、角色管理、菜单管理、部门管理、字典管理等功能模块。
- **权限管理：** 支持动态路由、按钮权限、角色权限和数据权限等多种权限管理方式。

- **基础设施：** 提供国际化、多布局、暗黑模式、全屏、水印、接口文档和代码生成器等功能。
- **持续更新**：项目持续开源更新，实时更新工具和依赖。

## 项目源码

| 项目 | Gitee   | Github    | GitCode|
| ---- | ----| ---- | ---- |
| 前端 | [nxipmp-web-admin](https://gitee.com/youlaiorg/nxipmp-web-admin) | [nxipmp-web-admin](https://github.com/youlaitech/nxipmp-web-admin) | [nxipmp-web-admin](https://gitee.com/chenhonghua/nxipmp-web-admin) |
| 精简版 | [vue3-element-template](https://gitee.com/youlaiorg/vue3-element-template) | [vue3-element-template](https://github.com/youlaitech/vue3-element-template) |-|
| 后端 | [nxipmp-api](https://gitee.com/chenhonghua/nxipmp-api)       | [nxipmp-api](https://gitee.com/chenhonghua/nxipmp-api) |[nxipmp-api](https://gitee.com/chenhonghua/nxipmp-api)|

## 环境准备

| 环境                 | 名称版本                                                     | 下载地址                                                     |
| -------------------- | :----------------------------------------------------------- | ------------------------------------------------------------ |
| **开发工具**         | VSCode    | [下载](https://code.visualstudio.com/Download)           |
| **运行环境**         | Node ≥ 20 (其中 20.6.0 版本不可用)    | [下载](http://nodejs.cn/download)                        |

## 项目启动

```bash
# 克隆代码
git clone https://gitee.com/chenhonghua/nxipmp-web-admin.git

# 切换目录
cd nxipmp-web-admin

# 安装 pnpm
npm install pnpm -g

# 安装依赖
pnpm install

# 启动运行
pnpm dev
# 或
make run
```

## 项目构建

执行 `pnpm build` 命令后，项目将被打包并生成 `dist` 目录。接下来，将 `dist` 目录下的文件上传到服务器 `/usr/share/nginx/html` 目录下，并配置 Nginx 进行反向代理。

```bash
pnpm build
# 或
make
```

### 容器镜像构建

```bash
make image
```

## 后端接口

> 如果您具备Java开发基础，按照以下步骤将在线接口转为本地后端接口，创建企业级前后端分离开发环境，助您走向全栈之路。

1. 获取基于 `Java` 和 `SpringBoot` 开发的后端 [nxipmp-api](https://gitee.com/chenhonghua/nxipmp-api.git) 源码。
2. 根据后端工程的说明文档 [README.md](https://gitee.com/chenhonghua/nxipmp-api/blob/nxipmp/README.md) 完成本地启动。
3. 修改 `.env.development` 文件中的 `VITE_APP_API_URL` 的值。