ui的搭建

 整体ui的搭建

一、 整体ui的搭建

局部英日引入Container组件未成功，不知原因，up用的全局引入

二、左侧菜单栏的引入

组件化的思想：组件的拆分和组件的封装

几个细节点：req.getRequestDispatcher("index.jsp").forward(req, resp); 目前所在的目录
1. 在导出接口时，data和计算属性用的是括号（），components用的是冒号：
2. 导入组件是在script中声明的
3. 写引入的组件时可以先写<>，再往里面加组件名，最后在末尾加上一个斜杠 /

export default {
    data(){
        return {}
    },
    components:{
        CommonAside
    }
}

三、一级菜单的实现

1. 在elementUI官方文档中查询想要改的属性，如collapse；根据需求调整组件的数目
2. 编写菜单数据menuData，使用computed依赖menuData的变化对其进行过滤（这个逻辑不理解）
3. 对noChildren进行遍历，key是用于标记当前元素的唯一性，需为固定不变的值，index是唯一标志
4.利用elemnetUI的icon组件，icon组件的使用方式是绑定i标签的class属性，这里我们使用模板字符串进行字符串的拼接

computed: {
    // 没有子菜单
    noChildren() {
      return this.menuData.filter(item => !item.children);
    },
    // 有子菜单
    hasChildren(){
        return this.menuData.filter(item=>item.children)
    }
},
<!-- class属性需用v-bind动态绑定 -->
<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>

四、二级menu的实现

1. span中的slot表示插槽插入的位置
2. 依葫芦画瓢完成一级菜单的渲染完成二级菜单的渲染，注意这里的遍历名称不能用item，会重名
4. 检查控制台无报错，成功

ps：格式化文档快捷键：alt+shift+F

五、菜单样式与less引入

1.补充导航栏样式
2.引入less和less-loader解析器，在npm官网查询引入版本，在package.json查看依赖的版本号
3. 修改style语言和设置样式私有化，在 less官方文档查询具体语法，scope表示样式只作用于当前页面，在APP.vue清除默认样式

// 导航栏样式
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"

// 引入less解析器
npm i less@4.1.3
npm i less-loader@6.2.0

// 修改style语言和设置样式私有化
<style lang="less" scope></style>

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