springMVC项目如何整合thymeleaf和element-ui
时间: 2023-10-20 14:26:37 浏览: 411
整合Thymeleaf和Element-UI,需要在SpringMVC项目中配置Thymeleaf模板引擎和Element-UI前端框架。
首先,在Spring MVC项目中引入Thymeleaf和Element-UI的依赖。可以在pom.xml文件中添加以下依赖:
```xml
<dependencies>
<!-- Thymeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- Element-UI -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator-core</artifactId>
<version>0.40</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>element-ui</artifactId>
<version>2.10.1</version>
</dependency>
</dependencies>
```
然后,在Spring MVC配置文件中配置Thymeleaf模板引擎。可以在application.properties或application.yml文件中添加以下配置:
```properties
# Thymeleaf
spring.thymeleaf.mode=HTML
spring.thymeleaf.cache=false
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html;charset=UTF-8
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.template-resolver-order=1
spring.thymeleaf.view-names=*
spring.thymeleaf.check-template-location=true
```
最后,在Thymeleaf模板中使用Element-UI的组件。可以在HTML文件中添加以下代码:
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:t="http://www.thymeleaf.org/extras/thymeleaf-spring4"
xmlns:el="http://www.thymeleaf.org/extras/element-ui"
lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Element-UI -->
<link rel="stylesheet" href="/webjars/element-ui/2.10.1/theme-chalk/index.css">
<script src="/webjars/element-ui/2.10.1/index.js"></script>
</head>
<body>
<!-- 使用Element-UI的组件 -->
<el-button>Button</el-button>
</body>
</html>
```
以上就是整合Thymeleaf和Element-UI的步骤,希望能对你有所帮助!
阅读全文
相关推荐









