Vue3+Element-Plus 主页Aside布局设计 二四

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 二级菜单组件

注意：原本 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  图标使用方式

 
// element-plus 使用方式
 
   
 

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

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

• 组件页面使用示例 

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

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

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

需要写成，ElButton

---

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

6. Home.vue 代码

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