第一节：Vben Admin介绍和初次运行_vben.admin

系列文章目录

第一节：Vben Admin介绍和初次运行
第二节：Vben Admin 登录逻辑梳理和对接后端准备
第三节：Vben Admin登录对接后端login接口
第四节：Vben Admin登录对接后端getUserInfo接口
第五节：Vben Admin权限-前端控制方式

---

---

前言

本文是【实战Vben Admin + Python】的第一节，本文内容主要是介绍Vben Admin框架和我们后端使用的技术，开发环境和工具的准备

---

一、Vben Admin是什么？

Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。

官网地址：https://doc.vvbin.cn/
在线预览：https://doc.vvbin.cn/

二、使用步骤

1.环境准备

本地环境需要安装 pnpm、Node.js 和 Git

如果本地开发运行了多个版本的Node.js，推荐使用nvm进行版本管理和切换
（Node Version Manager（NVM） 是一种用于管理多个主动节点.js版本的工具。）

2.代码获取

注意存放代码的目录及所有父级目录不能存在中文、韩文、日文以及空格，否则安装依赖后启动会出错。

# clone 代码
git clone https://github.com/vbenjs/vue-vben-admin.git
1
2

确认版本，我们本次使用的是2.10.1版本

3.安装依赖

验证Node.js安装

# 出现相应npm版本即可
npm -v
# 出现相应node版本即可
node -v
1
2
3
4

pnpm安装

必须使用 pnpm进行依赖安装（若其他包管理器安装不了需要自行处理）。

如果未安装pnpm，可以用下面命令来进行全局安装

# 全局安装pnpm
npm install -g pnpm
# 验证
pnpm -v # 出现对应版本号即代表安装成功
1
2
3
4

依赖安装

在项目根目录下，打开命令窗口执行，耐心等待安装完成即可

# 安装依赖
pnpm i
1
2

目录说明

.
├── build # 打包脚本相关
│   ├── config # 配置文件
│   ├── generate # 生成器
│   ├── script # 脚本
│   └── vite # vite配置
├── mock # mock文件夹
├── public # 公共静态资源目录
├── src # 主目录
│   ├── api # 接口文件
│   ├── assets # 资源文件
│   │   ├── icons # icon sprite 图标文件夹
│   │   ├── images # 项目存放图片的文件夹
│   │   └── svg # 项目存放svg图片的文件夹
│   ├── components # 公共组件
│   ├── design # 样式文件
│   ├── directives # 指令
│   ├── enums # 枚举/常量
│   ├── hooks # hook
│   │   ├── component # 组件相关hook
│   │   ├── core # 基础hook
│   │   ├── event # 事件相关hook
│   │   ├── setting # 配置相关hook
│   │   └── web # web相关hook
│   ├── layouts # 布局文件
│   │   ├── default # 默认布局
│   │   ├── iframe # iframe布局
│   │   └── page # 页面布局
│   ├── locales # 多语言
│   ├── logics # 逻辑
│   ├── main.ts # 主入口
│   ├── router # 路由配置
│   ├── settings # 项目配置
│   │   ├── componentSetting.ts # 组件配置
│   │   ├── designSetting.ts # 样式配置
│   │   ├── encryptionSetting.ts # 加密配置
│   │   ├── localeSetting.ts # 多语言配置
│   │   ├── projectSetting.ts # 项目配置
│   │   └── siteSetting.ts # 站点配置
│   ├── store # 数据仓库
│   ├── utils # 工具类
│   └── views # 页面
├── types # 类型文件
└── vite.config.ts # vite配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

项目启动

# 项目运行
pnpm serve
# 或者 npm run serve
1
2
3

总结

本节文章的目的是Vben Admin的简单介绍，通过配置可以让项目前端运行起来，由于项目默认开启了mock，展示的都是静态模拟数据，我们在此基础上，下一节将研究分析下Vben Admin的目录。为我们后端搭建准备。