1.引入ElementPlus
ElementPlus官网指南：快速开始 | Element Plus
在我们的项目main.js文件中，加入红框里的内容：
import { createApp } from 'vue'
import App from './App.vue'
// 引入全局样式，是对样式的初始化
import "@/assets/less/index.less"
// 引入路由
// import router from './router'
import router from '@/router/index.js'
// 引入 element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 将之前的createApp(App).mount('#app') 拆开写，并在其中引入路由
// 创建vue实例
const app = createApp(App)
// 注入路由
app.use(router)
// 注入 element-plus
app.use(ElementPlus)
// 挂载到DOM上
app.mount('#app')2.简单使用ElementPlus组件
ElementPlus官网对于每种组件都给出了代码示例。
例如：Button 按钮 | Element Plus中，
将官网示例代码粘贴到我们的App.vue中，顺便对#app设置全局样式：
<script setup>
</script>
<template>
<router-view></router-view>
<div>
<el-button>Default</el-button>
<el-button type="primary" plain>Primary plain</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning" round>Warning round</el-button>
<el-button type="danger" :icon="Delete" circle> 危险</el-button>
</div>
</template>
<style>
/* scoped的作用是只在当前组件生效，我们这里设置的是全局样式，所以去掉scoped */、
/* 设置样式，让app组件占满整个屏幕，为什么是#app，因为我们在main.js中挂载的根组件就是#app，这样设置就是让根组件占满整个屏幕，不让页面显示滚动条*/
#app {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>在vscode终端运行命令：
npm run dev
浏览器显示：
效果出现后，可以将这些el-button代码删掉，这样就不会影响我们后续的项目。
3.使用ElementPlus图标
3.1 引入图标
官网Icon 图标 | Element Plus中给出了图标的引入方式：
我们将这些代码加入到main.js中：
import { createApp } from 'vue'
import App from './App.vue'
// 引入全局样式，是对样式的初始化
import "@/assets/less/index.less"
// 引入路由
// import router from './router'
import router from '@/router/index.js'
// 引入 element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入 element-plus 的图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 将之前的createApp(App).mount('#app') 拆开写，并在其中引入路由
// 创建vue实例
const app = createApp(App)
// 注入路由
app.use(router)
// 注入 element-plus
app.use(ElementPlus)
// 注入 element-plus 的图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
// 挂载到DOM上
app.mount('#app')3.2 ElementPlus页面布局
Container 布局容器 | Element Plus中给出了示例。
我们选择下图的示例：
我们期望将Main.vue文件做成下图的样子：
修改Main.vue文件，将官网代码复制过来，然后加上样式：
<template>
<div class="common-layout">
<el-container>
<el-aside width="200px" class="el-aside">Aside</el-aside>
<el-container>
<el-header class="el-header">Header</el-header>
<el-main class="el-main">Main</el-main>
</el-container>
</el-container>
</div>
</template>
<script setup>
</script>
<style scoped lang="less">
.common-layout {
height: 100%;
background-color: aquamarine;
}
.el-header {
background-color: #ede92f;
}
.el-aside {
background-color: #88e5cc;
height: 600px;
}
.el-main {
background-color: #aec6de;
}
</style>运行，浏览器显示：
成功！
继续在Main.vue中修改成我们需要的样式：
<template>
<div class="common-layout">
<el-container class="lay-container">
<!-- <el-aside width="200px" class="el-aside">Aside</el-aside> 将侧边栏改成我们自定义的组件，通过common-aside引入我们自己写的组件-->
<common-aside></common-aside>
<el-container>
<el-header class="el-header">
<!-- Header 将Header里的内容也替换成我们自己写的组件common-header-->
<common-header></common-header>
</el-header>
<el-main class="right-main">
Main
</el-main>
</el-container>
</el-container>
</div>
</template>
<script setup>
</script>
<style scoped lang="less">
.common-layout,.lay-container {
height: 100%;
}
.el-header {
background-color: #333;
}
</style>运行，在浏览器查看源代码：
可以看出我们写的代码已经生效。
4.编写我们自己的左菜单栏
我们预期要实现的左菜单栏如下：
Menu 菜单 | Element Plus中给出了类似的示例：
编写自定义左菜单栏common-aside对应的组件--新建src\components\CommonAside.vue，将上图中的代码（上面的代码中包含两个菜单栏，我们从第二个el-menu开始）复制过来。
<template>
<!-- 首先最外层是Main.vue中注释的<el-aside width="200px" class="el-aside">Aside</el-aside>，我们将侧边栏改成我们自定义的组件，通过common-aside引入我们自己写的组件 -->
<el-aside width="200px" class="el-aside">
<el-menu
active-text-color="#ffd04b"
background-color="#545c64"
class="el-menu-vertical-demo"
default-active="2"
text-color="#fff"
@open="handleOpen"
@close="handleClose"
>
<el-sub-menu index="1">
<template #title>
<el-icon><location /></el-icon>
<span>Navigator One</span>
</template>
<el-menu-item-group title="Group One">
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item two</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
<template #title>item four</template>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="2">
<el-icon><icon-menu /></el-icon>
<span>Navigator Two</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<el-icon><document /></el-icon>
<span>Navigator Three</span>
</el-menu-item>
<el-menu-item index="4">
<el-icon><setting /></el-icon>
<span>Navigator Four</span>
</el-menu-item>
</el-menu>
</el-aside>
</template>
<script setup>
</script>
<style lang="less" scoped>
.icons{
width:18px;
height:18px;
margin-right:5px;
}
.el-menu{
border-right:none;
h3{
line-height:48px;
color:#fff;
text-align:center;
}
}
.el-aside{
height:100%;
background-color:#545c64;
}
</style>然后在Main.vue中引入我们写的CommonAside.vue组件：
<script setup>
import CommonAside from '@/components/CommonAside.vue'
</script>运行，浏览器显示：
成功！
从示例代码中可以看出：
el-menu-item表示没有子菜单栏。
<el-menu-item index="2">
<el-icon><icon-menu /></el-icon>
<span>Navigator Two</span>
</el-menu-item>el-sub-menu表示有子菜单栏，子菜单栏写在父菜单栏里面。
<el-sub-menu index="1-4">
<template #title>item four</template>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-sub-menu>通过 el-menu-item-group 组件可以实现菜单进行分组，分组名可以通过 title 属性直接设定，也可以通过具名 slot 来设定。
<el-menu-item-group title="Group One">
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item two</el-menu-item>
</el-menu-item-group>修改以上代码，编写我们自己的菜单栏:
将我们的菜单写成一个列表，然后菜单栏根据列表项有无子孩子来遍历生成最终的菜单栏，在CommonAside.vue中的script写入：
<script setup>
import {ref,computed} from 'vue'
const list =ref([
{
path: '/home',
name: 'home',
label: '首页',
icon: 'house',
url: 'Home'
},
{
path: '/mall',
name: 'mall',
label: '商品管理',
icon: 'video-play',
url: 'Mall'
},
{
path: '/user',
name: 'user',
label: '用户管理',
icon: 'user',
url: 'User'
},
{
path: 'other',
label: '其他',
icon: 'location',
children: [
{
path: '/page1',
name: 'page1',
label: '页面1',
icon: 'setting',
url: 'Page1'
},
{
path: '/page2',
name: 'page2',
label: '页面2',
icon: 'setting',
url: 'Page2'
}
]
}
])
const noChildren = computed(() => list.value.filter(item => !item.children))
const hasChildren =computed(() => list.value.filter(item => item.children))
</script>然后修改CommonAside.vue中的template：
第一步，写好大体框架，先是没有子菜单的，然后是有子菜单的：
<template>
<!-- 首先最外层是Main.vue中注释的<el-aside width="200px" class="el-aside">Aside</el-aside>，我们将侧边栏改成我们自定义的组件，通过common-aside引入我们自己写的组件 -->
<el-aside width="200px" class="el-aside">
<el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="2"
text-color="#fff" @open="handleOpen" @close="handleClose">
<!-- 没有子菜单的 -->
<el-menu-item index="2">
<el-icon><icon-menu /></el-icon>
<span>Navigator Two</span>
</el-menu-item>
<!-- 有子菜单的 -->
<el-sub-menu index="1-4">
<template #title>item four</template>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-sub-menu>
</el-menu>
</el-aside>
</template>继续修改，使用v-for遍历，实现菜单栏的显示效果：
<template>
<!-- 首先最外层是Main.vue中注释的<el-aside width="200px" class="el-aside">Aside</el-aside>，我们将侧边栏改成我们自定义的组件，通过common-aside引入我们自己写的组件 -->
<el-aside width="200px" class="el-aside">
<el-menu background-color="#545c64" text-color="#fff">
<!-- 写菜单栏的大标题————通用后台管理系统 -->
<h3>通用后台管理系统</h3>
<!-- 循环遍历菜单栏 -->
<!-- 1.没有子菜单的遍历 -->
<el-menu-item v-for="item in noChildren" :key="item.path" :index="item.path">
<!-- <el-icon><icon-menu /></el-icon> -->
<!-- 动态获取icon图标 -->
<component :is="item.icon" class="icons"></component>
<!-- 显示文字内容 -->
<span>{{ item.label }}</span>
</el-menu-item>
<!-- 2.有子菜单的遍历 -->
<el-sub-menu v-for="item in hasChildren" :key="item.path" :index="item.path">
<template #title>
<!-- 动态获取icon图标 -->
<component :is="item.icon" class="icons"></component>
<!-- 显示文字内容 -->
<span>{{ item.label }}</span>
</template>
<!-- 分组 -->
<el-menu-item-group>
<!-- 循环遍历子菜单 -->
<el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">
<!-- 动态获取icon图标 -->
<component :is="child.icon" class="icons"></component>
<!-- 显示文字内容 -->
<span>{{ child.label }}</span>
>
</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
</el-menu>
</el-aside>
</template>显示效果：
完成！
5.编写我们自己的页面Header
新建src\components\CommonHeader.vue文件。
在Main.vue中引入CommonHeader.vue:
<script setup>
import CommonAside from '@/components/CommonAside.vue'
import CommonHeader from '@/components/CommonHeader.vue'
</script>编写CommonHeader.vue文件，在header的最左边显示菜单按钮（以后为其添加功能：点击此按钮会显示/隐藏左侧菜单栏）：
<template>
<div class="header">
<!-- 左侧点击四个点的Menu按钮具有折叠菜单栏的功能，右侧user的头像，头像有下栏菜单 -->
<div class="l-content">
<el-button size="small">
<component class="icons" is="menu"></component>
</el-button>
</div>
<div class="r-content"></div>
</div>
</template>效果：
复制Breadcrumb 面包屑 | Element Plus面包屑代码在button下，并做修改：
<template>
<div class="header">
<!-- 左侧点击四个点的Menu按钮具有折叠菜单栏的功能，右侧user的头像，头像有下栏菜单 -->
<div class="l-content">
<el-button size="small">
<component class="icons" is="menu"></component>
</el-button>
<el-breadcrumb separator="/" class="bread">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="r-content"></div>
</div>
</template>
<script setup>
</script>
<style lang="less" scoped>
.header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
background-color: #333;
}
.icons {
width: 20px;
height: 20px;
}
.l-content {
display: flex;
align-items: center;
.el-button {
margin-right: 20px;
}
}
.r-content {
.user {
width: 40px;
height: 40px;
border-radius: 50%;
}
}
:deep(.bread span) {
color: #fff !important;
cursor: pointer !important;
}
</style>显示效果：
继续编写header的右侧下拉菜单：
复制Dropdown 下拉菜单 | Element Plus代码到<div class="r-content"></div>内部，并做修改：
<template>
<div class="header">
<!-- 左侧点击四个点的Menu按钮具有折叠菜单栏的功能，右侧user的头像，头像有下栏菜单 -->
<div class="l-content">
<el-button size="small">
<component class="icons" is="menu"></component>
</el-button>
<el-breadcrumb separator="/" class="bread">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="r-content"> <el-dropdown>
<span class="el-dropdown-link">
<!-- Dropdown List
<el-icon class="el-icon--right">
<arrow-down />
</el-icon> -->
<!-- 将此部分内容换成我们要显示的用户头像图片（my-vue-project\src\assets\images\user.png） -->
<img :src="getImageUrl('user')" alt="用户头像" class="user" />
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>个人中心</el-dropdown-item>
<el-dropdown-item>退出</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown></div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
// 通过参数user的名字可以获取动态的图片的url
// 通过new URL()方法可以创建并返回一个URL对象,用来获取图片的url（百度new URL MDN）
// 通过import.meta.url可以获取当前模块的url
const getImageUrl = (user) => {
return new URL(`../assets/images/${user}.png`, import.meta.url).href
}
</script>
<style lang="less" scoped>
.header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
background-color: #333;
}
.icons {
width: 20px;
height: 20px;
}
.l-content {
display: flex;
align-items: center;
.el-button {
margin-right: 20px;
}
}
.r-content {
.user {
width: 40px;
height: 40px;
border-radius: 50%;
}
}
:deep(.bread span) {
color: #fff !important;
cursor: pointer !important;
}
</style>效果：
完成！
