- 综合排序
- 最热优先
- 最新优先
- 来自专栏vue前端之路
BuildAdmin01：我和前端
有一天，在ElementUI的网站上，看到了*BuildAdmin*开源项目，于是开始打算从项目入手。先了解项目中的技术，然后通过官网深入学习。 在拆解还原BuildAdmin的过程中，虽然很多地方都是用了项目中的代码，但是我都是研究学习并了解其中含义之后才会使用。 这是我从BuildAdmin学习前端中做过的笔记，包括项目中用到的技术栈、对各个模块实现的拆解，以及开发中遇到的问题等等，在走走停停的学习过程中，回头看有些许收获。 BuildAdmin 1. 项目文档 项目文档：https://wonderful-code.gitee.io 代码仓库地址：https://gitee.com/wonderful-code/buildadmin 先看BuildAdmin 下一篇开始讲BuildAdmin的项目架构以及代码开发。
1.1K20编辑于 2024-06-11 - 来自专栏入门到放弃之路
BuildAdmin09：tab的关闭，让滑动块何去何从
关闭激活tab 如果关闭的是激活的tab，在BuildAdmin中就让滑动块跳到最后一个（如果你想跳到相邻的tab，也可以实现）。在上面的代码中可以看出来这种情况调用了toLastTab方法。
56100编辑于 2024-06-11 - 来自专栏入门到放弃之路
BuildAdmin04：vue加载本地svg图标
上图为BuildAdmin全屏图标的svg文件，可以看到内容是xml，然后最右边是svg表示一个全屏图标。所以我们需要将svg文件加载到Icon中，使其作为图标被使用。 BuildAdmin在src/assets/icons下存放了很多svg图片，我们要将这些svg封装到<Icon>中。在BuildAdmin中，使用的是node的fs模块来读取这些svg进行的加载。 结语 本篇文章主要讲了本地svg文件，如何通过Icon来渲染成图标，这一块与BuildAdmin的实现是完全不同的，就像在第一篇文章所写的，学习别人的东西，可以理解后照抄，但遇到问题也能自己解决。
1K20编辑于 2024-06-11 - 来自专栏入门到放弃之路
BuildAdmin03：为什么要定义图标组件
关键字：BuildAdmin、Icon、图标、Vue、ElementUI 前言 说到图标，在BuildAdmin中用到的地方很多。比如上一篇中的折叠图标，还有菜单栏图标、导航菜单栏图标等。 图标icon BuildAdmin在aside中主要使用了两种图标： 1. 菜单图标 用的是官方 @element-plus/icons-vue 。 npm i font-awesome 图标使用 BuildAdmin中，封装了一个Icon组件，作为定义图标的组件。 后来会重点分析代码，这里先思考：为什么要为图标单独封装一个组件？
78550编辑于 2024-06-11 - 来自专栏入门到放弃之路
BuildAdmin05：如何玩转Vue路由动态加载
关键字：BuildAdmin、vue-router、路由、Vue、ElementUI 前言 首先，在BuildAdmin中讲的路由，指的就是vue-router。 vue-router在BuildAdmin中主要实现了菜单栏和tabs标签页两大模块，而这两个模块是比较复杂的，所以对vue-router需要有一个很好的掌握。 初始化路由对象 在BuildAdmin中，路由没有写在某一个vue组件中，而是将其独立成一个router模块。 动态加载路由 在BuildAdmin中，处理动态路由的代码还是挺多的，主要封装在@/util/router.js中，一共399行代码。 我根据自己的需求，重构、重写了方法，然后与BuildAdmin的代码学习印证。
1.4K00编辑于 2024-06-11 - 来自专栏入门到放弃之路
BuildAdmin07：导航栏动态添加tabs如何实现
通过源码，来看看BuildAdmin的header是如何实现的。 可以看到header的内容是由 \<component> 动态组件实现的，使用is属性绑定不同的导航栏组件。 一开始BuildAdmin使用的就是默认布局。我在这里不需要使用动态组件，也不需要实现其他三个布局组件，我只实现一个默认布局的navBar。 BuildAdmin中是在navBar中通过deep透传样式给子元素tab的。我这里直接抽离这部分代码直接到tab.vue中，这样便于直观阅读，我们看一下添加css后的样式。 在BuildAdmin中的tabs.vue中实现了动态添加tab的功能。
1.3K20编辑于 2024-06-11 - 来自专栏入门到放弃之路
BuildAdmin08：导航栏tab的滑动块如何实现
这是实现新增、关闭等功能后的tabs.vue，里面绑定的方法逻辑都是我基于BuildAdmin重构实现的，后面在讲滑动块的时候，可以回来看看图中html的代码。 首个tab 在第一次访问BuildAdmin或者刷新页面时，导航栏只有一个tab，这里选择是将 控制台 设置成了第一个tab。
99212编辑于 2024-06-11 - 来自专栏入门到放弃之路
BuildAdmin10：ElementPlus的弹出框，真的用不了
在BuildAdmin中，对导航栏的tab页同样也实现了这样的功能。 tab弹出框 BuildAdmin在src/components/contextmenu/index.vue中定义了弹出框组件。 实现弹出框 抛开BuildAdmin的代码不谈，如果让我自己来实现这样的弹出框组件，我肯定先去Element的官网看看什么组件符合我的预期。 上面也说了BuildAdmin没有使用el-popover，使用的el-popover渲染后的html元素。
1.3K00编辑于 2024-06-11 - 来自专栏入门到放弃之路
BuildAdmin14：关闭tab，居然用了vue-router的重定向
具体实现思路可以跳转文章BuildAdmin09：tab的关闭，让滑动块何去何从查看。 在BuildAdmin中tabs的实现中，默认的firstRoute是控制台。 也就是说，当关闭最后一个tab后，就要打开（跳转）控制台的tab（路由）。 BuildAdmin09：tab的关闭，让滑动块何去何从的clostTab方法中，在实现关闭tab后，调用toLastTab方法打开新的tab页。 但在BuildAdmin中，是跳转的admin路由，然后定义了一个Loading路由进行重定向到firstRoute（控制台）。 匹配不到的路由 在BuildAdmin什么时候匹配不到路由呢？
98321编辑于 2024-06-11 - 来自专栏入门到放弃之路
BuildAdmin02：前端架构布局和菜单栏折叠的实现
前言 上一篇主要讲了我学习前端的一个经历，以及为什么选择BuildAdmin作为深入前端学习的原因.同事也大致聊了一下学习前端需要使用哪些技术栈。 本篇文章来拆解一下BuildAdmin的前端代码结构，和布局实现的细节。 前端代码结构 必须先了解项目的结构，才能明确每个功能模块的代码在哪写。 在BuildAdmin中，有很多时候都会出现 ?.，这便是防止出现空指针异常的可选链写法，原则就是：有就用，没有就不用。 假设一个对象obj，没有name属性。 架构布局 BuildAdmin作为一个管理平台，首先要完成布局部分。 我们先看BuildAdmin的布局： 可以看到BuildAdmin的整体布局是由：菜单边栏aside、导航header和中心区域main组成的。
2.1K41编辑于 2024-06-11 - 来自专栏入门到放弃之路
BuildAdmin13：区区重新加载，vue居然用了mitt事件总线库
$mitt.on('eventName', function(args)) BuildAdmin和mitt 从上面样例看到，调用emit和on需要使用this.$mitt，即mitt实例。 在BuildAdmin中，我们使用的proxy.eventBus来调用的emit和on，也就是说proxy.eventBus代表的就是mitt实例，我们看看两者之间是如何关联的。
65600编辑于 2024-06-11 - 来自专栏vue前端之路
BuildAdmin19：如何使用el-popover弹出框，实现个人资料页面
前言作为从拆解实现buildadmin入手学习前端系列的第19篇，buildadmin的框架建设部分已经接近了尾声，导航菜单栏作为框架的最后一部分，在之前实现了全屏、回到首页以及上一篇暗黑模式的切换。 参照Buildadmin的实现，在点击头像用户名区域时，还会有个弹出框显示一些信息。头像框实现上面我其实是用了img标签实现了头像框，但是最终没有显示。 对于BuildAdmin的路由信息，大多都是从后台json请求返回的，在控制台中可以看到个人资料页的component页面路径。 路由信息因为我这里还没有后台，所以路由信息的json都是写死在了代码中，至于后面动态渲染路由，就和BuildAdmin是一样的流程，在之前的BuildAdmin05：如何玩转Vue路由动态加载有提到。 BuildAdmin05：如何玩转Vue路由动态加载BuildAdmin07：导航栏动态添加tabs，vue如何实现
1.3K10编辑于 2024-09-24 - 来自专栏入门到放弃之路
BuildAdmin16：边栏隐藏、页面全屏，我用vue是如何实现的
在BuildAdmin中，一共实现了两种全屏。一种是main区域全屏，即边栏消失，页面占据整个浏览器页面，是在弹出框的实现的。 另一种全屏是页面占据整个显示器屏幕，是在后面的导航菜单栏实现的。 在vue中，v-if和v-show同样也是用于决定组件是否渲染（展示），BuildAdmin中使用的是v-if。 ESC用于取消整个屏幕的那种全屏，对于这种全屏BuildAdmin中定义了一个取消按钮按钮组件，来实现取消全屏。 （position:fixed） closeFullScreen组件 BuildAdmin中定义了closeFullScreen.vue来实现取消全屏的组件。 结语 至此，弹出框的设计和功能实现已经全部完成了，在BuildAdmin管理系统页面设计架构，只剩下导航菜单栏这部分还没有写。
1.6K00编辑于 2024-06-11 - 来自专栏vue前端之路
BuildAdmin20：前端项目如何设计一个异步API请求模块
在之前拆解BuildAdmin的项目中，因为一直在构建前端页面的各个模块，就没有开发后端接口。后面就打算开始后端开发，例如菜单的请求、数据页面的渲染等等。 axios工具类 在BuildAdmin的前端请求中都是异步请求。所以在封装请求模块的时候，我们就是用axios模块来实现。先去官网看看axios的样例。
57620编辑于 2025-02-13 - 来自专栏入门到放弃之路
BuildAdmin17：一个按钮实现网页全屏，vue是如何做到的
前言在之前的十几篇文章中，整个BuildAdmin后台管理系统完成了layout布局、菜单栏、tabs标签栏的设计，那么后端管理系统整体框架的最后一个部分就是导航菜单栏。 回到首页这个模块还是比较简单的，在BuildAdmin中这个回到首页的功能是：打开一个新的标签页，回到BuildAdmin的官网首页。 实现原理就是点击一下，跳转到BuildAdmin的首页，也就是一个\标签。在vue的架构中，使用router来实现跳转。我在这里的设计是回到/首页，也就是dashboard。 功能的页面全屏涉及了多个组件（header、aside)，各个组件之间需要通信，来完成隐藏展开，所以在使用pinia定义了全局共享变量navTabs.state.tabFullScreen，具体实现可以参考之前的文章：BuildAdmin16
2K21编辑于 2024-04-23 - 来自专栏入门到放弃之路
BuildAdmin15：一键关闭所有tab，vue是如何做到的
closeOther': closeOtherTab(menu) break case 'closeAll': closeAllTab(menu) break 关闭其他标签 BuildAdmin 在BuildAdmin中，定义了closeAllTab方法来关闭所有标签。 关闭所有标签 BuildAdmin中，控制台是firstRoute。所以当我们关闭所有标签时，会在tabs栏自动创建渲染控制台的tab。 方案 出现这种现象的原因，就是之前讲的keep-alive的缓存机制导致的，具体可以参考BuildAdmin13：重新加载和keep-alive缓存。 可以参考BuildAdmin14：关闭tab的mitt实现 onTabViewClose事件的实现。这两个部分的具体实现我这里就不写了，因为BuildAdmin中也是默认不删除缓存。
82410编辑于 2024-06-11 - 来自专栏入门到放弃之路
BuildAdmin12：vue3中子组件调用父组件方法，实现弹出框
menu字段在BuildAdmin中指的是菜单路由，这个munu是如何赋值的呢？ 结语 本篇主要根据vue3中父子组件方法调用通信,讲了BuildAdmin的弹出框标签功能架构的实现,主要是对emit的一个理解和使用.下一篇文章写重新加载标签功能的具体实现.
85800编辑于 2024-06-11 - 来自专栏入门到放弃之路
BuildAdmin11：弹出框的弹出和隐藏以及标签禁用的小skill
下面是没有加length判断的情况： BuildAdmin在实现重新加载禁用时，就没做length的判断。 在第七篇写tab及滑动块实现时，因为一些技术问题，就用了和BuildAdmin不一样的方法进行实现的。所以后面涉及tab的部分需要做一些适当的修改。
1K00编辑于 2024-06-11 - 来自专栏入门到放弃之路
BuildAdmin18：网站一键切换暗黑模式，到底是如何实现的
前言 之前的菜单栏想按照BuildAdmin的模式，来实现一个 Terminal 终端。 我以为是和CRT这样交互式终端，结果是类似于预编辑的命令脚本，然后在远程服务器上执行，和预想的结果不太一样。 其实到这里也还好，只不过后来的terminal库没有研究明白，所以就直接将 terminal 的图标，直接换成了暗黑模式切换图标，借此实现了BuildAdmin暗黑模式和正常模式的切换。 详情可参考文章BuildAdmin08：导航栏tab的滑动块如何实现。 这里主要使用 useDark 和 useToggle 来切换暗黑模式。
66910编辑于 2024-09-10 - 来自专栏入门到放弃之路
BuildAdmin06：进度条和Loading页面的实现，路由导航守卫告诉你答案...
BuildAdmin在@/util/loading.ts里，实现了Loading页面。我直接copy过来了，但是要学习人家的实现思路，有时间的话可以DIY一下自己喜欢的Loading样式。 结语 这就是BuildAdmin中进度条和Loading页面的实现，主要是对router路由导航守卫的一个结合使用。 我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！
82500编辑于 2024-06-11
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号