vue3 + ts: layout布局

一、理解：layout

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

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

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

二、vue3 ts 项目使用layout

2.1、项目目录

2.2、layout文件

1.  
   <!-- src/layouts/default/index.vue -->
2.  
   <template>
3.  
   <el-container>
4.  
   <el-aside width="200px">
5.  
   Aside
6.  
   </el-aside>
7.  
   <el-container>
8.  
   <el-header>Header</el-header>
9.  
   <el-main>
10.  
    <!-- 子路由出口 -->
11.  
    <router-view />
12.  
    </el-main>
13.  
    </el-container>
14.  
    </el-container>
15.  
    </template>
16.  
     
17.  
    <script setup lang="ts"></script>
18.  
     
19.  
    <style scoped lang="less">
20.  
    .el-container {
21.  
    height: 100vh;
22.  
    }
23.  
    .el-header {
24.  
    background-color: #B3C0D1;
25.  
    color: #ff0000;
26.  
    }
27.  
    .el-aside {
28.  
    width: auto;
29.  
    background-color: #304156;
30.  
    color: #ff0000;
31.  
    }
32.  
    .el-main {
33.  
    background-color: #E9EEF3;
34.  
    }
35.  
    </style>

 2.3、配置路由

1.  
   // 引入创建路由管理器 引入创建路由模式 history模式
2.  
   import { createRouter, createWebHistory } from 'vue-router'
3.  
   import layout_default from '@/layouts/default/index.vue'
4.  
   // 引入路由各页面配置
5.  
   const routes=[
6.  
   {
7.  
   path: '/',
8.  
   redirect: '/like'
9.  
   },
10.  
    {
11.  
    path: '/layout',
12.  
    component: layout_default,
13.  
    name: 'layout',
14.  
    children: [
15.  
    {
16.  
    path: 'default',
17.  
    component: ()=>import('../views/indicators/default.vue'),
18.  
    name: 'default'
19.  
    }
20.  
    ]
21.  
    }
22.  
    ]
23.  
    // 创建路由管理器 模式和路由
24.  
    const router=createRouter({
25.  
    history: createWebHistory(),
26.  
    routes
27.  
    })
28.  
     
29.  
    export default router

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

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

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

参考链接：

百度安全验证

这篇好文章是转载于：学新通技术网