SpringBoot使用thymeleaf+vue
SpringBoot使用thymeleaf+vue说点废话吧,又不知道说啥。进入猪蹄;项目开发中遇到了几个问题说点废话吧,又不知道说啥。进入猪蹄;1.项目开发时遇到单点登录的功能要求在SpringBoot框架中使用vue,因为vue 是支持script引入;2. 所以首先想到的是 直接引入相应资源了我们可以看到上图中引入css时 使用的语法为:th:href="@{xxxxxx}",这是thyme
·
SpringBoot使用thymeleaf+vue
说点废话吧,又不知道说啥。进入猪蹄;
1.项目开发时遇到单点登录的功能要求在SpringBoot框架中使用vue,因为vue 是支持script引入;
2. 所以首先想到的是 直接引入相应资源了
- 我们可以看到上图中引入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
更多推荐
已为社区贡献4条内容
所有评论(0)