【项目实践】使用Vue.js和ElementUI快速实现后台管理系统的界面布局

前言

大家都知道，后台管理界面不需要很酷炫的动画效果，也不需要花里胡哨的界面布局，只需要简洁易用、清爽明了的界面以便于管理数据。而现在普遍的后台管理系统的界面布局都差不多，上中下结构，然后左边是导航栏。随便贴两个Bootstrap的主题模板就是这样的：

这其中难的不是布局，而是如何点击左侧导航栏来渲染中央显示界面（路由）。在这里我会用Vue.js和ElementUI来快速搭建起这样的后台管理界面布局！

准备

本文搭建项目时的工具以及版本号如下：

node.js – v12.16.1

npm – 6.13.4

@vue/cli – 4.2.2

版本有差异也没有事情，变化不会太大。

首先，通过Vue-cli工具来快速搭建起一个Vue的项目（这里就不讲解怎么用Vue-cli搭建项目了，文末有项目的github演示地址，下载下来即可运行）

项目搭建好后呢，接下来要导入我们要用的组件，我在这里会用到ElementUI和font-awesome图标（当然也可以直接使用ElementUI中的图标）。
使用npm来安装两个工具：
npm install element-ui
npm install font-awesome
安装完毕后，在main.js里导入两个工具，这样才能在项目中使用：

import Vue from 'vue'
import App from './App.vue'
import router from './router'// 导入ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 导入font-awesome(导入就可以直接用了)
import 'font-awesome/scss/font-awesome.scss'// 使用ElementUI
Vue.use(ElementUI); Vue.config.productionTip = falsenew Vue({router,render: h => h(App)
}).$mount('#app')

配置路由

所有都准备好了后，我们来修改App.vue文件，这个是整个项目的界面入口，所以我们在这里定义好最基本的视图：

<template><div id="app"><!--主路由视图--><router-view/></div>
</template><style lang="scss">// 整体布局样式，让整个视图都铺满html, body, #app {height: 100%;width: 100%;margin: 0;padding: 0;}
</style>

视图配置好后，接下来要配置路由设置，我们先新建四个页面组件：Main.vue，Index.Vue，Setting.vue，404.vue。这个等下都要用的，其中Index.Vue和Setting.vue都是Main.vue的嵌套路由，这里为了做演示，Index.vue和Setting.vue里面就只写一个简单的一级标题。此时我们的项目结构如下：

然后我们在router的js文件里开始配置路由，注意看注释：

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{// 重定向，用来指向一打开网页就跳转到哪个路由path: '/',redirect: '/main'},{// 首页path: '/main',name: 'Main',component: () => import('../views/Main.vue'),children:[// 开始嵌套路由，这下面的所有路由都是Main路由的子路由{path:'/', // 嵌套路由里默认是哪个网页redirect: '/index'},{path:'/index', // 首页的路由name:'Index',component:() => import('../views/Index.vue')},{path:'/setting', // 设置页面的路由name:'Setting',component:() => import('../views/Setting.vue')}]},{path:'/*', // 注意，这里不是嵌套路由了，这是为了设置404页面，一定要放在最后面，这样当服务器找不到页面的时候就会全部跳转到404name:'404',component: () => import('../views/404.vue')}
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router

路由是配置好了，接下来就是最重要的Main.vue里的布局

布局

我们先在Main.vue里布置最基本的结构，即上中下，中间又分左右：

<template><el-container><!--顶部--><el-header></el-header><!--中央区域--><el-main><el-container><!--左侧导航栏--><el-aside></el-aside><!--主内容显示区域，数据内容都是在这里面渲染的--><el-main></el-main></el-container></el-main><!--底部--><el-footer></el-footer></el-container>
</template>

这样最基本的布局就好了，我们接下来只需要在对应的区域渲染好内容就行，这里最主要的就是使用ElementUI其中的路由功能。

我们将Main.vue里的内容完整给写好，注意看注释：

<template><el-container><!--顶部--><el-header style="border-bottom: 1px solid gray;"><el-row style="margin: 10px 15px"><el-col :span="1"><!--收缩条--><a href="#" @click="changeCollapse" style="font-size: 25px;color:#909399;"><i:class="collpaseIcon"></i></a></el-col></el-row></el-header><!--中央区域--><el-main><el-container><!--左侧导航栏--><el-aside :style="{width:collpaseWidth}"><!--default-active代表导航栏默认选中哪个index, :collapse决定导航栏是否展开，为boolean类型:router决定导航栏是否开启路由模式，即在菜单item上设置路由是否生效，值为boolean类型--><el-menudefault-active="0"class="el-menu-vertical-demo":collapse="isCollapse":router="true"><!--index设置当前item的下标，:route则是传一个对象进行，指定路由--><el-menu-item index="0" :route="{name:'Index'}"><i class="fa fa-magic"></i><span slot="title"> 首页</span></el-menu-item><el-submenu index="1"><template slot="title"><i class="fa fa-cogs"></i><span> 系统管理</span></template><el-menu-item index="/Setting" :route="{name:'Setting'}"><i class="fa fa-cog"></i> 网站设置</el-menu-item><el-menu-item index="1-2"><i class="fa fa-user-circle-o"></i> 角色管理</el-menu-item><el-menu-item index="1-2"><i class="fa fa-object-group"></i> 店铺模板</el-menu-item></el-submenu><el-submenu index="2"><template slot="title"><i class="fa fa-users"></i><span> 会员管理</span></template><el-menu-item index="2-1" :route="{name:'Customer'}"><i class="fa fa-address-card-o"></i>会员列表</el-menu-item><el-menu-item index="2-2"><i class="fa fa-envelope-o"></i> 会员通知</el-menu-item></el-submenu></el-menu></el-aside><!--主内容显示区域--><el-main><!--路由渲染--><router-view></router-view></el-main></el-container></el-main><!--底部--><el-footer style="border-top: 1px solid gray"></el-footer></el-container>
</template><script>// 这一大段JS就是为了做收缩/展开导航栏而用的！export default {name: "Main",data: function () {return {isCollapse: false, // 决定左侧导航栏是否展开}},computed: {collpaseIcon: function () { // 左侧导航栏是否展开状态的图标// 如果是展开状态就图标向右，否则图标向左return this.isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold';},collpaseWidth: function () { // 左侧导航栏是否展开状态的宽度// 如果是展开状态就导航栏宽度为65px，否则200pxreturn this.isCollapse ? '65px' : '200px';}},methods: {changeCollapse: function () { // 更改左侧导航栏展示状态this.isCollapse = !this.isCollapse;}}}
</script><style scoped>/*整体显示区域布局样式*/.el-container {height: 100%;}.el-header, .el-main {padding: 0;}/*左边导航栏具体样式*/.el-menu-vertical-demo.el-menu {padding-left: 20px;text-align: left;height: 100%;padding: 0;}el-container > .el-menu-vertical-demo.el-menu {padding: 0;}.el-submenu .el-menu-item, .el-menu-item {min-width: 50px;}.el-menu-item {padding: 0;}
</style>

这时候页面就已经做好了，我们来看下效果：

项目github地址如下：

https://github.com/RudeCrab/rude-java

clone到本地即可运行，如果对你有帮助请在github上点个star，我还会继续更新更多【项目实践】哦！

博客、Github、微信公众号都是：RudeCrab，欢迎关注！如果对你有帮助可以收藏、点赞、star、在看、分享~~ 你的支持，就是我写文的最大动力

微信上转载请联系公众号开启白名单，其他地方转载请标明原地址、原作者！

【项目实践】使用Vue.js和ElementUI快速实现后台管理系统的界面布局相关推荐

elementui 搭建布局页面路由_【项目实践】使用Vue.js和ElementUI快速实现后台管理系统的界面布局...
前言大家都知道,后台管理界面不需要很酷炫的动画效果,也不需要花里胡哨的界面布局,只需要简洁易用.清爽明了的界面以便于管理数据.而现在普遍的后台管理系统的界面布局都差不多,上中下结构,然后左边是导航栏 ...
Jquery项目中使用vue.js和element-ui
大家在工作的情况中,可能会遇到之前的老项目采用jq书写,或者修改或者新增功能在jq中,原始jq的项目,代码可维护性很差,一个页面几千行jq,可维护性很差,工作量巨大,所以这个时候大家可以引入vue.j ...
SSM8==纯注解SSM项目：实现单表CRUD、事务、自定义异常和统一异常处理、RESTFUL风格接口、统一返回值格式（状态码、内容、消息）、JSON传参、axios、vue.js、elementUI
环境:IDEA2021+JDK8+MAVEN3.8+TOMCAT7插件前端:axios.vue.js.elementUI 后端:见POM.XML相关依赖,主要有数据库MySQL5.7 ,数据源Dru ...
【两万字图文详解】运动会管理系统-前后端分离-项目开发：【后端】SpringBoot, SpringMVC, MyBatis【前端】Vue.js，ElementUI
项目名称:运动会管理系统技术栈: 后端:SpringBoot,SpringMVC,MyBatis,tkmapper,Maven聚合工程等前端:Vue.js,Element-u ...
【转】Vue.js 2.0 快速上手精华梳理
Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...
vue.js+flask+element-ui简易Demo 气势的信心
vue.js+flask+element-ui简易Demo 气势的信心计算机/健身爱好者 10 人赞了该文章最近工作中用到Vue.js加上一直在用的Flask,所以准备写个小小的demo巩固下. ...
一篇文章教会你创建vue项目和使用vue.js实现数据增删改查
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
不会几个框架，都不好意思说搞过前端： Vue.js - 60分钟快速入门
Vue.js--60分钟快速入门 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的 ...
list vue 添加数据方法_一篇文章教会你创建vue项目和使用vue.js实现数据增删改查...
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...

【项目实践】使用Vue.js和ElementUI快速实现后台管理系统的界面布局

前言

准备

配置路由

布局

【项目实践】使用Vue.js和ElementUI快速实现后台管理系统的界面布局相关推荐

最新文章

热门文章