vue3 + ts: layout布局(vue3+ts+vite)

vue3 + ts: layout布局

推荐整理分享vue3 + ts: layout布局(vue3+ts+vite)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue3 ts知乎专栏,vue3 mitt,vue3+ts+vite,vue3+ts+vite,vue3 ts知乎专栏,vue3 ts知乎专栏,vue3 mitt,vue-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

百度安全验证