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

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

 

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

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

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

 

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

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

 

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

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

<!-- html 代码-->
<template>
<div ><!-- 主要显示的页面内容 -->

</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 >{{item}}</el-breadcrumb-item>
</el-breadcrumb>
<!-- 这里的头部可以再加自己需要的内容哈,主要看业务需要哦 -->
</div>
</template>

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

相关文章:

  • 2021-10-02
  • 2022-12-23
  • 2021-12-28
  • 2021-12-18
  • 2021-12-28
  • 2022-12-23
  • 2021-07-04
  • 2021-12-17
猜你喜欢
  • 2022-12-23
  • 2021-11-25
  • 2022-12-23
  • 2022-01-13
  • 2021-10-18
  • 2021-12-28
  • 2021-12-19
相关资源
相似解决方案