Vue学习记录10--顶栏

最新推荐文章于 2023-05-01 18:14:12 发布
最新推荐文章于 2023-05-01 18:14:12 发布
阅读量96 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AMWICD/article/details/124231173
版权

header组件搭建

在这里插入图片描述
因为index.less文件里面已经引入了其他的less文件，所以在main.js文件中只需引入index.less文件即可
在这里插入图片描述
在这里插入图片描述
启动项目，可以发现一些字体大小发生了变化。
在这里插入图片描述

header组件样式

在这里插入图片描述
在这里插入图片描述
在Main.vue中引入
在这里插入图片描述
在这里插入图片描述
面包屑导航：
在这里插入图片描述
下拉菜单组件（dropdown）
引入用户头像
在这里插入图片描述
在这里插入图片描述
为图片添加下拉菜单
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

小金金金金鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
本项目是基于Vuepress框架 Vuepress-theme-hope主题搭建的一个个人学习笔记文档站点，项目内记.zip
02-23
8. `kwan1117`：这个文件或目录可能是作者的学习笔记，具体内容可能包括 JavaScript、前端开发、Vue.js、Vuepress 使用教程、项目经验分享等。 通过这个项目，我们可以学习到如何使用 Vuepress 构建个人知识库，...
Vue学习笔记进阶篇之vue-router安装及使用方法
12-03
当用户在浏览器地址栏中更改路径时，Vue Router 将自动切换对应的组件，实现页面内容的更新，而无需完整页面刷新。 在安装 Vue Router 时，首先确保你已经使用 vue-cli 创建了一个项目。进入项目目录，例如 `my-...
前端插件库之vue3使用vue3-cropper上传头像（裁剪图片、上传）
weixin_46372074的博客
06-28 2611
vue3-cropper切割图片并上传
vue3头像上传组件
pscool的博客
05-01 2443
使用AvatarUpload.vue 后端 上传接口 配置mvc
在vue3项目中引入element-plus的Icon图标
热门推荐
weixin_44775694的博客
05-21 1万+
Element Plus 是为适配 Vue3 而对 Element UI 进行重构后产生的前端组件库，包含丰富的基础组件。官方网址为：一个 Vue 3 UI 框架 | Element Plus 在Vue项目中使用Element-plus的Icon图标，包括按钮和动态菜单等，接下来是引入在vue3项目中引入Icon图标的步骤。 安装（使用包管理器）： # 选择一个你喜欢的包管理器 # NPM $ npm install @element-plus/icons-vue # Yarn $ y...
Vue学习记录三 --- vue的项目实战
小jiang的博客
05-04 5938
Vue学习记录三 --- vue的项目实战
VUE-2.X学习笔记day8
04-30
在Vue 2.x的学习过程中，第八天的笔记主要聚焦于框架的核心特性和实践技巧，旨在深化开发者对Vue的理解和应用能力。以下是一些关键的知识点： 1. **组件化**：Vue的核心特性之一就是组件化，它允许我们将复杂的UI...
Vue开发基于vue-cli搭建的仿TIM纯前端页面.zip
05-20
记住，持续学习和实践是提升技术的关键，Vue.js和vue-cli的组合为开发者提供了强大的工具，助力高效开发。在实际项目中，还要考虑代码优化、性能测试、错误处理等多方面因素，以确保应用的稳定性和用户体验。
Vue2.5-2.6-3.0 开发去哪儿网App源码.zip
12-16
在这个"Vue2.5-2.6-3.0开发去哪儿网App源码.zip"压缩包中，我们可以深入学习和研究如何使用Vue的不同版本来开发类似去哪儿网的移动应用。 首先，Vue 2.5是Vue.js的一个稳定版本，引入了例如`async components`和`...
尚品汇项目思维导图 根据思维导图进行复习
07-13
尚品汇项目思维导图 根据思维导图进行复习
全网最热Python3入门+进阶 更快上手实际开发
07-13
网最热Python3入门+进阶 更快上手实际开发 第1章 Python入门导学.mp4 239.6MB 第9章 高级部分：面向对象 第8章 Python函数 第7章 包、模块、函数与变量作用域 第6章 分支、循环、条件与枚举 第5章 变量与运算符 第4章 Python中表示“组”的概念与定义 第3章 理解什么是写代码与Python的基本类型 第2章 Python环境安装 第1章 Python入门导学 第14章 Pythonic与Python杂记 第13章 实战：原生爬虫 第12章 函数式编程： 匿名函数、高阶函数、装饰器
Go：Go语言项目实战教程
07-14
Go：Go语言项目实战教程
反恐精英游戏CS1.6安装好后界面看不到菜单，改中文，并调整分辨率
最新发布
07-14
反恐精英游戏CS1.6安装后，很多人打开后界面是看不到菜单的，一般是因为分辨率不对，将这个.reg导入即可完成设置。 下载完成后，双击运行该文件，按照提示进行操作。在导入过程中，可能会出现警告信息，点击“是”或“确定”继续。 导入成功后，重新启动CS1.6游戏，你会发现界面已经调整为正确的分辨率，菜单也能够正常显示了。这样，你就可以愉快地享受游戏了。
垫板凸模加工及三数控机床视化仿真的研究（毕业论文）
07-14
【作品名称】：垫板凸模加工及三数控机床视化仿真的研究（毕业论文） 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】：在计算机技术迅猛发展的同时，数控技术也迎来了革命性的变化，计算机仿真、模拟技术已成为实际加工的前提，它省去了大量的工作量，提高了生产效率，最重要的是模拟、仿真技术将实际加工中的材料损失降到了最低，大大节约了加工成本。作者在查阅和搜索了大量与本毕业设计相关资料的基础上，对数控技术，特别是其中的模拟仿真技术进行深刻的认识和研究，并在指导老师的耐心指导下，首先熟悉了CATIA V5 R20 软件，设计出此次两个零件的垫板凸模任务是根据模型设计出他它们的加工方法，利用轮廓铣对复杂曲面进行粗加工和精加工，最后，结合CATIA中设计好了的模型实例展现了VERICUT环境下数控加工仿真的全过程
大学生创业计划书(42)三份资料.doc
07-14
大学生创业计划书(42)三份资料.doc
课程设计案例资料.doc
07-14
课程设计案例资料.doc 课程设计案例资料.doc课程设计案例资料.doc课程设计案例资料.doc课程设计案例资料.doc课程设计案例资料.doc课程设计案例资料.doc课程设计案例资料.doc课程设计案例资料.doc课程设计案例资料.doc课程设计案例资料.doc课程设计案例资料.doc课程设计案例资料.doc课程设计案例资料.doc课程设计案例资料.doc课程设计案例资料.doc课程设计案例资料.doc课程设计案例资料.doc课程设计案例资料.doc课程设计案例资料.doc课程设计案例资料.doc课程设计案例资料.doc课程设计案例资料.doc课程设计案例资料.doc
EN 15085-2：2007 中文 铁路应用-轨道车辆和轨道车辆部件焊接.pdf
07-13
EN 15085-2：2007 中文 铁路应用-轨道车辆和轨道车辆部件焊接.pdf
西门子CMVM常见问题解决
07-13
西门子CMVM常见问题解决
vue-admin-template如何固定顶部栏
07-12
要在Vue Admin Template中固定顶部栏，您可以执行以下步骤： 1. 打开Vue Admin Template的布局文件。通常，该文件位于`src/layout/AppMain.vue`。 2. 在布局文件中找到顶部栏的容器元素。通常，它是一个带有`...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值