# fangy-admin

**Repository Path**: itzero_index/fangy-admin

## Basic Information

- **Project Name**: fangy-admin
- **Description**: 极简的admin，vue3+js
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 8
- **Forks**: 2
- **Created**: 2024-03-14
- **Last Updated**: 2025-06-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, JavaScript, vite

## README

<div align="center" style="margin-bottom: 16px">
    <img src="doc/logo.png" style="width: 240px; height: 240px; border-radius: 50%" />
</div>

<div align="center">
    <img src="https://img.shields.io/badge/Vue-3.4.21-brightgreen.svg"/>
    <img src="https://img.shields.io/badge/Vite-5.2.6-green.svg"/>
    <img src="https://img.shields.io/badge/Element Plus-2.6.2-blue.svg"/>
    <img src="https://img.shields.io/badge/license-MIT-green.svg"/>
    <a href="https://gitee.com/youlaiorg" target="_blank">
        <img src="https://img.shields.io/badge/Author-UnknowPlayer-orange.svg"/>
    </a>
</div>

![](doc/linepng.png)

<div align="center">
  <a target="_blank" href="">📖 阅读文档</a>
</div>

## 项目简介

[fangy-admin](https://gitee.com/itzero_index/fangy-admin) 是基于 Vue3 + Vite5+ js + Element-Plus + Pinia 等主流技术栈构建的免费开源的后台管理前端模板

## 项目特色

- **简洁易用**：极简风，无过渡封装，开箱即可上手

- **数据交互**：自带mock，支持简单的查询，可修改自己的api请求增加isMock参数来控制是否调用mock

- **权限管理**：用户、菜单、字典等完善的权限系统功能

- **基础设施**：动态路由、按钮权限、代码规范、Git 提交规范 **（需要开发按钮权限）**

- **持续更新**：不断关注前沿技术以及项目迭代，确保项目稳定性

- **拓展功能**：引入web worker

## 功能集成说明
> 本地加线上
- element-plus 饿了么UI vue3版
- @vueuse/core vueuse工具库
- axios 请求工具
- dayjs 时间处理工具
- file-saver 下载文件工具
- image-conversion 前端图片压缩工具
- pinia 集中数据仓库
- qs get请求参数处理库
- Big.js 支持精度计算
> 纯本地
- jsx支持
- eslint支持
- husky支持
- 内存优化支持
- mock服务支持
- lint-staged支持
- commit-lint

## 环境准备

| 环境                 | 名称版本                | 下载地址                                                     |
| -------------------- |:--------------------| ------------------------------------------------------------ |
| **开发工具**         | VSCode              | [下载](https://code.visualstudio.com/Download)           |
| **运行环境**         | Node ≥18  建议18.18.2 | [下载](http://nodejs.cn/download)                        |


## 快速开始
```sh
# 拉取项目代码
git clone https://gitee.com/itzero_index/fangy-admin.git
# 安装pnpm
npm install pnpm -g
# 进入项目
cd fangy-admin
# 切换分支
git checkout fangy_v1.0
# 安装依赖
pnpm install
# 安装husky
pnpm run prepare
# 运行mock
pnpm run mock
# 启动项目
pnpm run dev
```

## 项目部署

```bash
# 项目打包
pnpm run build:prod

# 上传文件至远程服务器
将打包生成在 `dist` 目录下的文件拷贝至 `/usr/share/nginx/html` 目录

# nginx 配置
server {
	listen     80;
	server_name  localhost;
	try_files $uri $uri/ /index.html;
	location / {
			root /usr/share/nginx/html;
			index index.html index.htm;
	}
}
```

## 本地Mock

本地默认mock的环境变量[VITE_APP_MOCK]是开启的，为了避免本地全量api都是mock，api需要单独配置isMock为true才生效
```javascript
getUserInfo (id) {
  return service({
    method: 'get',
    url: `/user/${id}`,
    isMock: true // 单独配置是否走mock
  })
}
```

## 注意事项
- 请认真阅读本文档，并且在文档最后有开发前的前置事项，确保你的项目能够满足业务
- 如有bug或者建议，请提ISSUE

## 文件系统
fangy-admin
- .husky husky配置文件
- env 环境变量
- mock mock数据
- node_modules 依赖
- public 公共文件
- src 源码目录
  - api
    - demo
      - demo.js 示例接口
    - index.js 工程自动化文件
    - request.js 请求封装
  - assets 前端静态资源
  - frame 框架内置代码
    - components 框架内置组件
    - frame-pages 用于体验使用的内置页面，如登录，错误页
    - plugins 插件
    - router 路由
    - utils 工具
  - stores pinia仓库
  - views
    - pages 自己的页面
      - home 首页
        - index.vue
      - dashboard 看板
        - index.vue
      - system 系统管理
        - menus 菜单管理
          - index.vue
          - details 详情页
            - index.vue
    - Index.vue 入口页
  - App.vue spa首页
  - main.js 入口js文件
- .editorconfig 编辑器配置
- .eslint.cjs eslint配置
- .gitignore git过滤配置
- .npmrc 项目npm源配置
- .index.html 模板html文件
- LICENSE 协议
- package.json 包管理配置
- README.md
- vite.config.js vite配置

## 开发前置工作
- 前往src/frame/frame-pages/Auth.vue改造自己的【登录页】与【错误页】(登录页是内置的，根据实际需求，二次改造)
- 前往src/api中新建自己的用户服务文件夹添加用户相关接口js代码，如getUserInfo
- 前往src/frame/router/index.js中替换自己的getUserInfo与getMenus接口
- 前往src/views/pages中新建并开发自己的页面（注意：文件目录结构就是菜单结构）

## 体验
账号：admin
密码：admin