【完整项目搭建】基于vue-cli实现vue前端搭建考试系统——⑤项目开发基于less更改导航栏样式

在上一节中，我们实现了动态路由，并对导航栏的数据进行了渲染，为了进一步使页面和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 less@4.1.2

安装less解析器【建议从小版本进行安装试验，例如从5.0.0版本开始观察是否安装成功，若不成功，在逐步升级，因为直接升级到最高版本less的解析器与less会产生冲突】，安装命令如下：

npm i less-loader@6.0.0

  安装成功，在package.json文件中进行检查

 然后即可在style中写入如下代码并进行书写

<style lang="less" scoped>

</style>

注意，要修改App.vue的样式，更改全局适配