超详细！10分钟开发一个Vue3的后台管理系统

前面我“手把手”教大家开发了基于 Vue2 的管理系统：

有很多人说 vue2 早就过时了，都 22 年了竟然还有人在用 vue2？简直就是个土老帽！

“你有说话的权利，但我不认同你的观点。”任何公司的技术架构不是一蹴而就的，而是随着业务的增长不断升级变化的。技术越新，用的人不一定会很多。

其实我敢说现在国内跟多公司还在用 vue2，未来 3 年用 vue3 的公司才会越来越多。

当然啦，我们要乐于接收新鲜事物，要不断学习不断成长。这次我还是站在前端小白的角度，手把手教大家开发基于 Vue3 的管理系统。

该系统功能非常简单，包含登录、退出、增删改查基本功能，非常适合新手拿来练习。

最后会给出 demo 的完整代码。

1.项目演示

1.登录

2.首页

3.用户管理

4.删除用户

5.查看详情

6.退出

2.技术栈

• vue3
• vite3
• Element Plus

3.项目搭建

本次项目我们使用 vite 进行构建。

和 Vue cli 的效果一样，vite 也是一个构建 vue 项目的脚手架工具。

比起 Vue cli，vite 的热更新速度更快，打包构建速度更快。因为它默认安装的插件很少，所以需要自己额外配置。

前提：安装 node 环境

使用 vite 创建 vue3 脚手架项目：

1.创建项目

# npm 6.x
npm init vite@latest vue3-zhifou --template vue

# npm 7+
npm init vite@latest vue3-zhifou -- --template vue

2.安装依赖

npm install

3.启动

npm run dev

4.初始化项目

修改 App.vue，删除默认的 HelloWorld 组件

4.安装配置 Element Plus

官网：http://element-plus.org/zh-CN/

npm install element-plus --save

在 main.js 配置 Element plus

5.配置路由

npm install vue-router --save 

在 src 文件夹下新建 router 文件夹，然后新建 index.js

在 main.js 中配置路由

6.安装配置 Axios

npm i axios -- save

在 src 文件夹下新建 utils 文件夹，在 utils 文件夹下新建 http 文件夹，然后 新建 axios.js 和 http.js。

1. axios.js：主要用来创建 axios 实例、拦截请求和响应。

2.http.js：主要用来封装各种请求：

3.配置跨域

在 vite.config.js 配置跨域：

target 是后台接口地址。

/api 就是 axios 实例的 baseURL 属性。

7.登录

1.在 /router/index.js 中配置登录的路由：

然后在 view 文件夹下新建 Login.vue

2.搭建登录页面

登录页面主要使用了 Element plus 的 Container 布局容器、卡片、表单以及 Icon 图标。

3.配置 Icon 图标

在登录页面的头部，我们主要使用了 Icon 图标。

在 Element plus 中，Icon 需要单独配置：

4.配置登录表单

绑定表单属性

在 vue3.2 之后，我们不需要在 setup() 方法里面写一堆返回值了，只需要在 script 标签上面加一个 setup 属性，变量和方法默认会导出。

5.新建接口方法

在 src 文件夹下新建 api 文件夹，然后新建 user.js。

user.js 里面就是对应的后台接口。

在 Login.vue 中导入

6.登录校验

新建校验规则

绑定 el-form 的 ref 属性，切记名字要一样。

登录校验：

因为 ref() 返回的是一个对象，所以需要用 ruleFormRef.value 获取值。

7.登录跳转

在 vue3 中没有 this 变量了，所以页面跳转需要导入 route

8.消息提示

在 Element plus 消息提示换成了 ElMessage，需要我们在页面单独导入：

9.重置表单

const resetForm = () => {
  if (!ruleFormRef) return;
  ruleFormRef.value.resetFields();
};

8.后台主页

后台主页主要使用了 Element plus 的 Container 布局容器、导航、下拉菜单。

1.修改路由

2.在 view 文件夹下面新建 Home.vue

3.配置菜单

4.配置 router-view

5.激活菜单功能

主要是使用 sessionStorage 存储当前跳转的路径：

6.首页

跳转到后台主页的时候，默认跳转到首页

9.用户列表

1.修改路由

2.在 view 文件夹下面新建 user 文件夹，这个文件夹主要用来存放用户的页面：

3.开发用户列表页面

用户列表页面主要使用了 Element plus 的输入框、表格、分页组件

4.绑定搜索条件、表格数据、分页数据

5.导入用户接口，绑定用户列表相关方法

因为刚进入用户页面需要展示用户列表数据，根据 vue3 的生命周期，这里在页面加载之后调用获取用户列表的方法：

6.Element plus 设置中文

引入分页组件，发现全是英文属性名

这里需要在 main.js 将 Element plus 配置成中文的：

10.删除

删除用户主要使用了 Element plus 的 ElMessageBox 组件：

11.用户详情

1.修改路由配置

2.跳转用户详情页面

3.新建用户详情页面

用户详情页面主要就是获取传递的 id，然后调用用户详情接口获取数据

12.退出系统

退出系统就是清除缓存，跳转到登录页面

const logout = () => {
    // 清除缓存
    sessionStorage.clear();
    router.push("/login");
}

13.全局函数

• vue3 中没有 Prototype 属性，使用 app.config.globalProperties 去替代
• proxy 可以理解为 vue 的代理对象
• getCurrentInstance 方法获取当前组件实例

1.新建全局函数

2.配置全局函数

3.导入 proxy

4.调用全局函数

14.全局样式

在项目的 style.css 文件中写全局样式

15.总结

Vue2 的开发方式比较固定，在 data 函数里面写属性，在 methods 函数里面写方法。

Vue3 却大相径庭，所有的属性和方法都要写在 setup 函数里面。所以相关代码逻辑比较统一、完整。

完整代码：

链接：https://pan.baidu.com/s/16E1QWL21wNf0DM8xEtP2Nw?pwd=1234 
提取码：1234 

拿到代码之后，先安装依赖

npm install

然后运行项目

npm run dev