首页 实战

基于Vue3新标准，打造后台综合解决方案

手把手重写vue-element-admin，快速搭建企业级后台产品原型

已完结
|
难度：高级
|
时长：共 27 小时
￥1.00
距离活动结束
报名人数已满
  • 成为集新技术
  • 成为集新技术
  • 成为集新技术
  • 成为集新技术
  • 成为集新技术
  • 成为集新技术
会编码的人有很多，能够提出解决方案的人少，想要高效开发，不仅要会编码，还要懂方案！本课程将基于Vue全新的 <script setup> 语法，手把手带你重写vue-element-admin，不仅能提升你策划方案的能力，更能解决场景众多、功能繁复的后台前端项目中的难题，助力你成为集技术、方案、高效开发于一身的综合性大牛！
展开所有

本章介绍：

本章中，将会对课程的内容做介绍说明，总览课程中涉及到的知识点和学习方向

第1章 课程介绍(了解本课程必看)
2 节｜13分钟
展开
  • 视频：
    1-1 导学
    12:20
  • 图文：
    1-2 课程脑图

本章介绍：

在一线大厂或明星开源项目中，对 代码格式与 Git 提交均有严格的规范要求，不符合规范的代码将无法被提交到 git 仓库。想要晋升大厂高软，第一步先剔除你的“坏习惯”

第2章 标准化大厂编程规范解决方案之ESLint + Git Hooks
16 节｜82分钟
收起
  • 视频：
    2-1 ：为什么需要编程规范？
    04:14
  • 图文：
    2-2 使用 vue-cli 创建项目
  • 图文：
    2-3 升级最新的 vue 版本以支持 script setup 语法
  • 视频：
    2-4 ：大厂编程规范一：代码检测工具 ESLint 你了解多少？
    12:34
  • 视频：
    2-5 ：大厂编程规范二：你知道代码格式化 Prettier 吗？
    03:18
  • 视频：
    2-6 ：ESLint 与 Prettier 配合解决代码格式问题
    10:17
  • 作业：
    2-7 代码格式——讨论题
  • 视频：
    2-8 ：大厂编程规范三：git 提交规范解析
    05:33
  • 视频：
    2-9 ：Commitizen助你规范化提交代码
    14:42
  • 视频：
    2-10 ：什么是 Git Hooks
    03:46
  • 视频：
    2-11 ：使用 husky + commitlint 检查提交描述是否符合规范要求
    15:19
  • 视频：
    2-12 ：通过 pre-commit 检测提交时代码规范
    05:17
  • 视频：
    2-13 ：lint-staged 自动修复格式错误
    05:05
  • 图文：
    2-14 关于 `vetur` 检测 `template` 的单一根元素的问题
  • 作业：
    2-15 git——讨论题
  • 视频：
    2-16 ：总结
    01:26

本章介绍：

明星项目之所以被人追捧，并具备长期可维护、可扩展的能力与项目的基础架构是分不开的。那么如何构建一个明星项目的基础架构，我们在这里将分成两个章节来为你详细介绍！

第3章 项目架构之搭建登录架 构解决方案与实现
24 节｜177分钟
收起
  • 视频：
    3-1 ：前言
    01:46
  • 视频：
    3-2 ：vue3 项目结构解析
    05:44
  • 图文：
    3-3 初始化项目结构
  • 视频：
    3-4 ：vue3 新特性介绍
    18:35
  • 视频：
    3-5 ：全新的提案语法：script setup
    04:20
  • 图文：
    3-6 导入 element-plus
  • 视频：
    3-7 ：构建登录页面 UI 结构
    10:10
  • 视频：
    3-8 ：美化登录页面样式
    10:20
  • 视频：
    3-9 ：Icon 图标处理方案：SvgIcon
    16:36
  • 视频：
    3-10 ：处理内部 svg 图标显示
    11:16
  • 视频：
    3-11 ：使用 svg-sprite-loader 处理 svg 图标
    06:49
  • 视频：
    3-12 ：Vue3.2 响应式优化对应用层的改变
    04:30
  • 视频：
    3-13 ：完善登录表单校验
    10:43
  • 视频：
    3-14 ：密码框状态通用处理
    06:51
  • 视频：
    3-15 ：通用后台登录方案解析
    02:43
  • 视频：
    3-16 ：配置环境变量封装 axios 模块
    07:12
  • 图文：
    3-17 重要-icode获取方法
  • 视频：
    3-18 ：封装请求动作
    09:01
  • 视频：
    3-19 ：登录触发动作
    14:21
  • 视频：
    3-20 ：本地缓存处理方案
    11:08
  • 视频：
    3-21 ：响应数据的统一处理
    07:23
  • 视频：
    3-22 ：登录后操作
    02:53
  • 视频：
    3-23 ：登录鉴权解决方案
    12:31
  • 视频：
    3-24 ：总结
    01:39

本章介绍：

明星项目之所以被人追捧，并具备长期可维护、可扩展的能力与项目的基础架构是分不开的。那么如何构建一个明星项目的基础架构，我们在这里将分成两个章节来为你详细介绍！

第4章 项目架构之搭建Layout架构 解决方案与实现
27 节｜198分钟
展开
  • 视频：
    4-1 ：前言
    03:21
  • 视频：
    4-2 -1：创建基于 Layout 的基础架构
    17:49
  • 视频：
    4-3 -2：创建基于 Layout 的基础架构
    07:11
  • 视频：
    4-4 ：获取用户基本信息
    14:48
  • 视频：
    4-5 ：渲染用户头像菜单
    09:39
  • 视频：
    4-6 ：退出登录方案实现
    05:48
  • 视频：
    4-7 ：用户被动退出方案解析
    01:50
  • 视频：
    4-8 ：用户被动退出解决方案之主动处理
    13:16
  • 视频：
    4-9 ：用户被动退出解决方案之被动处理
    06:19
  • 视频：
    4-10 ：创建页面组件，使用临时 menu 菜单
    06:22
  • 视频：
    4-11 ：动态menu菜单处理方案解析
    04:14
  • 视频：
    4-12 ：业务落地：生成项目页面组件
    02:57
  • 视频：
    4-13 ：业务落地：创建结构路由表
    14:23
  • 视频：
    4-14 ：业务落地：解析路由表，获取结构化数据
    23:04
  • 视频：
    4-15 业务落地：生成动态 menu 菜单
    11:10
  • 视频：
    4-16 ：业务落地：修复最后残余问题
    04:56
  • 视频：
    4-17 ：动画逻辑，左侧菜单伸缩功能实现
    13:06
  • 视频：
    4-18 SidebarHeader 处理
    07:07
  • 视频：
    4-19 全新 vue 能力：组件状态驱动的动态 CSS 值
    03:36
  • 视频：
    4-20 动态面包屑方案分析
    02:34
  • 视频：
    4-21 业务落地：渲染基本的面包屑组件
    04:21
  • 视频：
    4-22 业务落地：动态计算面包屑结构数据
    08:31
  • 视频：
    4-23 业务落地：依据动态数据，渲染面包屑
    06:06
  • 视频：
    4-24 vue3 动画处理
    03:18
  • 作业：
    4-25 任务题
  • 作业：
    4-26 解决方案——讨论题
  • 视频：
    4-27 总结
    01:41

本章介绍：

后台项目中通常会具备很多通用的业务功能，比如：功能引导、国际化、动态换肤、面包屑、HeaderSearch、screenfull 等，这些功能的实现方案，在本章都会进行详解，让你真正成为 《后台前端技术专家》

第5章 后台项目前端综合解决方案之通用功能开发
50 节｜306分钟
展开
  • 视频：
    5-1 开篇
    02:04
  • 视频：
    5-2 国际化实现原理
    06:36
  • 视频：
    5-3 基于 vue-i18n V9 的国际化实现方案分析
    08:36
  • 视频：
    5-4 方案落地：封装 langSelect 组件
    18:57
  • 视频：
    5-5 方案落地：element-plus 国际化处理
    11:54
  • 视频：
    5-6 方案落地：自定义语言包国际化处理
    02:59
  • 视频：
    5-7 方案落地：处理项目国际化内容
    12:40
  • 视频：
    5-8 方案落地：sidebar 与 面包屑 区域的国际化处理
    05:13
  • 视频：
    5-9 方案落地：国际化缓存处理
    03:28
  • 视频：
    5-10 国际化方案总结
    02:41
  • 作业：
    5-11 国际化 ——任务题
  • 视频：
    5-12 动态换肤原理分析
    04:35
  • 视频：
    5-13 动态换肤实现方案分析
    02:10
  • 视频：
    5-14 方案落地：创建 ThemeSelect 组件
    08:15
  • 视频：
    5-15 -1 方案落地：创建 SelectColor 组件
    12:10
  • 视频：
    5-16 -2 方案落地：创建 SelectColor 组件
    09:57
  • 视频：
    5-17 方案落地：处理 element-plus 主题变更原理与步骤分析
    06:28
  • 视频：
    5-18 方案落地：处理 element-plus 主题变更
    29:32
  • 视频：
    5-19 方案落地：element-plus 新主题的立即生效
    02:54
  • 视频：
    5-20 方案落地：自定义主题变更
    08:23
  • 视频：
    5-21 自定义主题方案总结
    02:56
  • 作业：
    5-22 主题方案——任务题
  • 视频：
    5-23 screenfull 原理及方案分析
    03:06
  • 视频：
    5-24 方案落地：screenfull
    06:15
  • 作业：
    5-25 screenfull——任务题
  • 视频：
    5-26 headerSearch 原理及方案分析
    03:56
  • 视频：
    5-27 方案落地：创建 headerSearch 组件
    09:12
  • 视频：
    5-28 方案落地：检索数据源，路由表数据处理
    02:39
  • 视频：
    5-29 方案落地：对检索数据源进行模糊搜索
    07:46
  • 视频：
    5-30 方案落地：数据源重处理，生成 searchPool
    12:04
  • 视频：
    5-31 方案落地：渲染检索数据
    03:30
  • 视频：
    5-32 方案落地：剩余问题处理
    09:24
  • 视频：
    5-33 headerSearch 方案总结
    01:57
  • 作业：
    5-34 headerSearch 方案——任务题
  • 视频：
    5-35 tagsView 原理及方案分析
    04:07
  • 视频：
    5-36 方案落地：创建 tags 数据源
    11:23
  • 视频：
    5-37 方案落地：生成 tagsView
    09:45
  • 视频：
    5-38 方案落地：tagsView 国际化处理
    05:29
  • 视频：
    5-39 方案落地：contextMenu 展示处理
    12:25
  • 视频：
    5-40 方案落地：contextMenu 事件处理
    08:58
  • 视频：
    5-41 方案落地：处理 contextMenu 的关闭行为
    01:57
  • 视频：
    5-42 方案落地：处理基于路由的动态过渡
    06:00
  • 视频：
    5-43 tagsView 方案总结
    01:40
  • 作业：
    5-44 tagsView 方案——任务题
  • 视频：
    5-45 guide 原理及方案分析
    02:58
  • 作业：
    5-46 Guide 业务——任务题
  • 作业：
    5-47 后台解决方案——讨论题
  • 视频：
    5-48 方案落地：生成 Guide
    01:55
  • 视频：
    5-49 方案落地：Guide 业务逻辑处理
    15:09
  • 视频：
    5-50 总结
    01:47

本章介绍：

基于 vue 全新特性的组件化与 element-plus 的综合实例。

第6章 vue3 + element plus 综合实现解决方案与个人中心页面实现
10 节｜55分钟
展开
  • 视频：
    6-1 开篇
    02:14
  • 视频：
    6-2 个人中心模块基本布局
    06:49
  • 视频：
    6-3 创建 PanThumb 头像组件
    14:47
  • 视频：
    6-4 element-plus：项目介绍模块开发
    13:21
  • 视频：
    6-5 接口国际化：处理接口国际化问题
    05:52
  • 视频：
    6-6 element-plus：功能模块开发
    03:31
  • 视频：
    6-7 element-plus：章节模块开发
    03:11
  • 视频：
    6-8 element-plus：作者模块开发
    03:26
  • 作业：
    6-9 vue——讨论题
  • 视频：
    6-10 总结
    01:02

本章介绍：

权限架构的前置处理，结合 Excel 导入、导出的综合实例。让你在了解权限基础的同时，掌握更多的后台解决方案。

第7章 excel 、zip 与前端结合解决方案之用户管理页面实现
25 节｜166分钟
展开
  • 视频：
    7-1 开篇
    02:27
  • 视频：
    7-2 用户列表分页展示 - 1
    12:03
  • 视频：
    7-3 用户列表分页展示 - 2
    08:58
  • 视频：
    7-4 全局属性处理时间展示问题
    08:21
  • 视频：
    7-5 excel 导入原理与实现分析
    03:31
  • 视频：
    7-6 业务落地：提供两种文件导入形式
    09:17
  • 视频：
    7-7 业务落地：文件选择之后的数据解析处理
    17:13
  • 视频：
    7-8 业务落地：文件拖入之后的数据解析处理
    07:29
  • 视频：
    7-9 业务落地：传递解析后的 excel 数据
    09:21
  • 视频：
    7-10 业务落地：处理剩余 bug
    10:26
  • 视频：
    7-11 excel 导入功能总结
    01:29
  • 视频：
    7-12 辅助业务之用户删除
    06:20
  • 视频：
    7-13 excel 导出原理与实现分析
    03:09
  • 视频：
    7-14 业务落地：Export2Excel 组件
    07:25
  • 视频：
    7-15 业务落地：导出前置业务处理
    04:59
  • 视频：
    7-16 业务落地：excel 导出时的时间逻辑处理
    02:02
  • 视频：
    7-17 业务落地：实现 excel 导出逻辑
    15:55
  • 视频：
    7-18 excel 导出功能总结
    01:38
  • 作业：
    7-19 excel 导出功能——任务题
  • 视频：
    7-20 局部打印详情原理与实现分析
    02:50
  • 视频：
    7-21 业务落地：获取展示数据
    07:45
  • 视频：
    7-22 业务落地：渲染详情结构
    13:50
  • 视频：
    7-23 业务落地：局部打印功能实现
    06:33
  • 视频：
    7-24 局部打印功能总结
    00:52
  • 视频：
    7-25 总结
    01:35

本章介绍：

基于 RBAC 权限控制体系的综合解决方案，包含了权限控制、动态权限、页面权限、功能权限等全方面的可完全商用的权限控制体系

第8章 权限控制解决方案与角色、权限控制功能实现
16 节｜128分钟
展开
  • 视频：
    8-1 开篇
    01:47
  • 视频：
    8-2 权限理论：RBAC 权限控制体系
    07:31
  • 视频：
    8-3 辅助业务：角色列表展示
    06:30
  • 视频：
    8-4 辅助业务：权限列表展示
    10:27
  • 视频：
    8-5 辅助业务：为用户分配角色 -1
    14:22
  • 视频：
    8-6 辅助业务：为用户分配角色-2
    14:29
  • 视频：
    8-7 辅助业务：为角色指定权限
    19:57
  • 视频：
    8-8 基于 RBAC 的权限控制体系原理与实现分析
    09:52
  • 视频：
    8-9 -1 业务落地：定义页面权限控制动作，实现页面权限受控
    13:57
  • 视频：
    8-10 -2 业务落地：定义页面权限控制动作，实现页面权限受控
    13:00
  • 作业：
    8-11 权限——任务题
  • 视频：
    8-12 业务落地：重置路由表数据
    05:11
  • 视频：
    8-13 业务落地：创建功能受控指令
    09:21
  • 作业：
    8-14 权限控制——讨论题
  • 作业：
    8-15 创建功能——任务题
  • 视频：
    8-16 总结
    01:12

本章介绍：

动态表格与拖拽排序是企业级后台项目中常见的表格业务，这一章为你彻底解决企业中表格相关的综合业务实例。

第9章 列表排序解决方案与实现热门文章排名功能
16 节｜89分钟
展开
  • 视频：
    9-1 开篇
    02:02
  • 视频：
    9-2 辅助业务：文章排名页面渲染
    12:59
  • 视频：
    9-3 相对时间与时间国际化处理
    06:50
  • 视频：
    9-4 动态表格原理与实现分析
    03:37
  • 视频：
    9-5 方案落地：动态列数据构建
    13:51
  • 视频：
    9-6 方案落地：实现动态表格能力
    07:13
  • 视频：
    9-7 动态表格实现总结
    00:43
  • 视频：
    9-8 拖拽排序原理与实现分析
    03:19
  • 视频：
    9-9 方案落地：实现表格拖拽功能
    09:53
  • 视频：
    9-10 方案落地：完成拖拽后的排序
    13:35
  • 视频：
    9-11 拖拽排序方案总结
    00:39
  • 视频：
    9-12 辅助业务：文章删除
    05:15
  • 视频：
    9-13 辅助业务：文章详情展示
    07:46
  • 作业：
    9-14 表格——讨论题
  • 视频：
    9-15 总结
    00:41
  • 作业：
    9-16 文章详情——任务题

本章介绍：

在现在市面中充斥着各种编辑器轮子的情况下，我们应该如何选择合适我们当前业务的编辑器，以及如何学习和使用它们呢？这一章帮你打通编辑器的任督二脉。

第10章 文章编辑解决方案与实现创建文章功能
10 节｜60分钟
展开
  • 视频：
    10-1 开篇
    01:45
  • 视频：
    10-2 辅助业务：创建文章基本结构实现
    04:37
  • 视频：
    10-3 编辑库选择标准
    10:38
  • 视频：
    10-4 新建文章：markdown 实现
    10:01
  • 视频：
    10-5 新建文章：markdown 文章提交
    08:01
  • 视频：
    10-6 新建文章：markdown 文章编辑
    11:03
  • 视频：
    10-7 新建文章：富文本 实现
    12:50
  • 作业：
    10-8 富文本——讨论题
  • 作业：
    10-9 富文本——任务题
  • 视频：
    10-10 总结
    00:56

本章介绍：

域名、DNS、公网IP、服务器、Nginx是很多前端开发者的薄弱环节，本章节带你彻底补齐你的短板，上线你的项目。

第11章 项目发布解决方案之构建与发布
8 节｜42分钟
展开
  • 视频：
    11-1 开篇
    01:18
  • 视频：
    11-2 项目构建过程分析与实现
    04:52
  • 视频：
    11-3 域名、DNS、公网IP、服务器、Nginx之间的关系
    03:39
  • 视频：
    11-4 阿里云服务器购买指南
    06:05
  • 视频：
    11-5 服务器连接方式
    03:58
  • 视频：
    11-6 Nginx 环境处理
    18:33
  • 视频：
    11-7 项目发布
    02:08
  • 视频：
    11-8 总结
    00:47

本章介绍：

课程总结

第12章 课程总结
1 节｜4分钟
展开
  • 视频：
    12-1 课程总结
    03:32

本章介绍：

element-plus 升级到了 最新的 2.0.0 版本之后，项目出现了一些小问题，现在老师将这些问题整理了下，更新了部分内容哦。

第13章 element-plus 升级
9 节｜37分钟
展开
  • 视频：
    13-1 升级说明及涉及到的内容变化
    02:15
  • 视频：
    13-2 处理Can't reexport the named export 'xxx' ..-
    05:06
  • 视频：
    13-3 element-plus 的国际化问题
    04:16
  • 视频：
    13-4 icons 使用问题
    03:43
  • 视频：
    13-5 样式错误问题
    05:37
  • 视频：
    13-6 解决文章排名报错与button组件警告
    04:07
  • 视频：
    13-7 `menu` 菜单图标显示的问题
    05:47
  • 视频：
    13-8 全局主题替换按钮颜色的替换问题
    02:34
  • 视频：
    13-9 替换主题之后，按钮 `active` 状态下的样式处理
    03:26

本章介绍：

针对于 “后台应用的数据可视化” 功能，提供了专属解决方案，使用了国内最流行的两大数据可视化框架，并且结合 “百度地图 API” 实现了多种常见的后台数据可视化解决方案，课程还结合了实际开发时的各种场景，实现了 “可交互的多图联动的交互效果”，致力于为大家提供：实际开发中 “后台前端数据可视化解决方案...

第14章 数据可视化解决方案（ECharts + AntV）
26 节｜269分钟
展开
  • 视频：
    14-1 前言
    04:43
  • 视频：
    14-2 明确需要导入的资源
    07:23
  • 视频：
    14-3 数据可视化大解析
    14:06
  • 视频：
    14-4 ：构建基础模块结构(1)
    14:16
  • 视频：
    14-5 累计收益-模块划分
    03:33
  • 视频：
    14-6 累计收益-数据模块渲染
    15:59
  • 视频：
    14-7 countup - 让你的数据动起来
    10:02
  • 视频：
    14-8 ：ECharts 使用指南与学习方案(1)
    11:37
  • 视频：
    14-9 -1 累计收益-柱状图与曲线图的混合渲染
    15:37
  • 视频：
    14-10 -2 累计收益-柱状图与曲线图的混合渲染
    10:48
  • 视频：
    14-11 累计收益-混合图表的国际化处理
    04:59
  • 视频：
    14-12 日历模块-日历数据基础渲染
    10:48
  • 视频：
    14-13 日历模块-定制数据可视化处理
    11:34
  • 视频：
    14-14 日金额分析-横向与负坐标图表构建
    19:05
  • 视频：
    14-15 非父子组件之间进行交互的三种方式
    06:53
  • 视频：
    14-16 跨组件通讯-日历图与柱状图联动处理
    05:19
  • 视频：
    14-17 大区营销-饼图图表构建
    13:01
  • 视频：
    14-18 ：文档云图-WordCloud 基础渲染(1)
    13:16
  • 视频：
    14-19 文档云图-基于图形轮廓的绘制
    03:38
  • 视频：
    14-20 ：地图可视化：百度地图 API 大解析(1)
    05:50
  • 视频：
    14-21 地图可视化：百度地图 + ECharts 完成可视化渲染
    23:41
  • 视频：
    14-22 大区营销数据分析-基础结构渲染
    04:20
  • 视频：
    14-23 大区营销数据分析-渲染大区结构视图
    11:28
  • 视频：
    14-24 大区营销数据分析-基于 AntV S2 构建表格数据可视化
    21:25
  • 视频：
    14-25 大区营销数据分析-表格图谱与大区联动
    03:57
  • 视频：
    14-26 总结
    01:15
本课程已完结
东东老师
工程师， 已有104个学生
不为别的，只为提升面试通过率
尽管课程时间很长，
但没关系，我们有老师的陪伴，
还有同学之间互相鼓励，彼此帮助，
完成学习后，还能获得慕课网官方认证的证书。
查看更多
数据加载中...
《基于Vue3新标准，打造后台综合解决方案》的真实评价
综合评分：分，共 人参与
篇幅原因，只展示最近100条评价
￥1.00
报名人数已满

学习咨询

选课、学习遇到问题？

扫码添加指导老师 1V1 帮助你！

添加后老师会第一时间解决你的问题

意见反馈 帮助中心 APP下载
官方微信