Vue搭配Thymeleaf完成组件化开发
前言
提示：thymeleaf 固然好，但是 vue 也少不了：
一、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
<!-- ================== 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="stylesheet" />
第一行其实就相当于 <script src="/assets/js/vue.min.js"></script>
注意引入顺序，vue.min.js 要在最前面
2.声明组件
我们现在想要声明一个 VueHeader 组件然后在 index.html 里用，那么如何去做？
在一个文件夹里创建一个 header.html，这里要用到 th:fragment 标签了
<!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
},
}
} 然后在 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>
...
然后在 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: {}
}) 最后使用因为你刚刚是在 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:;" 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> 推荐阅读
🎈🎈🎈 小码哥公众号：码出宇宙，纯技术干货分享,为圆梦大厂助力。( 最近更新IDEA的全版本激活码,再也不用担心IDEA编不码而烦恼而烦恼)
投递蔚来等公司10个岗位 >