一步步创建一个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中引入: