Vue使用Element UI搭建后台模板

---

创建Vue项目

1. 使用Vue项目管理器可视化创建一个Vue项目，参考文章：怎样创建一个前后端分离项目：Vue+SpringBoot
2. 创建好后，在Vue项目管理器中安装ElementUI插件，具体操作看下面动图演示
3. 下载完后，都采用默认设置，点击完成安装：
4. 到此，Vue项目创建完成，测试是否安装成功，用IDEA打开我们创建的项目，在Terminal输入npm run serve命令启动我们的项目，访问localhost:8080 ，出现下面一段英文和一个el-button表示安装elementui成功。

搭建后台模板

1. 访问ElementUI官网：https://element.eleme.cn/
2. 选择组件中的Container布局容器中一款适合后台模板的布局
   

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>

3. 布局中的Aside为我们的左侧菜单栏，先完成它，同样在我们elementui官网中选择一个。
   

<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1', '3']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>导航一</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>导航二</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="2-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i>导航三</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="3-1">选项1</el-menu-item>
          <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="3-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="3-4">
          <template slot="title">选项4</template>
          <el-menu-item index="3-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>
  </el-aside>

理解一下里面的几个标签，然后就可以灵活使用了：

• el-menu：左侧菜单栏，里面常用属性：
  • :default-openeds：默认展开的菜单，通过菜单的index值来关联。
  • default-active：默认选中的菜单，通过菜单的index值来关联。
• el-submenu：可展开的菜单，常用属性：
  • index：菜单的下标，文本类型，不能是数值类型。
• template：对应el-submenu的菜单名。
• i：设置菜单图标，通过class属性实则。
• el-menu-item：菜单的子节点，不可再展开，常用属性：
  • index：菜单的下标，文本类型，不能是数值类型。

3. 上面等一下搭建后台会用用到ElementUI组件，现在正式开始搭建，简单的规划图：
   
4. App.vue 父组件存放我们路由的Home.vue即可。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

5. Home.vue 采用上面ElementUI的布局，左侧菜单导入组件，中间页面路由显示。

<template>
  <el-container>
    <el-header>后台管理模板</el-header>
    <el-container>
      <el-aside width="200px">
        <!--引入左侧菜单栏组件-->
        <Aside></Aside>
      </el-aside>
      <el-main>
        <!--页面路由显示-->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>
  /*菜单栏组件*/
import Aside from "./home/Aside";

export default {
  name: 'Home',
  components: {
    Aside
  }
}
</script>



<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>

6. Aside.vue左侧菜单栏

<template>
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <!--
        router标记，表示可以路由。
        :default-openeds="['0']" :默认展开第一个导航栏
        -->
        <el-menu router :default-openeds="['0']">
            <!--
            这里是循环遍历，构造我们的导航栏，遍历的是什么？
            $router：路由配置文件/router/index.js
            $router.options.routes：该文件中的routes对象，是一个集合，
            注意一定要绑定:index，保证每个index不同
            -->
            <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''">
                <template slot="title"><i class="el-icon-message"></i>{{item.name}}</template>
                <!--
                item2 为 item集合中的children，也是一个集合
                这里绑定index与前面的router标记对应，跳转路由
                绑定class样式 $route.path 这里的$route相对前面少了一个r,指的是当前一个访问的网页 path表示路径
                当当前网页的path和item2.path相等时，样式生效
                -->
                <el-menu-item v-for="(item2,index2) in item.children" :index="item2.path" :class="$route.path==item2.path?'is-active':''">{{item2.name}}</el-menu-item>
            </el-submenu>
        </el-menu>
    </el-aside>
</template>

<script>
    export default {
        name: "Aside"
    }
</script>

<style scoped>

</style>

7. 路由文件/router/index.js，可以看到我们是以导航栏的方式编写的

import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: '导航栏1',
    component: () => import('../views/Home'),
    redirect: '/page1',
    children: [
      {
        path: '/page1',
        name: '页面1',
        component: () => import('../views/aside/PageOne')
      },
      {
        path: '/page2',
        name: '页面2',
        component: () => import('../views/aside/PageTwo')
      }
    ]
  },
  {
    path: '/',
    name: '导航栏2',
    component: () => import('../views/Home'),
    children: [
      {
        path: '/page3',
        name: '页面3',
        component: () => import('../views/aside/PageThree')
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

8. 自己编写页面组件，下面为一个页面的测试页面组件。

<template>
    <div>
        <h1>页面1</h1>
    </div>
</template>

<script>
    export default {
        name: "PageOne"
    }
</script>

<style scoped>

</style>

9. 效果：