SpringBoot使用thymeleaf+vue

SpringBoot使用thymeleaf+vue说点废话吧，又不知道说啥。进入猪蹄;项目开发中遇到了几个问题说点废话吧，又不知道说啥。进入猪蹄;1.项目开发时遇到单点登录的功能要求在SpringBoot框架中使用vue,因为vue 是支持script引入；2. 所以首先想到的是直接引入相应资源了我们可以看到上图中引入css时使用的语法为：th:href="@{xxxxxx}"，这是thyme

簸箕0606

4598人浏览 · 2022-02-14 19:18:23

簸箕0606 · 2022-02-14 19:18:23 发布

SpringBoot使用thymeleaf+vue

- - - 说点废话吧，又不知道说啥。进入猪蹄;
    - 项目开发中遇到了几个问题

说点废话吧，又不知道说啥。进入猪蹄;

1.项目开发时遇到单点登录的功能要求在SpringBoot框架中使用vue,因为vue 是支持script引入；
2. 所以首先想到的是直接引入相应资源了
css 引入方式

我们可以看到上图中引入css时使用的语法为：th:href="@{xxxxxx}"，这是thymeleaf 语法；

上图片中有引入cdn资源的方式也有把资源放在本地，引入的方式，都可以。

项目开发中遇到了几个问题

在子组件中使用this.$ emit 无效，如下图注释掉的代码;
原因：自定义事件名称不同于组件和 prop，事件名不存在任何自动化的大小写转换。触发的事件名需要完全匹配监听这个事件所用的名称才有效；然而v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:sendCode 将会变成 v-on:sendcode——导致 sendCode 不可能被监听到。
所以建议始终使用 kebab-case 的事件名；

	//child component
	//把事件名称改成kebab-case 形式；
	this.$emit("send-code", codeString)

	//parent component 
	<Code v-on:send-code="handleSendCode"/>

也可以采用this.$root.method 的方式（不建议）；如下图：
在这里插入图片描述
以上通过父级找方法的方式有很大弊端：如果组件嵌套层级多，就要parent.parent ……的方式去找到绑定事件的节点.

引入的字体库无效；解决方式如下：
错误是：Failed to decode downloaded font
- 在pom文件下的标签中加入如下代码；

<resources>
			<resource>
				<directory>src/main/resources</directory>
				<filtering>true</filtering>
				<excludes>
					<exclude>static/**/*.woff</exclude>
					<exclude>static/**/*.woff2</exclude>
					<exclude>static/**/*.ttf</exclude>
				</excludes>
			</resource>
			<resource>
				<directory>src/main/resources</directory>
				<filtering>false</filtering>
				<includes>
					<include>static/**/*.woff</include>
					<include>static/**/*.woff2</include>
					<include>static/**/*.ttf</include>
				</includes>
			</resource>
		</resources>

. 把相应的fonts 文件和element-ui.css 文件放在同一级
在这里插入图片描述
使用vue 时相关资源如何引入的解决办法，相关链接如下：
相关链接1
相关链接2
相关链接3
相关链接4
引入字体库出错的解决办法还有其他办法，相关链接如下：
相关链接1
相关链接2