新建的vue项目如何布局（侧边栏，主页等）

本文链接：https://blog.youkuaiyun.com/m0_65380423/article/details/129747539

新建一个vue项目，能够运行起来

在src的view文件夹下，创建一个layout文件夹，然后分别创建如图所示的四个vue

在MainLayout的代码

3、找到router下面的index.js,配置，修改原来的5~10行，红色笔标出来的1、2是自己命名的，3处写的是MainLayout的路径

继续在MainLayout.vue里面写代码，把NavBar等等写进去

然后写代码在NavBar，HeaderView，ContentView里面，以ContentVIew为例

然后打开浏览器，可以看到这样子的页面

有上面的Home|view，是App.vue里面的代码没有清除掉，最好将里面的代码全删掉

就可以看到这样的，此时已获得初步的小小的成功

在NavBar.vue里面写样式

得到的样式如图，设置的宽度和高度没有起作用，因为我们的大盒子Layout的宽高没有设置

在MainLayout里面写样式，注意高度宽度等要写成100vh或者100vh，而不是直接的100%

此时显示效果如图：

（后面我悄咪咪的把我的大红色换了）

此时已经获得第二阶段的成功！！！

浅浅的写一下headerview和contentview的样式

要使用element-ui库，所以要先安装（这是一个痛苦的过程，可取element-ui官方库查看）

将element-ui库里的侧边栏的代码粘到Navbar里面

粘贴这些代码就行了，下面是NavBar里面的完整代码

<template>
    <div class="navbar">

   
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1', '3']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>导航一</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <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">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>导航二</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="2-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i>导航三</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="3-1">选项1</el-menu-item>
          <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="3-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="3-4">
          <template slot="title">选项4</template>
          <el-menu-item index="3-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>
  </el-aside>
    


    </div>
</template>
<script>
export default {
    data() {
        return {

        }

    }
}
</script>
<style >
.navbar {
    width: 220px;
    height: 100%;
    background-color: rgb(141, 134, 134);
    display: flex;
}
</style>

mian.js里的完整代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
Vue.use(ElementUI)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)

}).$mount('#app')

实现效果：