当前位置：首页 > 前端教程

elementui thymeleaf

2026-03-06 02:03:23前端教程

ElementUI 与 Thymeleaf 的整合方法

ElementUI 是基于 Vue.js 的 UI 框架，而 Thymeleaf 是 Java 服务器端的模板引擎。两者通常不在同一技术栈中直接使用，但可以通过以下方式实现前后端分离或混合开发。

前端使用 ElementUI

在 Vue 项目中引入 ElementUI
在 Vue CLI 创建的项目中，安装 ElementUI 并配置：

npm install element-ui -S

在 main.js 中引入：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

开发 Vue 组件
使用 ElementUI 的组件（如表格、表单等）构建前端界面，并通过 API 与后端交互。

后端使用 Thymeleaf

Spring Boot 集成 Thymeleaf
在 pom.xml 中添加依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

配置模板路径
在 application.properties 中设置 Thymeleaf 属性：

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.cache=false

渲染动态页面
创建 Controller 返回 Thymeleaf 模板：

@Controller
public class PageController {
    @GetMapping("/home")
    public String home(Model model) {
        model.addAttribute("message", "Hello Thymeleaf");
        return "home";
    }
}

前后端协作方案

完全分离模式
- 前端使用 Vue + ElementUI 独立部署，通过 REST API 与后端（Spring Boot）交互。
- 后端仅提供数据接口，不涉及页面渲染。

混合模式（Thymeleaf 嵌入 Vue）

在 Thymeleaf 模板中引入 Vue 和 ElementUI：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <el-button @click="showMessage">点击</el-button>
    </div>
    <script>
        new Vue({
            el: '#app',
            methods: {
                showMessage() {
                    this.$message.success("来自 Thymeleaf 的消息");
                }
            }
        });
    </script>
</body>
</html>