element是什么，前端框架element Plus教程-嗨游网

由于Element+和Vue的集成度很高，所以对于这个框架在Vue中的使用我们会在稍后的课程中讲到。这节课我们首先尝试一下最简单的引入模式。至于为什么不推荐，等会在我们使用他的在线编译的时候同学们就会明白老师为什么这么说了。

<html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <script src="https://unpkg.com/vue@next"></script>  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">  <script src="https://unpkg.com/element-plus"></script> <title>Element Plus demo</title> </head> <body> <div id="app"> <el-button>{{ message }}</el-button> </div> <script> const App = { data() { return { message: "Hello Element Plus", }; }, }; // 可以使用，但是不推荐 // 这块代码的意思在后面接触到vue的时候会有讲解 const app = Vue.createApp(App); app.use(ElementPlus); app.mount("#app");</script> </body></html>

3、Element+实践

3.1、Element+在vue中的引入（了解，后面vue学习中会用到）

在后期学习过vue以后，在main.ts文件中加入如下代码来引入Element+

// main.tsimport { createApp } from 'vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import App from './App.vue'const app = createApp(App)app.use(ElementPlus)app.mount('#app')

3.2、Element+的页面布局

Element+官网：https://element-plus.org/zh-CN/component/button.html

在官网中找到如下内容：

element是什么，前端框架element Plus教程

这个布局容器分为几种：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

如果觉得理解困难也没关系，看看下图：

element是什么，前端框架element Plus教程

如图所示，这个布局的代码如下：

<template> <div class="common-layout"> <el-container> <el-header>Header</el-header> <el-main>Main</el-main> </el-container> </div></template>

通过这个布局，可以把你所有的样式都放到指定的容器中。

也可以测一测试试：点击element+中的小瓶子

element是什么，前端框架element Plus教程

可以打开playground。美中不足的是playground有一些bug，有可能会让你代码在编译中卡住。所以推荐先在自己的本地vscode中完成编译后在放入playground来测试页面效果。

常用的布局推荐：

element是什么，前端框架element Plus教程

代码如下：

<template> <div class="common-layout"> <el-container> <el-aside width="200px">Aside</el-aside> <el-container> <el-header>Header</el-header> <el-main>Main</el-main> </el-container> </el-container> </div></template>

点开playground以后效果如下：

element是什么，前端框架element Plus教程

3.3、顶部栏制作

我们先采用上面的这个布局，随后点开菜单这个选项：

element是什么，前端框架element Plus教程

找到第一个顶栏的位置，点开源代码：

element是什么，前端框架element Plus教程

这个源代码很长，我们按照需求截取片段：

<template> <div class="common-layout"> <el-container> <el-aside width="200px">Aside</el-aside> <el-container> <el-header> <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" @select="handleSelect" > <el-menu-item index="1">Processing Center</el-menu-item> <el-sub-menu index="2"> <template #title>Workspace</template> <el-menu-item index="2-1">item one</el-menu-item> <el-menu-item index="2-2">item two</el-menu-item> <el-menu-item index="2-3">item three</el-menu-item> <el-sub-menu index="2-4"> <template #title>item four</template> <el-menu-item index="2-4-1">item one</el-menu-item> <el-menu-item index="2-4-2">item two</el-menu-item> <el-menu-item index="2-4-3">item three</el-menu-item> </el-sub-menu> </el-sub-menu> <el-menu-item index="3" disabled>Info</el-menu-item> <el-menu-item index="4">Orders</el-menu-item> </el-menu> </el-header> <el-main>Main</el-main> </el-container> </el-container> </div></template><script lang="ts" setup>import { ref } from 'vue'const activeIndex2 = ref('1')const handleSelect = (key: string, keyPath: string[]) => { console.log(key, keyPath)}</script>

在这个里面通过修改不同参数也可以里面内容的样式。