vue3 + ts: layout布局

ゝ一世哀愁。 2024-04-06 11:53 39阅读 0赞

**一、理解：layout**

![88d8097a6f0c4cf7b8275c2117ea026b.png][]

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

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

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

二、vue3 + ts 项目使用layout

2.1、项目目录

![3e87488188c249c88691d2704a353df0.png][]

2.2、layout文件

<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

![aa4719dea38746d1ae605987966f7f89.png][]

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

![017fd16c33894beebc1bf24b8d3e6cbb.png][]

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

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

参考链接：

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

[百度安全验证][Link 1]

[88d8097a6f0c4cf7b8275c2117ea026b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/4da2977ec1dd40d18aaf60c46cdea97f.png
[3e87488188c249c88691d2704a353df0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/6eafbb2ae7fa4f099f5894ac468c8021.png
[aa4719dea38746d1ae605987966f7f89.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/cf56ed61552043d88b8e05f5b762608b.png
[http_localhost_3020_layout_default]: http://localhost:3020/layout/default
[017fd16c33894beebc1bf24b8d3e6cbb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/e7f51f6da55f4059862d32bfd0a067a6.png
[Vue3_Vite_Ts _ 04 _ Layout _-CSDN_vue3_layout]: https://blog.csdn.net/u012961419/article/details/124300171
[Link 1]: https://www.baidu.com/s?tn=02003390_43_hao_pg&isource=infinity&iname=baidu&itype=web&ie=utf-8&wd=vue3%20ts%E4%BD%BF%E7%94%A8layout