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: "/", //项目启动后，可通过 http://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>

最后效果如下：

可以看到底部的内容没有全屏，不能满足我们的项目需求。所以在 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>

运行后效果：

下面创建三个页面：parentfirst.vue，parentsecond.vue，childfirst.vue，并配置“嵌套路由”，如下：

router/index.js

// 1.引入创建路由需要的组件
import { createRouter, createWebHistory } from "vue-router";

// 2.配置系统所有路由页面
const routes = [
  {
    path: "/",
    name: "index",
    component: () => import("../pages/index.vue"),
    children:[
      {
        path: 'parentfirst',
        component: () => import("../pages/parentfirst.vue")
      },
      {
        path: 'parentsecond',
        component: () => import("../pages/parentsecond.vue")
      },
      {
        path: 'childfirst',
        component: () => import("../pages/childfirst.vue")
      }
    ]
  }
];

// 3.创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes,
});

// 4.声明,为路由提供外部引用的入口
export default router;

pages/index.vue ，其中el-menu设置 :router=“true” 可以开启路由跳转，菜单激活时会在 router-view 回显对应页面：

<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"
        :router="true" 
      >
        <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" route="childfirst">子菜单一</el-menu-item>
            <el-menu-item index="1-2">子菜单二</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-menu-item index="2" route="parentfirst">
          <el-icon><icon-menu /></el-icon>
          <span>主菜单二</span>
        </el-menu-item>
        <el-menu-item index="3" route="parentsecond">
          <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>

  export default {
    methods:{
    }
  }
</script>

<style scoped>
.el-container {
  height: 100%;
}
.el-header {
  background-color: azure;
}
.el-aside {
  background-color: bisque;
}
.el-main {
  background-color: cornflowerblue;
}
</style>

最终效果如下：

当然在实际的项目中，无论左侧的菜单还是内容区域都是通过接口请求获取的，而不是现在这样固定写死的。所以下一篇文章会通过 Axios 来集成项目，实现异步的接口请求。