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>

 按照這樣子操作以及有些樣式需要自己調整一下，界面是可以出來的，跳轉也是沒有問題的哦