2023/6/19 (vue实战项目，解决左侧导航栏不显示，优化，filter函数、Less）

1、解决vue2+element-ui 的左侧导航栏不显示问题

方法：将全局引入改成按需引入

（1）npm install babel-plugin-component -D

（2）然后，在工程目录下找到“.babelrc”名的文件：

          更改内容为

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

    添加的内容是：

    ["@babel/preset-env", { "modules": false }]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]

（3）全局引入删除

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.use(ElementUI);

（4）修改后重启项目

import Vue from 'vue';
import {
  Pagination,Dialog,Autocomplete,Dropdown,DropdownMenu,DropdownItem,
  Menu,Submenu,MenuItem,MenuItemGroup,Input,InputNumber,
  Radio,RadioGroup,RadioButton,Checkbox,CheckboxButton,CheckboxGroup,
  Switch,Select,Option,OptionGroup,Button,ButtonGroup,
  Table,TableColumn,DatePicker,TimeSelect,TimePicker,Popover,
  Tooltip,Breadcrumb,BreadcrumbItem,Form,FormItem,Tabs,
  TabPane,Tag,Tree,Alert,Slider,Icon,
  Row,Col,Upload,Progress,Spinner,Badge,
  Card,Rate,Steps,Step,Carousel,CarouselItem,
  Collapse,CollapseItem,Cascader,ColorPicker,Transfer,
  Container,Header,Aside,Main,Footer,Timeline,
  TimelineItem,Link,Divider,Image,Calendar,
  Backtop,PageHeader,CascaderPanel,Loading,MessageBox,Message,Notification
} from 'element-ui';
 
Vue.use(Pagination);Vue.use(Dialog);Vue.use(Autocomplete);Vue.use(Dropdown);Vue.use(DropdownMenu);
Vue.use(DropdownItem);Vue.use(Menu);Vue.use(Submenu);Vue.use(MenuItem);Vue.use(MenuItemGroup);
Vue.use(Input);Vue.use(InputNumber);Vue.use(Radio);Vue.use(RadioGroup);Vue.use(RadioButton);
Vue.use(Checkbox);Vue.use(CheckboxButton);Vue.use(CheckboxGroup);Vue.use(Switch);Vue.use(Select);
Vue.use(Option);Vue.use(OptionGroup);Vue.use(Button);Vue.use(ButtonGroup);Vue.use(Table);Vue.use(TableColumn);
Vue.use(DatePicker);Vue.use(TimeSelect);Vue.use(TimePicker);Vue.use(Popover);Vue.use(Tooltip);Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);Vue.use(Form);Vue.use(FormItem);Vue.use(Tabs);Vue.use(TabPane);Vue.use(Tag);
Vue.use(Tree);Vue.use(Alert);Vue.use(Slider);Vue.use(Icon);Vue.use(Row);Vue.use(Col);
Vue.use(Upload);Vue.use(Progress);Vue.use(Spinner);Vue.use(Badge);Vue.use(Card);
Vue.use(Rate);Vue.use(Steps);Vue.use(Step);Vue.use(Carousel);Vue.use(CarouselItem);Vue.use(Collapse);
Vue.use(CollapseItem);Vue.use(Cascader);Vue.use(ColorPicker);Vue.use(Transfer);Vue.use(Container);
Vue.use(Header);Vue.use(Aside);Vue.use(Main);Vue.use(Footer);Vue.use(Timeline);
Vue.use(TimelineItem);Vue.use(Link);Vue.use(Divider);Vue.use(Image);Vue.use(Calendar);
Vue.use(Backtop);Vue.use(PageHeader);Vue.use(CascaderPanel);Vue.use(Loading.directive);
 
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

2、优化

（1）

:collapse="isCollapse" //是否展开子菜单
background-color="#545c64"//背景颜色
 text-color="#fff"         //字体颜色
active-text-color="#ffd04b"//选中字体颜色


 <el-menu-item v-for="item in noChildren" :key="item.name" :index="item.name">
  <i :class="`el-icon-${item.icon}`"></i>    //绑定图标
 <span slot="title">{{ item.label }}</span>
 </el-menu-item>

（2）filter()函数：

        一、作用

                filter用于对数组进行过滤。
                它创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

                注 意：filter()不会对空数组进行检测、不会改变原始数组

        二、语法

        Array.filter(function(currentValue, indedx, arr), thisValue)
  其中，函数 function 为必须，数组中的每个元素都会执行这个函数。且如果返回值为 true，则该元素被保留；
  函数的第一个参数 currentValue 也为必须，代表当前元素的值。

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
let res = nums.filter((num) => {
  return num > 5;
});
 
console.log(res);  // [6, 7, 8, 9, 10]

    computed: {
        //没有子菜单
        noChildren() {
            return this.menuData.filter(item => !item.children)
        },
        //有子菜单
        hasChildren() {
            return this.menuData.filter(item => item.children)
        }
    }

（3）Less: Less 快速入门 | Less.js 中文文档 - Less 中文网 (bootcss.com)

npm i less@4.1.2 less-loader@5.0.0

如果less版本报错：

less 查找版本 npm官网搜索Less    有4.1.2    再次下载

npm i less@4.1.2

npm i less-loader@5.0.0

发现5.0的版本报错，搜索Less-loader(不能一次下载最新，否则报错）

npm i less-loader@6.0.0

下载完成                        

<style lang="less" scpoe>      
.el-menu {
    height: 100vh;
    h3 {
        color: #fff;
    }
</style> 

（4）App.vue 添加

<style lang="less" scpoed> //清除默认样式
html,body {
  margin:0;
  padding:0
}
</style>