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

有很多人说 vue2 早就过时了,都 23年了竟然还有人在用 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。
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




更多推荐







所有评论(0)