Thymeleaf + Vue组件化开发方式

更新时间：2023年11月01日 09:47:00 作者：LauSET

这篇文章主要介绍了Thymeleaf + Vue组件化开发方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

前言

提示：thymeleaf 固然好，但是 vue 也少不了：

可能 vue 用习惯了之后大部分玩家之后使用脚手架，vuecli vite来实现快速开发，可早早地就忘记了其实还是可以搭配 springboot 的一些模版引擎来完成乱配的效果。

一、vue2

1.引入静态文件

可以先引用 vue.min.js ，这里使用了 th 完成了动态的静态资源目录

下面引入了 :

assets/js 目录下的： vue、vue-i18n、vue-router
assets/plugins/elemet 目录下的： elementui.js
assets/static 目录下的：也就是我们自己写的 main.js、i18n.js、router.js

你可以先引入 vue.min.js 和 main.js 来完成最简单的组件引用功能

<!-- ================== BEGIN vue-js ================== -->
<script th:src="|${RES}/js/vue.min.js|"></script>
<script th:src="|${RES}/js/vue-i18n.min.js|"></script>
<script th:src="|${RES}/js/vue-router.min.js|"></script>
<script th:src="|${RES}/plugins/element/elementui.js|"></script>
<script th:src="|${RES}/plugins/element/locale/zh-CN.js|"></script>
<script th:src="|${RES}/plugins/element/locale/en.js|"></script>
<script th:src="|${RES}/static/i18n.js|"></script>
<script th:src="|${RES}/static/router.js|"></script>
<script th:src="|${RES}/static/main.js|"></script>
<!-- ================== END vue-js ================== -->

样式引入：

<link th:href="|${RES}/plugins/element/elementui.css|" rel="external nofollow"  rel="stylesheet" />

第一行其实就相当于

<script src="/assets/js/vue.min.js"></script>

注意引入顺序，vue.min.js 要在最前面

2.声明组件

我们现在想要声明一个 VueHeader 组件然后在 index.html 里用，那么如何去做？

1.在一个文件夹里创建一个 header.html，这里要用到 th:fragment 标签了

给我们的 template 设置一个 id (vue-header)，然后 <script> template 里绑定，这就已经跟 .vue 文件差不多了

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="header">
<template id="vue-header">
    <div id="header" class="app-header app-header-inverse">
       Header
    </div>
</template>
<script>
    const VueHeader = {
        template: '#vue-header',
        components: {
            DtEditor,
        },
        data() {
            return {
                activeLang: ''
            }
        },
        created() {},
        methods: {
            // 切换语言
            changeLang() {
                console.log(`语言切换: ${this.activeLang}`)
                i18n.locale = this.activeLang
            },
        }
    }
</script>
</div>
</html>

2.然后在 index.html 加入以下代码

假设我上面那个 header.html 在 pages 目录下，那就写成下面这样，引入的顺序不重要了，也可放在 vue.min.js 引入之前

<template th:replace="|/pages/header|::header"></template>

<!-- ================== BEGIN vue-js ================== -->
<script th:src="|${RES}/js/vue.min.js|"></script>
...

3.然后在 main.js 里引入组件就可以了

main.js 中的 vueApp 根实例绑定的就是 index.html 中 id 为 app 的元素

// 全局方法，可以在这里注册
Vue.use(
    (_vue, _opts) => {
        _vue.prototype.$test = () => {
            console.log('test')
        }
    }
)

const vueApp = new Vue({
    el: '#app',
    i18n,
    router,
    components: {
        VueHeader
    },
    data() {
        return {
            activeLang: '', // index.html data
        }
    },
    methods: {}
})

4.最后使用

因为你刚刚是在 vueApp 根实例中引入的组件，所以加载 app div 里就可以了

<!-- BEGIN #app -->
<div id="app">
    <!-- BEGIN #header -->
    <vue-header></vue-header>
    <!-- END #header -->
</div>

二、语法搭配

使用vue方法调用th数据

如下：$t() 是 vue 国际化方法，${menu.name} 是 th 里的数据

<div class="menu-text" th:v-text="|$t('${menu.name}')|"></div>

类似的还有点击事件

<a th:@click="| changeActive('${menu.url}') |" href="javascript:;" rel="external nofollow"  class="menu-link">
	<div class="menu-text" th:v-text="|$t('${menu.name}')|"></div>
</a>

<a th:v-on:click="|openEditor(${session?.USER})|" >
	{{ $t('xxx') }}
</a>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue-cil之axios的二次封装与proxy反向代理使用说明
这篇文章主要介绍了vue-cil之axios的二次封装与proxy反向代理使用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue中使用极验验证码的方法（附demo）
这篇文章主要介绍了vue中使用极验验证码的方法（附demo）本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-12-12
前端项目中如何使用百度地图api(含实例)
当我们遇到定位展示的时候会出现使用地图展示的需求,下面这篇文章主要给大家介绍了关于前端项目中如何使用百度地图api(含实例)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-06-06
详解vue3.0 diff算法的使用(超详细)
这篇文章主要介绍了详解vue3.0 diff算法的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
详解Vue2如何监听数组的变化
这篇文章主要来和大家详细探讨一下Vue2中是如何监听数组的变化的,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-03-03
vue中关于el-popover的使用
这篇文章主要介绍了vue中关于el-popover的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vue element ui表格相同数据合并单元格效果实例
工作中遇到需要根据单元格某个属性合并,特此记录下,下面这篇文章主要给大家介绍了关于vue element ui表格相同数据合并单元格效果的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-11-11
如何在vue-cli中使用css-loader实现css module
这篇文章主要介绍了如何在vue-cli中使用css-loader实现css module，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2021-01-01
vue3简易实现proxy代理实例详解
这篇文章主要为大家详细介绍了Python实现学生成绩管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
vue3+ts import引入第三方js文件报错的2种解决方法
这篇文章主要给大家介绍了关于vue3+ts import引入第三方js文件报错的2种解决方法,在Vue中通常我们引入一个js插件都是使用npm方式下载然后import使用的,需要的朋友可以参考下
2023-08-08