vue怎么布局（vue3 + ts: layout布局）

一、理解：layout

layout，语义：布局，设计，结合前端vue项目，我理解为这样的定义：页面级别的组件，框架级别的组件，基础布局组件，基础设计

关键词：组件、布局、可复用的、工程化、脚手架

后台管理系统layout组件一般分为：头部组件（navbar）、页签组件（tagsview）、左侧菜单（sidebar）、内容渲染区域（AppMain）

二、vue3 + ts 项目使用layout

2.1、项目目录

2.2、layout文件

<!-- src/layouts/default/index.vue --> <template> <el-container> <el-aside width="200px"> Aside </el-aside> <el-container> <el-header>Header</el-header> <el-main> <!-- 子路由出口 --> <router-view /> </el-main> </el-container> </el-container> </template> <script setup lang="ts"></script> <style scoped lang="less"> .el-container { height: 100vh; } .el-header { background-color: #B3C0D1; color: #ff0000; } .el-aside { width: auto; background-color: #304156; color: #ff0000; } .el-main { background-color: #E9EEF3; } </style>

 2.3、配置路由

// 引入创建路由管理器 引入创建路由模式 history模式 import { createRouter, createWebHistory } from vue-router import layout_default from @/layouts/default/index.vue // 引入路由各页面配置 const routes=[ { path: /, redirect: /like }, { path: /layout, component: layout_default, name: layout, children: [ { path: default, component: ()=>import(../views/indicators/default.vue), name: default } ] } ] // 创建路由管理器 模式和路由 const router=createRouter({ history: createWebHistory(), routes }) export default router

2.4、访问 path + children.path（http://localhost:3020/layout/default）

2.5、同理可以开发很多符合业务需求的组件满足页面级别的组件使用，提高开发效率

三、欢迎交流指正，关注我，一起学习。

参考链接：

Vue3+Vite+Ts 项目实战 04 搭建 Layout 布局_皮蛋很白的博客-CSDN博客_vue3使用layout

百度安全验证