vue公共页面布局layout

最新推荐文章于 2024-07-24 10:45:00 发布
最新推荐文章于 2024-07-24 10:45:00 发布
阅读量6.1k 收藏 17
点赞数 2
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60477441/article/details/127246439
版权

layout公共页面是使用频率非常高的页面，且直接通过路由配置

本篇例子：把侧边栏和导航头作为layout，因为在后台管理系统里基本是每个页面都要用的

1、首先在src/views下新建layout文件夹，layout文件夹下新建layout文件作为总体，再给layout新建components组件 header 、sliderBar、main三个文件基本确定了一个页面的基本架子，然后再新建一个index.js文件暴露出三个文件

 

index.js 

 

 2、layout.vue 再引入组件 

  3、路由配置

 

  4、main.vue

 

 5、效果

 

 

河北蓝翔
关注
推荐开源项目：Vue-Layout - 灵活高效的前端布局解决方案
gitblog_00086的博客
03-22 568
推荐开源项目：Vue-Layout - 灵活高效的前端布局解决方案 项目地址:https://gitcode.com/jaweii/Vue-Layout Vue-Layout 是一个基于 Vue.js 的强大且灵活的布局组件库，旨在帮助开发者更轻松地构建响应式和可定制的网页布局。它采用了现代Web开发的最佳实践，并结合了 Vue 的简单性和灵活性，使得在处理复杂页面结构时变得更加得心应手。 技术分...
vue3 + ts: layout布局
snowball的博客
11-07 5782
后台管理系统layout组件一般分为：头部组件（navbar）、页签组件（tagsview）、左侧菜单（sidebar）、内容渲染区域（AppMain）layout，语义：布局，设计，结合前端vue项目，我理解为这样的定义：页面级别的组件，框架级别的组件，基础布局组件，基础设计。2.5、同理可以开发很多符合业务需求的组件满足页面级别的组件使用，提高开发效率。关键词：组件、布局、可复用的、工程化、脚手架。二、vue3 + ts 项目使用layout。三、欢迎交流指正，关注我，一起学习。
vue如何适应多个页面不同的布局
最新发布
exlink2012的专栏
07-24 858
通过以上几种方法，你可以在 Vue.js 项目中灵活地使用不同的布局来适应多个页面的需求。
VueLayout基于UI组件的Vue可视化布局生成vue代码的工具
08-12
Vue-Layout 基于UI组件的Vue可视化布局、生成.vue代码的工具
vue项目实战（二）之首页layout布局
热门推荐
abcwanglinyong的博客
10-30 6万+
一、替换显示页面 1.在 src/components目录下新建Layout.vue文件： <template> <div> <h2>header</h2> <h2>content</h2> <h2>footer</h2>
Vue Layout布局
KingCruel的专栏
08-04 3693
Layout 布局 * * *Row AttributesCol Attributes * * *
vue项目实战之Layout
玖尘的博客
03-13 6344
前言 接上篇基于vue、element的项目实战，这一章节将向大家讲解一个项目中的主结构layout，也就是一个项目的导航栏和菜单栏。 一、创建登录页面 在 src文件夹下创建 page 文件夹，所有的页面卸载这个文件夹下，在page文件夹下创建Login.vue。 ...
vue3的layout布局练习
XMCYD的博客
06-17 3380
左侧菜单栏Sidebar + 【右侧上方布局：上方组件navBar（折叠展开图标+面包屑）+ 打开的页面标签组件tagsView】 + 右侧下方的主要内容（放不同的组件）2.2.1 、 左侧菜单的sidebarItem里的link组件—判断是内部链接还是外部链接。3.3.1、 打开的标签过多，这时需要左右滚动----滚动条组件ScrollPane。3.1、点击图标使左侧菜单打开关闭组件–hamburger。2.1、logo组件—点击这个图标使左侧菜单折叠/展开。3.3、打开的页面标签–TagsView。
Nuxt pages下不同的页面对应layout下的页面布局操作
01-18
有时候我们pages中不同的页面需要不同的个性化布局这时候layout就起作用了 layouts 根目录下的所有文件都属于个性化布局文件，可以在页面组件中利用 layout 属性来引用。 pages文件下组件的layout属性值为layout文件...
vue3-admin商品管理后台项目(后台布局layout布局开发一)
lovestar墨竹的博客
10-20 4335
vue3-admin商品管理后台项目(后台布局layout布局开发一)
vue实现左右布局,拖动尺寸线控制面板距离调节,点击按钮可展开收起左侧区域的resizeLayout公共组件
MRSLLLL_的博客
12-21 1556
本文实例讲述了JS实现左右布局的resizeLayout公共组件,供大家参考,具体如下: 特点： ① 拖动尺寸线可以调节左右区域的大小； ② 点击按钮可以对左边区域展开和收起； ③ 限制拖动的最小宽度； ④ 使用vue插槽,可复用的组件 html部分 使用插槽也非常简单, <template v-slot:left>这里面写用到的子组件</template> <!-- 可调节左右宽带布局,点击按钮可隐藏左侧 --> <div class="box"
vue-layout-diy:基于vue和flex的自定义布局
05-16
vue-layout-diy 基于vue和flex的自定义布局，。 S前缀为Sunflower简写，我们团队的命名空间。 项目步骤 使用vue-cli@2.9.3初始化项目； vue init webpack vue-layout-diy 根据个人/团队代码规范，配置eslint； 安装； 完成基于flex布局的组件SGrid SGridItem； 引入Element，完成SEmpty默认显示块； 异步组件配合代码分离时: 若使用插件的形式，s-empty在dev模式下渲染正常，在buid模式下无法渲染。 在main.js中通过Vue.component直接注册则正常。 为了方便在GithubPage展示效果，将build后dist中的结果拷贝至demo目录，并修改资源路径。 由于demo并非部署在Web服务器根目录下，所以分离的异步js文件找不到。 需要修改config/inde
Vue布局：Vue布局组件
02-18
提示布局 Vue布局组件 一组用于构建响应式布局的简单组件 npm我@ berhalak / vue-layout 从“ @ berhalak / vue-layout”中导入布局Vue.use（Layout）; // 或者 Vue.use（布局，“ v-”）; // 字首 组件：hor，ver，cols，行，cen，box，wrap，mas 石工组件使用vue-masonry-css的修改版本
vue-admin的layout布局实现
05-19
除了使用 Element UI 组件外，还可以在 Layout 组件中封装一些公共的功能，例如面包屑导航、全局 Loading 状态等，方便在多个页面中复用。同时，也可以使用 Vuex 状态管理库来管理全局状态，例如用户登录状态、菜单...
vue布局组件(router-view)
drnrrwfs的博客
03-09 3087
网页中，很常见的是头部导航栏、底部链接、面包屑或者其他部分，在网站的每一个页面都会出现，并且样式统一 可以使用vue-router提供的router-view来构成一个布局组件，将头部导航栏、底部链接等写在页面上固定渲染，切换页面时，只切换中间内容部分 思路： 1、创建一个layout文件，放置一个router-view标签即可，每一个路由请求默认都是从这里进去跳转，这里是示例每个页面都带一个面包屑组件 （一般是app.vue，这里我自定义了一个） //layout文件 <template>
vue2.0 - layout组件（三）Layout页面布局
sqLeiQ的博客
06-16 4216
vue-Layout
Vue-Layout（可视化布局）
郭宝的博客
08-15 1万+
什么是Vue-Layout ？ 怎么使用Vue-Layout ？
vue vue-element-ui组件 layout布局系列学习
m0_70752874的博客
01-04 1223
大家好，又见面了，我是你们的朋友全栈君。
Vue2.0教程 （十一）layout组件
燃燃的大尾巴
07-26 5383
vue脚手架
vue3layout布局
10-09
3. 使用Vue Router进行页面布局：Vue Router是Vue.js的官方路由库，它可以用于管理网页的不同页面。你可以定义多个路由，并将其与不同的组件关联起来。通过配置路由表，你可以实现不同页面之间的切换和布局。这种...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值