这一期目标是把系统的布局给搭建起来,采用一个非常简单的后端管理风格,可以参考官方的页面
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')
App.vue 里需要改成
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
运行程序:
npm run serve
效果: