Naive-Ui-Admin样式修改——导航菜单样式、内容修改

自定义导航菜单：CSS样式与图标修改
最新推荐文章于 2025-10-10 05:08:12 发布
原创 最新推荐文章于 2025-10-10 05:08:12 发布 · 5.9k 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #html #vue

本文介绍了如何使用CSS深入选择器修改导航菜单的背景颜色和文字颜色，同时提供了 Ionic Icon 库的链接，帮助选择并替换菜单图标，以实现个性化菜单设计。

导航菜单背景颜色修改
在这里插入图片描述css样式中添加
在这里插入图片描述

::v-deep(.n-layout-sider){
    background-color: #336699 !important;
    color: white;
  }

菜单修改文字
在这里插入图片描述菜单修改图标
https://ionic.io/ionicons
查找需要的图标，点击可得到图标名称
在这里插入图片描述把-格式改成EarthOutline
在这里插入图片描述填在对应的两个区域
在这里插入图片描述

前端页面滚动底部触发业务
UnforgetMemory的博客
08-16 637
通过触发底部加载更多内容。
nativescript 之 Layout布局
icebergliu1234的博客
12-18 385
1 AbsoluteLayout 绝对布局 2 DockLayout 如图所示： 可以通过StretchLastChild，设置该值指示DockLayout中的最后一个子元素是否拉伸以填充剩余的可用空间。默认值为true。 3 GridLayout是 网格布局，它以行和列的表结构排列其子元素。 *...
全新力作！Vue3 NaiveUI Admin —— 有来后台管理系统生态再添新成员
有来技术
09-28 1878
vue3-naiveui-admin 是基于 Vue3 + Vite7 + TypeScript + Naive UI 的企业级后台管理前端模板，由有来技术打造，作为 youlai-boot 的配套前端。它与成熟的 Element Plus 版本互补，提供轻量美观的 Naive UI 选择，内置权限管理、组件封装、主题适配等完整功能，助力开发者快速构建现代化后台系统。
Naive UI 导航组件实战：Menu、Tabs 与 Breadcrumb 的设计技巧
最新发布
gitblog_01132的博客
10-10 449
在现代 Web 应用开发中，导航系统是用户体验的核心要素。Naive UI 作为一款基于 Vue 3 的高质量组件库，提供了 Menu（菜单）、Tabs（标签页）和 Breadcrumb（面包屑）三种核心导航组件，它们各自解决不同场景的导航需求，又能相互配合构建完整的页面导航体系。本文将从实际开发角度出发，通过代码示例和最佳实践，详细讲解这三个组件的设计技巧与组合应用方法。 ## 一、Menu ...
基于Vite + Vue3 + NaiveUI + TypeScript的中后台管理模版 — Soybean Admin开源啦
qq_32596855的博客
01-24 4942
Soybean Admin 是一个基于 Vue3、Vite、TypeScript、Naive UI 的免费中后台模版，它使用了最新的前端技术栈，内置丰富的主题配置，有着极高的代码规范，基于mock实现的动态权限路由，开箱即用的中后台前端解决方案，也可用于学习参考。
Naive UI修改默认样式
weixin_51615179的博客
03-17 5613
因为大创的缘故，需要做出一个网站，在搭建网站的过程中需要使用Naive UI框架，在设置样式的时候一直无法修改默认样式。小白不知道应该如何使用样式穿透，同时和Naive UI相关的博客比较少，导致只能自己一步步摸索，所幸，找到了最后的解决办法。（注意，这个解法可能只适合Naive UI。
Naive Ui Admin - 基于 Vue3/Vite/TS 等最新的前端技术栈构建的免费开源中后台前端框架
那些免费的砖
09-17 3483
又一个开箱即用的高质量 admin 前端框架，漂亮优雅又能打！ 关于 Naive Ui Admin Naive Ui 是不久之前推荐的一款优秀的 UI 组件库，基于最新的 Vue3.0、Vite、 Naive UI、TypeScript 等前端技术栈， 而今天分享的 Naive Ui Admin 就是基于 Naive Ui 构建的 admin 中后台前端框架。 不少对中后台框架不够熟悉的人会认为一款 UI 组件库几乎等于一款 admin 框架，但成熟的 admin 框架需要.
vue3，vite项目最基础示例，vue-router+naive-ui+mock.js
12-09
本文将详细介绍如何构建一个基于Vue3、Vite、Vue-Router和Naive-UI的最基础示例项目，同时引入Mock.js来模拟数据。本示例将为初学者提供一个个人博客设计的纯前端项目的起点，我们将从项目结构到核心功能配置一一...
基于 vue-naive-admin 2.0版 前端框架的 golang版本做服务端.zip
04-03
【Vue-Naive-Admin 2.0与Golang服务端集成详解】 Vue-Naive-Admin是一款流行的前端框架，专为快速构建管理界面而设计。2.0版本在前一版的基础上进行了优化和增强，提供了更加高效和易用的组件库以及灵活的配置选项...
精选资源
naive-ui-vite-ssr:naive-ui vite ssr 的一个例子
08-03
Naive UI Vite SSR npm run dev
Vue3+Naive-ui 中组件和模块的自动化导入方法
08-15
在使用Vue3和Naive-ui构建现代前端应用时，我们经常需要引入大量的组件和模块。随着项目的增长，手动导入组件会变得非常繁琐且容易出错。为了提高开发效率和项目的可维护性，自动化导入组件和模块的方法显得尤为重要...
naive-ui-admin
03-22
另一个值得关注的是 `vue-naive-admin` 模板，这是一个轻量化的后台管理系统框架，同样采用了 Vue 3 及其他流行工具链组合而成，具体包括但不限于以下几项核心技术： - Vue 3 (响应式核心引擎) - Vite (高性能构建...
Naive Ui Admin 发布后台管理系统 高颜值Admin骨架 看看是不是你想要的
iijik55的博客
02-28 1202
简介 Naive Ui Admin 是一个免费开源的中后台模版，使用了最新的vue3,vite2,TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 特性 最新技术栈：使用 Vue3/vite2 等前端前沿技术开发 TypeScript: 应用程序级 JavaScript 的语言 主题：可配置的主题 Mock 数据 内置 Mock 数据方案 权限 内置完善的动态路由权限生成方案 组件 二次封装了多个常用的组件 页面功能 Features 菜单模式（左侧/顶部）.
Naive Ui Admin：企业级中后台项目开箱即用框架/让你少写一些代码
chenchuang0128的博客
03-16 2189
Naive Ui Admin 是一个全面的中后台解决方案，使用最新的前端技术栈，帮助开发者快速搭建企业级中后台项目。它不仅提供了实用的组件和功能，还提供了强大的鉴权系统和持续的更新支持。通过使用 Naive Ui Admin，开发者可以减少代码编写量，提高开发效率，并确保项目在未来仍然保持领先地位。如果你正在寻找一个可靠的中后台解决方案，不妨考虑使用 Naive Ui Admin，相信它能够满足你的需求并带来巨大的价值。
【亲测免费】 推荐开源项目：Naive UI Admin - 简约高效的前端管理框架
gitblog_00076的博客
03-21 775
是一个基于 [Naive UI](https://v2.naiveui.com/) 的现代化前端管理模板，它提供了丰富的界面组件和预设的布局方案，旨在帮助开发者快速构建企业级后台管理系统。 ## 项目简介 Naive UI Admin 提供了一套完整的页面模板，包括登录、仪表盘、表格、表单、通知等多个常见的业务场景。该框架采用了 Vue.js 和 Vuex 进行状态管理，结合 Axios 进行...
Naive ui：菜单 Menu批量处理图标替换自定义图片
lq099526的专栏
09-30 3650
项目中使用的是自定义的图标，把需要使用的图标保存到本地，使用。2、新建一个js文件，把需要用到的图标引入到项目文件中。2、菜单组件中引入js文件，渲染图标。n-menu自带的图标使用。图标库，使用方法参考官网和。批量处理菜单图标渲染。1、新建一个菜单组件。
打造高效中后台：Naive Ui Admin —— 基于 Vue3 和 Vite3 的先进解决方案
chenchuang0128的博客
03-22 1476
Naive Ui Admin 是一款集成了前沿前端技术栈和典型业务模型的中后台解决方案。它基于 Vue3 和 Vite3 构建，采用 TypeScript 编写，旨在通过二次封装组件、动态菜单、权限校验和粒子化权限控制等核心功能，帮助企业快速搭建功能完备、性能卓越的中后台系统。无论是对于新技术爱好者，还是业务实践者，Naive Ui Admin 都能提供全方位的支持，并持续更新以满足不断变化的需求。
Naive UI Admin后台管理系统的组件BasicTable使用指南
qq_15233495的博客
03-10 4496
BasicTable集成了很多功能，如下：（1）分页信息，可以自定义分页字段名，方便和后端做数据交互。（2）可编辑单元格，通过配置column的edit属性使该列渲染为可编辑组件，同时支持整行编辑。（3）基础工具，包括表格斑马纹显示、刷新、密度以及列相关的设置选项。（4）动态计算调整表格的高度
Naive UI 之 修改组件样式
aliceyang2012的专栏
11-15 2889
Naive UI 组件样式
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值