vite+vue3搭建简易后台管理系统（步骤五：构建侧边栏Aside）

已于 2022-05-17 10:24:18 修改
阅读量703 收藏 1
点赞数
文章标签： vue.js 前端 javascript
于 2022-05-17 10:20:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42709536/article/details/124815596
版权
  1. 查看element官方Menu菜单，查看其代码
    在这里插入图片描述
  2. 想要实现效果：根据所有路由过滤出自己想要展示的路由，然后展示到界面上，定义一个Test1.vue,Test2.vue.Test3.vue 用于展示显示的内容，并在主页中添加展示的route-view.
    在这里插入图片描述
    在这里插入图片描述
  3. 新建Aside.vue文件，根据实现效果编写代码，并添加新路由配置
    在这里插入图片描述
    在这里插入图片描述
  4. 此时启动项目，界面成功展示，点击测试1,2,3可以进行跳转，但是侧边栏界面样式不一致
    在这里插入图片描述
  5. 打开main.css,修改样式，此时界面，也进行了改变
    在这里插入图片描述
    在这里插入图片描述
    （aside代码,下一章）
窗外鸟不停
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用vite+vue3和element-ui实现侧边栏设计
guinue的博客
04-10 238
【代码】利用vite+vue3和element-ui实现侧边栏设计。
vue使用iview解决多级菜单如何渲染问题
猿飞梦的博客
09-28 1013
1、当不确定菜单有多少层级的时候，第一时间就想到使用递归的方式渲染菜单，下面我们来看看如何实现。 2、使用ivew菜单组件，目前项目也用的是这个框架，不熟悉的小伙伴可以先看看这个菜单组件，熟悉的小伙伴我们继续向下看。 3、我的实现思路，判断没有子菜单单的时候，使用组件的正常渲染，如果有子菜单，那就需要加载这个组件 <left-menu-nav />，继续帮我们循环，走下一步 <Menu ref="user" accordion ..
vue3+vite 动态侧边栏+面包屑+当前栈的访问路由
初心
06-28 1085
vue3+vite 效果图 permission.js
Vite + Vue 3 前端项目实战
最新发布
俎树振的博客
06-04 765
使用 Vite 构建工具和 Vue 3 框架来创建和管理前端项目。包含项目初始化、依赖安装、开发服务器配置、路径别名设置、插件使用等
vue + vite + js 后台管理系统：权限控制+路由/菜单动态加载
buchibingqilin的博客
08-18 1823
动态路由影响整个项目的运行，弄清楚整体流程十分重要。在权限控制中还有颗粒度粗细之分，更详细的内容后续再进行补充吧。
vue组件化开发
田兴的博客
09-16 5960
你封装过组件吗？ 说一下组件封装？ 你在项目中是如何封装组件的？ … 以上问题是面试官，最常问到的问题？那么你应该如何回答呢？ 答：我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head，foot，组件等），feature目录内放功能组件（如：swiper，tabbar） 首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的.
vue2+element-ui,el-aside侧边栏容器收缩与展开
im_api的博客
02-16 6556
vue2+element-ui,el-aside侧边栏容器收缩与展开效果
vue3+element-plus的侧边菜单栏的图标的动态渲染
m0_45858045的博客
09-19 722
/ 菜单图标'User','Shop','Orange',])
基于 vite + vue3 搭建的后台管理系统.zip
01-03
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-10
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip ## 简介 vue-element-perfect 是一个后台前端解决方案,它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决...
Vue3+Vite+Ant Design 后台管理系统模板.zip
07-06
Vue3+Vite+Ant Design 后台管理系统模板是一个现代且高效的前端开发框架组合，用于构建功能丰富的Web应用。这个模板结合了Vue.js的最新版本3、Vite构建工具以及Ant Design Vue UI库，旨在提供一个快速开发后台管理...
vite-vue-ts-admin:使用vite2加vue3和typescript搭建的后台管理系统
04-19
Vue 3 +打字稿+ Vite 该模板将帮助您开始在Vite中使用Vue 3和Typescript进行开发。 推荐的IDE设置 + 。 确保在设置中启用vetur.experimental.templateInterpolationService ！ 如果使用[removed] 是当前处于RFC阶段的功能。 要获得语法的正确IDE支持，请使用而不是Vetur（并禁用Vetur）。 TS中.vue导入的类型支持 由于TypeScript无法处理.vue导入的类型信息，因此默认情况下将它们.vue为通用Vue组件类型。 在大多数情况下，如果您真的不在乎模板之外的组件prop类型，那么这很好。 但是，如果您希望在.vue导入中获取实际的道具类型（例如，在使用手动h(...)调用时获取道具验证），则可以使用以下代码： 如果使用手掌 运行Volar: Switch TS Plug
vue实现侧边栏导航效果
10-16
主要为大家详细介绍了vue实现侧边栏导航效果，右侧显示对应内容，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue3+vite+antd 后台管理系统基础模板
02-06
这个"vue3+vite+antd 后台管理系统基础模板"是一个用于快速搭建后台管理系统的项目起点。它集成了Vue3的最新特性、Vite的高效开发环境以及Antd的UI组件，为开发者提供了一个稳定且高效的开发平台。 `.env....
基于vite+vue3+pinia+element-plus+ts后台管理系统
04-08
【标题】"基于vite+vue3+pinia+element-plus+ts后台管理系统"是一个现代的前端开发框架，用于构建高效、可扩展的企业级后台管理界面。这个项目整合了多种前沿的技术，旨在提供一个功能全面、性能优异的解决方案，...
vue3+elementplus侧边栏图标文字箭头不能正常显示的问题
fu2825666010的博客
07-22 873
elementplus官网的自定义图标没太看明白怎么搞，后来自己研究了个方法。把img包裹在el-icon里，问题解决。起码目前自定义图标正常显示，还未发现问题。要求：实现功能，一个侧边栏，可以进行收缩，一级子菜单图标需要自定义，然后箭头需要改为右下。3.箭头样式修改：网上查了好多比较麻烦，研究后发现其实只调transform属性就可以。1.一级菜单无children但是依然有下拉箭头。后来发现，需要用v-if控制子菜单的显示和隐藏。定义了一个数组进行遍历，发现问题。
根据权限路由配置侧边栏菜单（vue3+ts）
zyy151007的博客
11-07 1075
vue+ts+antdesign+vite 实现权限路由配置侧边栏菜单
引领前端布局新风尚：Vue 3 自定义侧边栏菜单组件 - vue-sidebar-menu
gitblog_00046的博客
05-19 1371
引领前端布局新风尚：Vue 3 自定义侧边栏菜单组件 - vue-sidebar-menu 项目地址:https://gitcode.com/yaminncco/vue-sidebar-menu 在构建现代网页应用时，一个优雅的导航系统是不可或缺的组成部分。今天，我们向您隆重推出【vue-sidebar-menu】——一款专为Vue 3设计的侧边栏菜单组件，兼容vue-router，并提供多种自定...
Vue3点击侧边导航栏完成切换页面内组件（WEB）
热门推荐
li-xun的博客
10-23 1万+
Vue3点击侧边导航栏完成切换页面内组件（WEB）
vue3 + vite + js + vue-router4 + pinia + elementPlus + echarts5 搭建后台管理系统
05-01
好的，下面是搭建后台管理系统的简单步骤： 1. 创建项目 使用 Vue CLI 创建项目，选择 vue3 preset，安装完成后进入项目目录。 ``` vue create my-project cd my-project ``` 2. 安装依赖包 安装 vite、vue-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值