Thymeleaf?+?Vue組件化開(kāi)發(fā)方式
前言
提示：thymeleaf 固然好，但是 vue 也少不了：
可能 vue 用習(xí)慣了之后大部分玩家之后使用腳手架，vuecli vite來(lái)實(shí)現(xiàn)快速開(kāi)發(fā)，可早早地就忘記了其實(shí)還是可以搭配 springboot 的一些模版引擎來(lái)完成亂配的效果。
一、vue2
1.引入靜態(tài)文件
可以先引用 vue.min.js ，這里使用了 th 完成了動(dòng)態(tài)的 靜態(tài)資源目錄
下面引入了 :
assets/js目錄下的： vue、vue-i18n、vue-routerassets/plugins/elemet目錄下的： elementui.jsassets/static目錄下的： 也就是我們自己寫的 main.js、i18n.js、router.js
你可以先引入 vue.min.js 和 main.js 來(lái)完成最簡(jiǎn)單的組件引用功能
<!-- ================== 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" />第一行其實(shí)就相當(dāng)于
<script src="/assets/js/vue.min.js"></script>
注意引入順序，vue.min.js 要在最前面
2.聲明組件
我們現(xiàn)在想要聲明一個(gè) VueHeader 組件然后在 index.html 里用，那么如何去做？
1.在一個(gè)文件夾里創(chuàng)建一個(gè) header.html，這里要用到 th:fragment 標(biāo)簽了
給我們的 template 設(shè)置一個(gè) id (vue-header)，然后 <script> template 里綁定，這就已經(jīng)跟 .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: {
// 切換語(yǔ)言
changeLang() {
console.log(`語(yǔ)言切換: ${this.activeLang}`)
i18n.locale = this.activeLang
},
}
}
</script>
</div>
</html>
2.然后在 index.html 加入以下代碼
假設(shè)我上面那個(gè) 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 根實(shí)例綁定的就是 index.html 中 id 為 app 的元素
// 全局方法，可以在這里注冊(cè)
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.最后使用
因?yàn)槟銊倓偸窃?vueApp 根實(shí)例中引入的組件，所以加載 app div 里就可以了
<!-- BEGIN #app -->
<div id="app">
<!-- BEGIN #header -->
<vue-header></vue-header>
<!-- END #header -->
</div>
二、語(yǔ)法搭配
使用vue方法調(diào)用th數(shù)據(jù)
如下：$t() 是 vue 國(guó)際化方法，${menu.name} 是 th 里的數(shù)據(jù)
<div class="menu-text" th:v-text="|$t('${menu.name}')|"></div>
類似的還有點(diǎn)擊事件
<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>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3項(xiàng)目中配置TypeScript和JavaScript的兼容
在Vue3開(kāi)發(fā)中,常見(jiàn)的使用JavaScript（JS）編寫代碼,但也會(huì)有調(diào)整編寫語(yǔ)言使用TypeScript（TS）的需求,因此,在Vue3項(xiàng)目設(shè)置中兼容TS和JS是刻不容緩的重要任務(wù),2023-08-08
在vue+element ui框架里實(shí)現(xiàn)lodash的debounce防抖
今天小編就為大家分享一篇在vue+element ui框架里實(shí)現(xiàn)lodash的debounce防抖，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue出現(xiàn)彈出層時(shí)禁止底部頁(yè)面跟隨滑動(dòng)
本文主要介紹了Vue出現(xiàn)彈出層時(shí)禁止底部頁(yè)面跟隨滑動(dòng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vue實(shí)現(xiàn)動(dòng)態(tài)列表點(diǎn)擊各行換色的方法
今天小編就為大家分享一篇vue實(shí)現(xiàn)動(dòng)態(tài)列表點(diǎn)擊各行換色的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue element 表頭添加斜線的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue element 表頭添加斜線的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-11-11
vscode jsconfig.json 使用簡(jiǎn)介
通過(guò)jsconfig.json文件定義一個(gè)JavaScript項(xiàng)目,目錄中是否存在此類文件表示該目錄是JavaScript項(xiàng)目的根目錄,文件本身可以選擇列出屬于項(xiàng)目的文件,要從項(xiàng)目中排除的文件以及編譯器選項(xiàng),這篇文章主要介紹了vscode jsconfig.json 使用說(shuō)明,需要的朋友可以參考下2023-09-09
如何在Vue項(xiàng)目中應(yīng)用TypeScript類
與如何在React項(xiàng)目中應(yīng)用TypeScript類類似在VUE項(xiàng)目中應(yīng)用typescript，我們需要引入一個(gè)庫(kù)vue-property-decorator，需要的小伙伴可續(xù)看下文具體介紹2021-09-09
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用scss的詳細(xì)方法步驟,scss是一種css預(yù)處理語(yǔ)言,定義了一種新的專門的編程語(yǔ)言,編譯后形成正常的css文件,為css增加一些編程特性,無(wú)需考慮瀏覽器的兼容性,讓css更加簡(jiǎn)潔、適應(yīng)性更強(qiáng),可讀性更佳,需要的朋友可以參考下2023-11-11
Vue2項(xiàng)目中對(duì)百度地圖的封裝使用詳解
近期項(xiàng)目需求相關(guān)地圖限定使用百度地圖,功能比較簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于Vue2項(xiàng)目中對(duì)百度地圖的封裝使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
Vue學(xué)習(xí)筆記進(jìn)階篇之函數(shù)化組件解析
本篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之函數(shù)化組件探究，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07