导言-大纲
一、首页架子的搭建
1. Home.vue
- 选择倒数第二个，复制到项目的 Home页面，需要编写less样式，所以要安装
less 和 less-loader这两个包：npm i less和npm i less-loader@5.0.0 Home.vue 添加了
<el-container style="height: 100%"><template> <el-container style="height: 100%"> <el-aside width="auto"> <commen-aside-menu></commen-aside-menu> </el-aside> <el-container> <el-header>Header</el-header> <el-main>Main</el-main> </el-container> </el-container> </template> <script> export default { name: 'Home', data(){ return {} } } </script> <style lang="less" scoped> .el-header { background-color: #333; } .el-main { padding-top: 0; } </style>
2. main.js 中进行按需引入
import Vue from 'vue'
import {Button, Container, Header, Main, Aside} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
//Vue.component(Button)
Vue.use(Button)
Vue.use(Container)
Vue.use(Header)
Vue.use(Main)
Vue.use(Aside)
new Vue({
router,
render: h => h(App),
}).$mount('#app')
3. 修改App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
//import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App'
}
</script>
4. 页面
二、侧边栏的实现
1. 新建 component/commenAsideMenu.vue
把element中的侧边栏copy过来。
<template>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">导航一</span>
</template>
<el-menu-item-group>
<span slot="title">分组一</span>
<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">
<span slot="title">选项4</span>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</template>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
<script>
export default {
data() {
return {
isCollapse: true
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
2. Home.vue
3. main.js
4. 页面
三、解决默认样式
1. 解决最上面空白的区域
原因：app.vue中有默认样式
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
删掉，改成：
<style>
#app {
height: 100vh;
}
</style>
结果：
2. 展开侧边栏
修改为false
结果：
3. 改造侧边栏
a. 无孩子菜单
把数据放到data中，这应该是从数据中获取的
[ { path: '/', name: 'home', label: '首页', icon: 's-home', url: 'Home/Home' }, { path: '/mall', name: 'mall', label: '商品管理', icon: 'video-play', url: 'MallManage/MallManage' }, { path: '/user', name: 'user', label: '用户管理', icon: 'user', url: 'UserManage/UserManage' }, { label: '其他', icon: 'location', children: [ { path: '/page1', name: 'page1', label: '页面1', icon: 'setting', url: 'Other/PageOne' }, { path: '/page2', name: 'page2', label: '页面2', icon: 'setting', url: 'Other/PageTwo' } ] } ]编写计算函数，将数据分为 带有孩子的和不带孩子的
computed: { noChildren() { return this.menu.filter(item => !item.children) }, hasChildren(){ return this.menu.filter(item => item.children) }改造侧边栏代码，进行for 循环便利。
<template> <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" > <el-menu-item v-for="item in noChildren" :index="item.path" :key="item.path"> <i :class="'el-icon-' + item.icon"></i> <span slot="title">{ {item.label}}</span> </el-menu-item> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span slot="title">导航一</span> </template> <el-menu-item-group> <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-submenu> </el-menu> </template>页面展示
b、无孩子菜单
直接上代码就行了
<template>
<el-menu
default-active="1-4-1"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
:collapse="isCollapse"
>
<h3>通用后台管理系统</h3>
<el-menu-item v-for="item in noChildren" :index="item.path" :key="item.path">
<i :class="'el-icon-' + item.icon"></i>
<span slot="title">{
{item.label}}</span>
</el-menu-item>
<el-submenu v-for="item in hasChildren" :index="item.path" :key="item.path">
<template slot="title">
<i :class="'el-icon-' + item.icon"></i>
<span slot="title">{
{item.label}}</span>
</template>
<el-menu-item-group v-for="(subItem, subIndex) in item.children" :key="subItem.path">
<el-menu-item :index="subIndex">{
{subItem.label}}</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</template>
四、menu/App.vue样式和路由跳转
1. 修改menu样式
commenAsideMenu.vue 侧边栏样式
.el-menu { height: 100%; border: none; h3 { color: #fff; text-align: center; line-height: 48px; } }
背景颜色，鼠标移动上后高亮
2. 修改App.vue 样式
在App.vue中解决左边和上边的白边以及侧边栏的高度问题。
解决样式
html, body {
margin: 0px;
padding: 0px;
height: 100%; // 解决高度问题
}
3. 路由
a、 添加事件
b、更改Home为Main.vue
因为这里的Home，已经不是Home的意义了，而是主页的意义，所以改为Main。
- 修改名称
- 修改路由中的名称
c、移动views/user/index.vue
<template>
<div>
我是 User 页面
</div>
</template>
<script>
export default {
name: 'User',
data(){
return {}
}
}
</script>
d、新建views/home/index.vue
<template>
<div>
我是 Home 页面
</div>
</template>
<script>
export default {
name: 'Home',
data(){
return {}
}
}
</script>
e、修改router/index.js
const routes = [
{
path: '/',
name: 'Main',
component: () => import('../views/Main.vue'), // 第二种方式
children: [
{
path: '/home',
name: 'home',
component: () => import('../views/home')
},
{
path: '/user',
name: 'user',
component: User
}
]
}
]
f、更改Main.vue
g、页面
五、开发中的bug和警告
1. prop “index”. 警告
vue.runtime.esm.js?c320:4560 [Vue warn]: Invalid prop: custom validator check failed for prop "index".
在使用elementUI循环渲染导航的过程中
会出现如下警告
报错翻译：无效属性：属性“index”的类型检查失败。应为值为“undefined”的字符串，但未定义
解决方法：
将:index=“item.path”
改为:index="item.path + ’ ’ "
完美解决
原因：elementUI的index是字符串格式，加一个‘ ’，将后台数据转换为字符串，那个item确实没有path这个属性，所以返回undefined。最好给那个item加个path属性，或者干脆换个属性，比如name，所有item都有这个属性就可以了。
