Cree un nuevo proyecto vue que pueda ejecutarse
Debajo de la carpeta de vista de src, cree una carpeta de diseño y luego cree cuatro vues como se muestra en la figura
Código en MainLayout
3. Busque index.js debajo del enrutador, configúrelo y modifique las líneas originales de 5 a 10. El 1 y el 2 marcados con el bolígrafo rojo los nombra usted mismo, y los 3 lugares son la ruta de MainLayout
Continúe escribiendo código en MainLayout.vue, escriba NavBar, etc.
Luego escriba código en NavBar, HeaderView, ContentView, tome ContentVIEW como ejemplo
Luego abra el navegador, puede ver la página como esta
Con la vista Inicio|de arriba, el código en App.vue no se ha borrado, es mejor borrar todo el código que contiene
Puedes ver esto, en este momento ha logrado un pequeño éxito inicial
Escribir estilos en NavBar.vue
El estilo resultante se muestra en la figura, y el ancho y la altura establecidos no tienen ningún efecto, porque el ancho y la altura de nuestro diseño de cuadro grande no están establecidos.
Escriba el estilo en MainLayout, preste atención a la altura, el ancho, etc. Debe escribirse como 100vh o 100vh, no directamente 100%
En este momento, el efecto de visualización es el siguiente:
(Más tarde, en silencio cambié mi gran rojo)
¡En este punto, se ha logrado la segunda fase del éxito! ! !
Escriba brevemente sobre el estilo de headerview y contentview
Para usar la biblioteca element-ui, primero debe instalarse (este es un proceso doloroso, puede consultar la biblioteca oficial de element-ui)
Pegue el código de la barra lateral en la biblioteca element-ui en la barra de navegación
Simplemente pegue estos códigos, el siguiente es el código completo en 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>Código completo en 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')
Darse cuenta del efecto:
Se puede hacer clic en uno, dos, tres de la barra de navegación, eso es todo
Pregúntame en el área de comentarios si no entiendes, no rocíes si no te gusta. . . . . . . .