Vue3.0项⽬框架搭建之三：element-plus
上⼀篇⽂章完成了Router4.0的集成，已经页⾯的切换。那么就应该开始对每个页⾯的内容做设计了，vue有很很多⽀持的第三⽅UI库，其中使⽤最⼴泛的就是 elementUI 。
这次 elementUI 的集成为了适配我们Vue3.0特地选择了官⽅对应的版本 element-plus 。
安装
⾸先进⾏依赖的安装，这⾥直接使⽤npm⽅式：
npm install element-plus --save
然后在 main.js 中引⼊ element-plus组件，这⾥直接导⼊完成的组件库，如果考虑到打包后的⽂件⼤⼩，⼤家可以选择按需引⼊：
在这⾥插⼊代码⽚
项⽬框架
作为常见的后台管理项⽬，它的结构⼤致是这样的：
简单分为3个部分：
1、顶部Logo及部分配置操作（如个⼈中⼼、消息提醒的⼊⼝）
2、底部左侧，菜单导航
3、底部右侧，页⾯内容
实现
⾸先在pages⽬录下创建index.vue⽂件作为⾸页，并且在路由中添加该页⾯：
router/index.js
// 1.引⼊创建路由需要的组件
import{ createRouter, createWebHistory }from"vue-router";
// 2.配置系统所有路由页⾯
const routes =[
{
path:"/",//项⽬启动后，可通过 localhost:3000/ 直接访问到该页⾯ name:"index",
component:()=>import("../pages/index.vue"),
}
];
// 3.创建路由实例
const router =createRouter({
history:createWebHistory(),
routes,
});
// 4.声明，为路由提供外部引⽤的⼊⼝
export default router;
index.vue
<template>
<div>
<el-container>
<el-header>头部logo</el-header>
<el-container>
<el-aside width="200px">菜单</el-aside>
<el-main>内容</el-main>
</el-container>
</el-container>
</div>
</template>
<script></script>
<style scoped>
.el-header{
background-color: azure;
}
.el-aside{
background-color: bisque;
}
.el-main{
background-color: cornflowerblue;
}
</style>
vue element admin可以看到底部的内容没有全屏，不能满⾜我们的项⽬需求。所以在 index.html 增加如下全屏代码：
<style>
html,
body,
#app{
height: 100%;
}
</style>
接着使⽤ el-menu 给底部左侧增加菜单⽤于页⾯切换：
<template>
<el-container>
<el-header>头部logo</el-header>
<el-container>
<el-aside width="200px">
<el-menu
active-text-color="#ffd04b"
background-color="#545c64"
text-color="#fff"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
>
<el-sub-menu index="1">
<template #title>
<el-icon><location /></el-icon>
<span>主菜单⼀</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1">⼦菜单⼀</el-menu-item>
<el-menu-item index="1-2">⼦菜单⼆</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
<el-menu-item index="2">
<el-icon><icon-menu /></el-icon>
<span>主菜单⼆</span>
</el-menu-item>
<el-menu-item index="3">
<el-icon><document /></el-icon>
<span>主菜单三</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-main><router-view></router-view></el-main>
</el-container>
</el-container>
</template>
<script></script>
<style scoped>
.el-container{
height: 100%;
}
.el-header{
background-color: azure;
}
.el-aside{
background-color: bisque;
}
.el-main{
background-color: cornflowerblue;
}
</style>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论