SpringBoot使用thymeleaf+vue

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

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

• 我们可以看到上图中引入css时 使用的语法为：th:href="@{xxxxxx}"，这是thymeleaf 语法；
  
  上图片中有引入cdn资源的方式也有 把资源放在本地 ，引入的方式，都可以。

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

1. 在子组件中使用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 ……的方式去找到绑定事件的节点.

2. 引入的字体库 无效；解决方式如下：
   错误是：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