Vue前端篇之项目布局设计

一、文件初始化 

移除一些没有用的组件或者文件： 

1、注释掉App.vue中的两个路由 

2、注释掉router/index.js文件中无用的路由 

二、layout 

1、映射路由 

路由配置，在router/index.js文件中：

import { createRouter, createWebHistory } from "vue-router"; // import Home from "../views/Home.vue"; import Layout from "../layout"; import Authors from "../views/authors"; import Books from "../views/books"; import Publishers from "../views/publishers"; const routes = [ { path: "/", name: "layout", component: Layout, }, //进行路由配置，这些子路由都会在layout父组件中的AppMain组件中被渲染 { path: "/", name: "layout", component: Layout, children:[ //作者管理 { path: "/authors", component: Authors, }, //出版社管理 { path: "/publishers", component: Publishers, }, //书籍管理 { path: "/books", component: Books, } ] }, // { // path: "/about", // name: "About", // // route level code-splitting // // this generates a separate chunk (about.[hash].js) for this route // // which is lazy-loaded when the route is visited. // component: () => // import(/* webpackChunkName: "about" */ "../views/About.vue"), // }, ]; const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }); export default router; const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }); export default router;

2、页面布局 

参考： 布局

• 头部、左侧、主体组件 

在layout目录下新建components目录，然后新建头部、左侧、主体部分组件的文件夹，最后后新建对应的文件： 

AppHeader/index.vue

<template> <el-header class="header">Header</el-header> </template> <script> export default { name: "index" }; </script> <style scoped> </style>
    

AppMain/index.vue

<template> <el-main class="main"> <router-view></router-view> </el-main> </template> <script> export default { name: "index" }; </script> <style scoped=""> </style>

SideBar/index.vue 参考：左侧导航栏

<template> <el-aside class="aside"> <el-menu :router="true" active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" close="handleClose" default-active="/authors/" open="handleOpen" text-color="#fff"> <el-menu-item index="/authors/"> <i class="el-icon-menu"></i> <template title="">作者管理</template> </el-menu-item> <el-menu-item index="/publishers/"> <i class="el-icon-menu"></i> <template title="">出版社管理</template> </el-menu-item> <el-menu-item index="/books/"> <i class="el-icon-menu"></i> <template title="">书籍管理</template> </el-menu-item> </el-menu> </el-aside> </template> <script> export default { name: "index" }; </script> <style scoped=""> </style>

• layout/index.vue 

在布局中引入对应的组件即可。参考 布局

<template> <div> <appheader> <sidebar> <appmain> </appmain></sidebar></appheader></div> </template> <script> import AppHeader from "./components/AppHeader"; import AppMain from "./components/AppMain"; import SideBar from "./components/SideBar"; export default { name: "index", components: { AppHeader, AppMain, SideBar }, methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); } } }; </script> <style scoped=""> .header { background: #4e5d70; } .main { position: absolute; top: 65px; bottom: 0px; left: 300px; right: 0px; background: white; } .aside { position: absolute; top: 65px; width: 200px; bottom: 0px; background: rgb(84 92 100); } </style>

显示 ：

更多文章合集前往： 往期精彩文章