当前位置:   article > 正文

Vue3.0项目框架搭建之三:element-plus_vue3.0 + elementplus

vue3.0 + elementplus

上一篇文章完成了Router4.0的集成,已经页面的切换。那么就应该开始对每个页面的内容做设计了,vue有很很多支持的第三方UI库,其中使用最广泛的就是 elementUI

这次 elementUI 的集成为了适配我们Vue3.0特地选择了官方对应的版本 element-plus 。

安装

首先进行依赖的安装,这里直接使用npm方式:

npm install element-plus --save
  • 1

然后在 main.js 中引入 element-plus组件,这里直接导入完成的组件库,如果考虑到打包后的文件大小,大家可以选择按需引入:

在这里插入代码片
  • 1

项目框架

作为常见的后台管理项目,它的结构大致是这样的:
在这里插入图片描述
简单分为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;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

最后效果如下:
在这里插入图片描述
可以看到底部的内容没有全屏,不能满足我们的项目需求。所以在 index.html 增加如下全屏代码:


<style>
 html,
 body,
 #app {
   height: 100%;
 }
 </style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

最终的运行效果:
在这里插入图片描述
接着使用 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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55

运行后效果:
在这里插入图片描述
下面创建三个页面: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;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60

最终效果如下:
在这里插入图片描述
当然在实际的项目中,无论左侧的菜单还是内容区域都是通过接口请求获取的,而不是现在这样固定写死的。所以下一篇文章会通过 Axios 来集成项目,实现异步的接口请求。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/119069
推荐阅读
相关标签
  

闽ICP备14008679号