一步步创建一个vue项目（三）
根据路由生成一个侧边栏
准备工作
先创建几个文件，主要是下面几个：
先介绍一下，主要是使用element-ui来分成顶部，侧边栏，主要部分三部分
layout.vue文件是一个相当于app.vue导入三部分：顶部Navbar.vue，侧边栏：Sidebar.vue，主体部分：AppMain.vue，侧边栏中的内容：SidebarItem，用于一次性导入多个页面：index.js
Layout.vue文件内容：
<template>
<div class="app-wrapper" >
<sidebar class="sidebar-container"></sidebar>
<div class="main-container">
<navbar></navbar>
<appMain></appMain>
</div>
</div>
</template>
<script>
import {
sidebar, navbar, appMain } from '../layout/'
export default {
name: 'layout',
components: {
sidebar,
navbar,
appMain
},
data () {
return {
}
},
// 方法集合
methods: {
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/style/mixin";
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
&.hideSidebar {
.sidebar-container {
width: 36px;
overflow: inherit;
}
.main-container {
margin-left: 36px;
}
}
.sidebar-container {
transition: width 0.28s ease-out;
width: 210px;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 1001;
overflow-y: auto;
&::-webkit-scrollbar {
display: none;
}
}
.main-container {
min-height: 100%;
transition: margin-left 0.28s ease-out;
margin-left: 210px;
}
}
</style>
注意一：
这个文件当做基础部分，把三部分的布局做好，然后导入三部分的组件，这里要注意使用import { },括号内一次性导入多个组件时要使用index.js文件：
//index.js
export {
default as sidebar} from './Sidebar'
export {
default as navbar} from './Navbar'
export {
default as appMain} from './AppMain'
export {
default as layout} from './Layout'
注意二：
还有就是各组件的name要和导入的相同，不然会报错：
注意三：
这里还有一个问题就是如果使用scss格式的css样式需要安装依赖，这里有几个博客推荐：
各个依赖安装.
这里有一个可能会遇到的错误，就是安装sass 10.x.x的时候会报错，需要安装7.x.x版本：
遇到的版本问题.
创建侧边栏
解决了之前的问题之后还需要安装element-ui
安装:
npm i element-ui -S
在main.js中引入：
