在上一节中，我们实现了动态路由，并对导航栏的数据进行了渲染，为了进一步使页面和UI相互匹配，在本节中，我们基于less实现简化css的书写，并将在下一节实现菜单单击跳转功能https://mp.csdn.net/mp_blog/creation/editor/128360465
一、基础工作
1、在element官网中，找到NavMenu导航菜单的自定义颜色部分
打开代码，发现如图选中的属性
根据官方文档解释，可根据UI图在本项目中引入相关属性进行样式修改
在此处我们引用了background-color ；text-color ；active-text-color
引入以后打开页面如下所示：
为消除侧边拉条，使左侧导航栏可布满整个视图，可先在操作题上找到指定对象并进行样式修改，修改后若页面效果和UI效果一致，则可在style部分进行CSS样式修改
二、引入less
在实际项目开发中，常在css的基础上采用less进行样式修改，下面介绍如何在本项目在引入less并进行书写，打开less官网【Less 快速入门 | Less.js 中文文档 - Less 中文网 (bootcss.com)】，可以查看less的书写规范
1、在项目中引入less【同样在npm官网中查找安装less的版本号】，安装命令如下
npm i [email protected]
安装less解析器【建议从小版本进行安装试验，例如从5.0.0版本开始观察是否安装成功，若不成功，在逐步升级，因为直接升级到最高版本less的解析器与less会产生冲突】，安装命令如下：
npm i [email protected]
安装成功，在package.json文件中进行检查
然后即可在style中写入如下代码并进行书写
<style lang="less" scoped>
</style>
注意，要修改App.vue的样式，更改全局适配
