您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

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 来集成项目,实现异步的接口请求。


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进