Bootstrap

Vue实训---3-element plus的使用与布局

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.js中修改成我们需要的样式：

<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>
            <!-- 写菜单栏的大标题————通用后台管理系统 -->
            <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>

显示效果：

完成！

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
vue3使用element plus
图算法（五）：最短路径算法（Shortest Path）【适用场景：用于路径设计、网络规划等场景】【用以解决图论研究中的一个经典算法问题，旨在寻找图中两节点之间的最短路径。】
Java毕业设计基于Vue2+elementUI的二手书管理系统的设计与实现
java实验报告3:数组和字符串案例练习
Redis(redis基础，SpringCache,SpringDataRedis)
虚拟机快照详解
【深度学习】YOLOv5实例分割 数据集制作、模型训练以及TensorRT部署
2021-09-20
主流Web技术介绍
数据分析面试记录1-5
;