阅读量:0
这一期目标是把系统的布局给搭建起来，采用一个非常简单的后端管理风格，可以参考官方的页面https://element.eleme.cn/#/zh-CN/component/container
下面我们开始搭建，首先，安装一下vue-router，element-ui
npm install vue-router@3 npm install element-ui 然后在src目录下创建layouts文件夹和router文件夹 ，
在layouts文件夹下建立Layout.vue文件
<template> <el-container class="container"> <el-aside width="200px" style="background-color: rgb(229,227,238)"> <el-menu :default-active="activeIndex" active-text-color="#BAA7FFFF" class="el-menu-vertical"> <el-menu-item index="/dashboard" @click="navigateTo('/dashboard')">Dashboard</el-menu-item> <el-menu-item index="/users" @click="navigateTo('/users')">Users</el-menu-item> <!-- 其他菜单项 --> </el-menu> </el-aside> <el-container> <el-header class="header"> <div class="logo">My Admin</div> </el-header> <el-main class="main"> <router-view></router-view> </el-main> </el-container> </el-container> </template> <script> export default { data() { return { activeIndex: '/dashboard' }; }, methods: { navigateTo(path) { console.log(this.activeIndex); if (this.$route.path !== path) { this.activeIndex = path; this.$router.push(path); } } } }; </script> <style scoped> .container{ height: 100vh; border: 1px solid #eee; } .header { background-color: #ffffff; text-align: center; line-height: 60px; border-bottom: 1px solid #ebeef5; } .logo { font-size: 20px; font-weight: bold; } .main { padding: 20px; } </style> 在router下建立index.js文件，
import Vue from 'vue'; import Router from 'vue-router'; import Layout from '@/layouts/Layout'; // 引入页面组件 import Dashboard from '@/views/Dashboard'; import Users from '@/views/Users'; Vue.use(Router); const routes = [ { path: '/', component: Layout, redirect: '/dashboard', children: [ { path: 'dashboard', component: Dashboard, name: 'Dashboard' }, { path: 'users', component: Users, name: 'Users' } // 其他子路由 ] }, // 其他路由 ]; const router = new Router({ mode: 'history', routes }); export default router; 因为想访问 / 直接转到 /dashboard ,所以有这行设置：
redirect: '/dashboard', 还需要新建views文件夹，新增两个vue文件Dashboard.vue和Users.vue
<!-- Dashboard.vue --> <template> <div className="dashboard"> <h1>Dashboard</h1> <!-- Dashboard 内容 --> </div> </template> <script> export default { name: 'Dashboard' }; </script> <style scoped> .dashboard { /* 样式 */ } </style> <!-- Users.vue --> <template> <div class="users"> <h1>Users</h1> <!-- Users 内容 --> </div> </template> <script> export default { name: 'Users' }; </script> <style scoped> .users { /* 样式 */ } </style> 修改main.js ，引入上面我们新增的内容：
import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import router from './router' Vue.use(ElementUI) Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app') 运行程序:
npm run serve 效果：
