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

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

  • 我们可以看到上图中引入css时 使用的语法为:th:href="@{xxxxxx}",这是thymeleaf 语法;
    js 以及相应的组件引入方式
    上图片中有引入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 ……的方式去找到绑定事件的节点.

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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐