How to lay out the new vue project (sidebar, home page, etc.)

1. Create a new vue project that can run

2. Under the view folder of src, create a layout folder, and then create four vues as shown in the figure

Code in MainLayout

3. Find the index.js under the router, configure it, and modify the original 5~10 lines. The 1 and 2 marked by the red pen are named by yourself, and the 3 places are the path of MainLayout

3. Continue to write code in MainLayout.vue, write NavBar and so on

4. Then write code in NavBar, HeaderView, ContentView, take ContentVIew as an example

Then open the browser, you can see the page like this

With the Home|view above, the code in App.vue has not been cleared, it is best to delete all the code in it

You can see this, at this time has achieved a small initial success

5. Write styles in NavBar.vue

The resulting style is shown in the figure, and the set width and height have no effect, because the width and height of our big box Layout are not set

6. Write the style in MainLayout, pay attention to the height, width, etc. should be written as 100vh or 100vh, not directly 100%

At this time, the display effect is as follows:

(Later, I quietly changed my big red one)

At this point, the second phase of success has been achieved! ! !

7. Briefly write about the style of headerview and contentview

8. To use the element-ui library, it must be installed first (this is a painful process, you can check the official library of element-ui)

9. Paste the code of the sidebar in the element-ui library into the Navbar

Just paste these codes, the following is the complete code in 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>

Complete code in 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')

Realize the effect:

One, two, three of the navigation bar can be clicked, that's it

Ask me in the comment area if you don’t understand, don’t spray if you don’t like it. . . . . . . .