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

我心飞翔 分类:vue

前面我“手把手”教大家开发了基于 vue2 的管理系统,有很多人说 vue2 早就过时了,都 22 年了竟然还有人在用 vue2?简直就是个土老帽!

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

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

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

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

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

1.项目演示

1.登录

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

2.首页

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

3.用户管理

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

4.删除用户

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

5.查看详情

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

6.退出

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

2.技术栈

  • vue3
  • vite3
  • Element Plus

3.项目搭建

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

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

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

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

前提:安装 node 环境

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

使用 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
超详细!10分钟开发一个Vue3的后台管理系统!

4.初始化项目

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

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

4.安装配置 Element Plus

官网:http://element-plus.org/zh-CN/
超详细!10分钟开发一个Vue3的后台管理系统!
npm install element-plus --save

在 main.js 配置 Element plus

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

5.配置路由

npm install vue-router --save 

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

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

在 main.js 中配置路由

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

6.安装配置 Axios

npm i axios -- save

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

  1. axios.js:主要用来创建 axios 实例、拦截请求和响应。
超详细!10分钟开发一个Vue3的后台管理系统!
超详细!10分钟开发一个Vue3的后台管理系统!

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

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

3.配置跨域

在 vite.config.js 配置跨域:

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

target 是后台接口地址。

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

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

7.登录

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

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

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

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

2.搭建登录页面

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

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

3.配置 Icon 图标

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

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

在 Element plus 中,Icon 需要单独配置:

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

4.配置登录表单

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

绑定表单属性

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

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

5.新建接口方法

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

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

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

在 Login.vue 中导入

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

6.登录校验

新建校验规则

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

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

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

登录校验:

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

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

7.登录跳转

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

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

8.消息提示

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

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

9.重置表单

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

8.后台主页

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

1.修改路由

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

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

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

3.配置菜单

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

4.配置 router-view

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

5.激活菜单功能

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

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

6.首页

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

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

9.用户列表

1.修改路由

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

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

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

3.开发用户列表页面

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

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

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

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

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

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

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

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

6.Element plus 设置中文

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

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

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

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

10.删除

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

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

11.用户详情

1.修改路由配置

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

2.跳转用户详情页面

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

3.新建用户详情页面

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

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

12.退出系统

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

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

13.全局函数

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

1.新建全局函数

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

2.配置全局函数

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

3.导入 proxy

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

4.调用全局函数

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

14.全局样式

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

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

15.总结

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

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

完整代码:

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

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

npm install

然后运行项目

npm run dev

-END-

一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

回复

我来回复
  • 暂无回复内容