theamleaf+es6+vue+vux+webpack之theamleaf模板装饰

最新推荐文章于 2024-07-30 14:14:07 发布
最新推荐文章于 2024-07-30 14:14:07 发布
阅读量1.8k 收藏
点赞数
分类专栏： theamleaf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013261261/article/details/78403042
版权

theamleaf 模板装饰器


index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" layout:decorator="layout/main">
<head>
    <title>首页</title>

</head>
<body>
<div layout:fragment="content">
   首页维护中
</div>
</body>
</html>
注解：index.html 用main.html布局装饰

main.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">数据中心</title>
    <link rel="stylesheet" href="../css/iconfont/iconfont.css" data-th-href="@{/css/iconfont/iconfont.css}"/>
    <link href="../css/reset.css" rel="stylesheet" data-th-href="@{/css/reset.css}" />
    <link href="../css/global.css" rel="stylesheet" data-th-href="@{/css/global.css}" />
    <link href="../css/theme/theme-3.css" rel="stylesheet" data-th-href="@{/css/theme/theme-3.css}"/>
    <link href="../css/jquery.bxslider.css" rel="stylesheet" data-th-href="@{/css/jquery.bxslider.css}"/>
    <script type="text/javascript" src="../../static/js/libs/jquery.js" data-th-src="@{/js/libs/jquery-3.0.0.min.js}"></script>
    <script type="text/javascript" src="../../static/js/libs/jquery.bxslider.js" data-th-src="@{/js/libs/jquery.bxslider.js}"></script>
</head>
<body>
<header class="header" data-th-include="fragment/header::header"></header>

<article class="main">
    <main class="center-panel" layout:fragment="content">

    </main>
</article>
<footer class="foot" data-th-include="fragment/footer::footer">

</footer>
<script type="text/javascript" src="../../static/js/thymeleaf/index.js" data-th-src="@{/js/thymeleaf/index.js}"></script>
</body>
</html>
其中， 

 <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">数据中心</title>

页面title会结合index与mian的title 

 <main class="center-panel" layout:fragment="content">

    </main>
main.html中的content部分会被index.html中被定义layout:fragement替换掉


指令：

layout:decorator="layout/main"
装饰器：用layout下面的main.html装饰此页面 

layout:fragment="content"

要替换的内容区域

***

其他部分的内容合并

（注意，合并并不是有则覆盖原则，只会重复添加引用）

酥麻喇蛊
关注
专栏目录
Vue+Vant+ES6+Node.js+Koa+MongoDB
...
12-09 618
项目代码：https://github.com/xiecheng328/shop.git npmjs包管理：https://www.npmjs.com/ 1.安装node http://nodejs.cn/ 查看版本 ： node -v 安装vue-cli : npm install -g @vue/cli 查看版本 : vue -V 创建项目：vue create shop 或 vue...
Laravel5.5 + Vue2.0 + Element UI (iView) + VUX 的搭建
迈向前端攻城狮的路上
07-17 1974
构建所需： composer (请调成中国镜像) Node.js (请安装稳定版) npm (最新版node已集成npm，无需另外安装) 淘宝镜像： npm install -g cnpm --registry=https://registry.npm.taobao.org 1、下载Laravel 选择 Laravel 版本时，应该...
my-vue-home-design:商店的Vue页面设计
04-07
可视化页面装修 基于 vue + ant-design + vue-draggable 实现的可视化页面装修功能 操作指引： 左侧组件区域拖拽至中间布局区域 中间区域的组件支持上下拖拽排序，删除组件 点击中间区域的组件，右侧会打开组件支持的配置项 右侧楼层管理支持组件的排序、复制、删除、定位等 目前支持组件列表 安装 $ npm install 启动 命令行执行：npm run dev 浏览器打开链接： 代码目录 ├── README.md ├── package.json ├── src │   ├── html │   ├── interface // 接口 │   │   ├── core.js │   │   ├── index.js │   │   ├── json-data │   │   │   ├── design_get_page_info.json │   │   │ 
springboot thymeleaf + vue
llll20000的专栏
12-19 6390
Dependency<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> <version>1.5.4.RELEASE</version> </dependency><dependency> <groupId>o
vue&ant-design-vue页面DIY,商城个性化设计,H5装修
最新发布
weixin_45374947的博客
07-30 242
如下图所示，PC端（编辑端）分为三个部分左侧基础组件栏、中部主体展示区域、右侧操作菜单栏。所用技术：Vue + and-design-vue + vuedraggable。通过简单的拖拽可以实现对页面的编辑，可以自定义组件的样式、内容，展示顺序等。
vue3商城页面装修
m0_59203969的博客
01-02 1009
vue3商城页面装修
vue3.x+elementPlus+swiper+vuedraggable实现页面装修
lemon_宁萌
06-26 1965
在components下新建文件夹，将所有组件相关代码都放在此文件夹下，每个组件是一个文件夹，每个文件夹下包含index.vue、operatin.vue 文件一个是组件展示在中间区域，一个是设置配置文件，再在主文件夹下新建index.js 引入并注册所需的组件，并在main.js 文件中引入，使用。截图示例：main.js引入定义组件集合文件-designData.js 其中定义的数据展示在左侧区域引入相关文件并赋值对应参数（leftMenuList）
vue-page-design:实现装修页面组件拖拽（vue）
05-03
可视化页面装修 基于 vue + ant-design + vue-draggable 实现的可视化页面装修功能 目录 自由拖拽组件 支持[PC/M]端布局（PC模式后续支持） 支持实时预览，所见即所得 支持组件嵌套（后续支持） 目前支持组件列表 安装 $ npm install 使用 # develop mode $ npm run dev 自定义组件配置项 参考组件 U000001： 目录 作用 ./U000001/m/form/index.js 配置当前组件的所有字段，以及注册所有模版 ./U000001/m/form/template1.js 模版一的展示字段 ./U000001/m/form/template2.js 模版二的展示字段 index.js /** 数据类型的配置 */ const datas = { field1, field2, field
基于vue+vux+webpack+es6+vue-router,简单的基本用法.zip
02-15
【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 ... 【项目质量】： 所有源码都经过严格测试，...
快速解决vue-cli在ie9+中无效的问题
10-18
在当今前端开发领域，Vue.js已经成为非常流行的JavaScript框架之一，它帮助开发者以一种更加高效和结构化的方式来构建用户界面。vue-cli是Vue.js官方提供的一个完整开发脚手架，极大地简化了使用Vue.js进行项目开发...
VueSpaTemplate一个干净的Vue单页应用模板
08-10
VueSpaTemplate是一个专为Vue.js开发者设计的单页应用（SPA）模板，它提供了一个干净、整洁的基础架构，使得开发者能够快速启动他们的Vue项目。这个模板已经预先封装了API接口，同时也对项目的结构目录进行了合理...
Vue-custom-decoration:Vue 可视化编辑 装修程序界面 生成JSON格式代码
05-14
my-project 声明在前面,这是模仿有赞商城的自定义装修,只实现了部分小功能,并不完善,提供一个思路. 项目估计已经跑不起来了，如有需要可自行使用vue-cli创建新项目，然后导入src内部得内容，再相应得安装依赖包即可 Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report For a detailed explanation on how things work, c
建筑装修类移动端官网VueCli3源码
03-27
建筑装修类Vue前端源码，干净整洁，内用axios,VantUI，更换后台接口即可，注释完整，方便更改样式及二次开发。更换数据可编程通用模板，使用所有行业。(下载后 npm install 就可运行) 成品案例 http://39.96.5.166
店铺装修
03-03
蚂蚁设计专业版 该项目已使用初始化。 遵循是如何使用的快速指南。 环境准备 安装node_modules ： npm install 或者 yarn 提供的脚本 Ant Design Pro提供了一些有用的脚本，可帮助您快速启动和构建Web项目，代码样式检查和测试。 package.json提供的脚本。 修改或添加其他脚本是安全的： 开始项目 npm start 建立项目 npm run build 检查代码样式 npm run lint 您还可以使用脚本自动修复某些皮棉错误： npm run lint:fix 测试码 npm test 更多的 您可以在我们的上查看完整文档。 并欢迎在我们的任何反馈。
Thymeleaf使用教程
gbz2000的博客
03-10 357
目录 Thymeleaf Thymeleaf的特点 SpringBoot与之整合 Thymeleaf常用语法 变量_变量案列 变量_动静结合 变量_ognl表达式的语法糖 变量_自定义变量 方法 方法_字面值 方法_拼接 运算 循环 逻辑判断 分支控制switch JS模板 回到顶部 Thymeleaf 　　 官网部分翻...
新建的vue项目如何布局（侧边栏，主页等）
m0_65380423的博客
03-24 2114
vue项目写导航栏
vue+ts+vue-property-decoration装饰器使用provide和inject，对app页面进行reload()
weixin_55986587的博客
09-18 767
// APP主页面提供provide <template> <div id="app"> <div class="left-menu-wrap"> <CustomMenu /> </div> <div class="content-wrap"> <!-- <router-view /> --> <router-view v-if="isR
vue 装修案例代码修改
chenggong9527的博客
07-26 383
<template> <div> <!--1借用视频video.vue代码文件--> <!--导航--> <el-breadcrumb> <el-breadcrumb-item> <router-linkto="./">首页</router-link> </el-breadcrumb-item&g...
webpack+ES6+Sass构建多页面应用实践解析
"本文将详细解析如何利用webpack、ES6和Sass来构建一个多页面应用程序。主要内容包括webpack作为模块化打包工具的优势，以及在项目中整合这些技术所涉及的插件、loader、解决的问题和最终代码结构。文章还特别提到了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值