使用vue组件和flex布局快速搭建页面框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../node_modules/vue/dist/vue.js"></script>
<style>
*{margin: 0;padding: 0;}
html,body,#app{
width: 100%;
height: 100%;
}
#app{
display: flex;
flex-direction: column;
}
.top{
height: 80px;
background-color: burlywood;
}
.main{
flex: 1;
display: flex;
}
.main .left{
width: 140px;
background-color: chartreuse;
}
.main .right{
flex: 1;
background-color: coral;
}
.footer{
height: 60px;
background-color: cornsilk;
}
</style>
</head>
<body>
<div id="app">
<my-top></my-top>
<my-main class="main"></my-main>
<my-footer class="footer"></my-footer>
</div>
<!-- 组件 -->
<template id="top">
<div class="top">
<h1>头部导航</h1>
</div>
</template>
<template id="main">
<div>
<my-left class="left"></my-left>
<my-right class="right"></my-right>
</div>
</template>
<template id="footer">
<div>
<h1>版权信息</h1>
</div>
</template>
<template id="left">
<div>
<ul>
<li>个人中心</li>
<li>设置中心</li>
<li>操作</li>
</ul>
</div>
</template>
<template id="right">
<div>
<h1>内容展示区域</h1>
</div>
</template>
<script>
let myTop = {template:"#top"};
let myLeft = {template:"#left"}
let myRight = {template:"#right"}
let myMain = {
template:"#main",
components:{
myLeft,myRight
}
};
let myFooter = {template:"#footer"}
new Vue({
el:'#app',
components:{
myTop,myMain,myFooter
}
})
</script>
</body>
</html>
本文来自博客园，作者：JackieDYH，转载请注明原文链接：https://www.cnblogs.com/JackieDYH/p/17634667.html
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现