其他分享
首页 > 其他分享> > vue + element ui 搭建后台管理系统

vue + element ui 搭建后台管理系统

作者:互联网

界面图:(vue+element ui 框架搭建的,所以element框架是一定要下载引入进来的哦)

 

 首先用 vue init webpack management_backstage 创建项目(node,脚手架之类的是要提前安装好的哦)

cd management_backstage 到项目目录中,创建需要的目录文件后,然后配置路由

 

 进入 router 文件 的 index.js 文件中配置路由:(肯定是要在当前js中先引入相关文件,然后再配置路由)

 

 主要是看一下meta 里的内容,比如说: component:manage 这里的manage是要提前引入进来的哈,引入方式: import manage from '@/views/manage/manage';

然后进入 manage.vue 界面看代码:

<!-- html 代码-->
<template>
<div id="manage">
<el-row style="height:100%">
<!-- 这里是左侧导航栏布局 -->
<el-col :span="4" style="min-height:100%;background-color:#324057">
<el-menu :default-active="defaultActive" style="min-height:100%" background-color="#324057" router text-color="#fff" active-text-color="#ffd04b">
<el-menu-item index="manage">首页</el-menu-item>
<el-submenu index="2">
<template slot="title">目录一</template> <!-- 这里的 index="这里是配置路由里面的名字哦" -->
<el-menu-item index="dreamOne" >for dream one </el-menu-item>
<el-menu-item index="dreamTwo" >for dream two </el-menu-item>
<el-menu-item index="dreamThree" >for dream three</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title">目录二</template>
<el-menu-item index="reviceOne">for revice one</el-menu-item>
<el-menu-item index="reviceTwo">for revice two</el-menu-item>
<el-menu-item index="reviceThree">for revice three</el-menu-item>
</el-submenu> <!-- 这里暂时配置了3个导航栏哦,如有多个可以重复操作配置即可 -->
</el-menu>
</el-col>
<!-- 右侧布局 -->
<el-col :span="20" style="height:100%;overflow:auto;">
<headerTop></headerTop> <1-- 引入的头部组件 -->
<keep-alive>
<router-view></router-view> <!-- 主要显示的页面内容 -->
</keep-alive>
</el-col>
</el-row>
</div>
</template>
<!-- js 代码 -->
<script>
import headerTop from '@/components/header';
export default {
data(){
return{};
},
components:{
headerTop
},
methods:{

},
computed:{
defaultActive:function(){
return this.$route.path.replace('/','');
}
}
}

</script>

看一下 header组件里面的内容:

<template>
<div id="header_container">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{path:'/manage'}">home</el-breadcrumb-item>
<el-breadcrumb-item v-for="(item,index) in $route.meta" :key="index">{{item}}</el-breadcrumb-item>
</el-breadcrumb>
<!-- 这里的头部可以再加自己需要的内容哈,主要看业务需要哦 -->
</div>
</template>

 按照这样子操作以及有些样式需要自己调整一下,界面是可以出来的,跳转也是没有问题的哦

标签:vue,manage,revice,element,ui,dream,路由
来源: https://www.cnblogs.com/sunnyeve/p/12599848.html