Vue3+Element-Plus 主页Aside布局设计 二四_vue3+element-plus简单项目首页代码

1.左侧菜单布局设计效果

 2. 左侧菜单布局分析

• 菜单分为两级，并且有折叠效果

 3.用到的菜单组件(Meun)介绍  Menu 菜单 | Element Plus (gitee.io)

1.  el-menu  整个左侧菜单最外层必须使用menu 包裹着
2.  el-submenu 一级菜单组件
3.  el-icon 菜单图标项
4.  span 菜单的文本 
5.  el-menu-item 二级菜单组件

        <!-- 侧边栏菜单区域 -->
        <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        text-color="#fff">
        <!-- 一级菜单 -->
        <el-submenu index="1">
          <!-- 一级菜单模板区域 -->
          <template #title>
            <!-- 图标 -->
            <el-icon><location /></el-icon>
            <!-- 文本 -->
            <span>导航一</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item index="1-4-1">
            <!-- 二级菜单模板区域 -->
          <template #title>
            <!-- 图标 -->
            <el-icon><document /></el-icon>
            <!-- 文本 -->
            <span>导航二</span>
          </template>
          </el-menu-item>
        </el-submenu>
      </el-menu>

注意：原本 element-plus 一级菜单官网是用el-sub-menu,但是这样好像不起作用，所以就改成了element-ui 这种el-submenu 这写法。有知道的小伙伴可以留言。

4. 布局了解清楚后，我们得知道如何按需去改造及使用这个菜单组件

 4.1 打开官网，找到 Menu 菜单 | Element Plus (gitee.io) 选择合适的布局，粘贴代码

 4.2 需要学会梳理基本代码结构

• 删除暂时使用不上的属性，可以让代码结构更加清晰一些

4.3 结构梳理完成后，下一步在需要先在element.js 导入并注册对应的组件 

• 特别提醒，每开发一个页面所使用到的组件，如果是按需引用，一定要先导入对应组件，再进行功能开发

5. 查看页面效果 

5.1 页面不显示相关图标，原因是需要安装icon 图标依赖

5.2 打开可视化面板，点击依赖，安装依赖

 5.3  点击运行依赖，搜索element-plus/icons 依赖项，点击安装

5.4 安装完成后，需要在element.js 按需导入对应的图标样式

 1.例如，页面使用到了一个location (位置) 的图标

 2. element.js 导入

• 图标组件注册格式参考官方文档icon用例Component Registration | Vue.js (vuejs.org)

 3. 重新编译后运行

啊这，奇丑无比图标。这是为何呢。

5. 哎，原来是忘记把图标组件注册了，那就去element.js 配置文件全局注册一下

6. 刷新页面看效果

 7.小技巧 element-ui 和element-plus 图标使用方式有区别

• element-plus 是按需注册，用啥样的图标，需要手动注册啥样的图标

// element-ui  图标使用方式
<i class="el-icon-edit"></i>
 
// element-plus 使用方式
 <el-icon >
   <edit></edit>
 </el-icon>

 8. 特殊图标menu引入注意事项

•  menu 图标需要加别名进行图标呈现

• 组件页面使用示例 

 9.vue 3 +element-plus 项目element.js 组件命名引入 小技巧

• 例如当页面中使用到一个组件，名称为el-button

由于组件使用的是驼峰式命名规则，那么在 element.js 导入该组件时。

需要写成，ElButton

---

5. 到此页面改造完成效果

6. Home.vue 代码

<template>
  <el-container class="home_container">
    <!-- 头部区域 -->
    <el-header>
      <div>
        <img src="../assets/heima.png" alt="" />
        <span>电商后台管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <!-- 页面主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <!-- 侧边栏菜单区域 -->
        <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        text-color="#fff">
        <!-- 一级菜单 -->
        <el-submenu index="1">
          <!-- 一级菜单模板区域 -->
          <template #title>
            <el-icon><location /></el-icon>
            <span>导航一</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item index="1-4-1">
          <template #title>
            <el-icon><document /></el-icon>
            <span>导航二</span>
          </template>
          </el-menu-item>
        </el-submenu>
      </el-menu>
      </el-aside>
      <!-- 右侧内容主体区域 -->
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  methods: {
    logout () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    }
  }
}
</script>
<style lang="less" scoped>
.home_container {
  height: 100%;
}
.el-header {
  background-color: #363d40;
  // 给头部设置一下弹性布局
  display: flex;
  // 让它贴标左右对齐
  justify-content: space-between;
  // 清空图片左侧padding
  padding-left: 0;
  // 按钮居中
  align-items: center;
  // 文本颜色
  color: #fff;
  // 设置文本字体大小
  font-size: 20px;
  // 嵌套
  > div {
    // 弹性布局
    display: flex;
    // 纵向上居中对齐
    align-items: center;
    // 给文本和图片添加间距，使用类选择器
    span {
      margin-left: 15px;
    }
  }
}
.el-aside {
  background-color: #313743;
}
.el-main {
  background-color: #e9edf1;
}
</style>

7. element.js 代码

import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElRow,
  ElMessage,
  ElContainer,
  ElHeader,
  ElAside,
  ElMain,
  ElMenu,
  ElSubmenu,
  ElMenuItem,
  ElIcon
} from 'element-plus'
 
import {
  Location,
  Menu as IconMenu
} from '@element-plus/icons'
 
export default (app) => {
  app.use(ElButton)
  app.use(ElForm)
  app.use(ElFormItem)
  app.use(ElInput)
  app.use(ElRow)
  app.use(ElContainer)
  app.use(ElHeader)
  app.use(ElAside)
  app.use(ElMain)
  app.use(ElMenu)
  app.use(ElSubmenu)
  app.use(ElMenuItem)
  app.use(ElIcon)
  app.component('location', Location)
  app.component('iconMenu', IconMenu)
  app.config.globalProperties.$message = ElMessage
}

以上出自：

【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1x64y1S7S7?p=32