AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

在spring_boot项目中如何将vue组件引入到.html页面进行使用

2023-08-28 285
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 在spring_boot项目中如何将vue组件引入到.html页面进行使用

开始我们需要导入我们的vue组件的路径到我们当前的js文件目录

然后我们需要用到一个函数render进行渲染，将定义的组件写到createElements函数中去

想要详细了解render函数的使用可以进入

如图

  • 在这里我刁侃下我当时是想要通过components函数去添加组件到.html页面去但是失败了，所以才使用了render函数
    接着我们需要在.html文件进行引入我们.js文件
<script src="./webapp/static/dist/custom.js"></script>

我再body标签直接写<div id="app"></div>就显示出来了,大功告成

文章标签：
JavaScript
关键词：
Spring boot vue
Spring项目
Spring组件
项目HTML
VUE.js项目
嚣张农民
目录
相关文章
盹猫
|
5月前
|
Java 关系型数据库 数据库连接
Spring Boot项目集成MyBatis Plus操作PostgreSQL全解析
集成 Spring Boot、PostgreSQL 和 MyBatis Plus 的步骤与 MyBatis 类似，只不过在 MyBatis Plus 中提供了更多的便利功能，如自动生成 SQL、分页查询、Wrapper 查询等。
盹猫
460 3
TiAmoZhang
|
5月前
|
Java 测试技术 Spring
简单学Spring Boot | 博客项目的测试
本内容介绍了基于Spring Boot的博客项目测试实践，重点在于通过测试驱动开发（TDD）优化服务层代码，提升代码质量和功能可靠性。案例详细展示了如何为PostService类编写测试用例、运行测试并根据反馈优化功能代码，包括两次优化过程。通过TDD流程，确保每项功能经过严格验证，增强代码可维护性与系统稳定性。
TiAmoZhang
245 0
TiAmoZhang
|
5月前
|
存储 Java 数据库连接
简单学Spring Boot | 博客项目的三层架构重构
本案例通过采用三层架构（数据访问层、业务逻辑层、表现层）重构项目，解决了集中式开发导致的代码臃肿问题。各层职责清晰，结合依赖注入实现解耦，提升了系统的可维护性、可测试性和可扩展性，为后续接入真实数据库奠定基础。
TiAmoZhang
436 0
啦啦啦191
|
5月前
|
前端开发 Java API
酒店管理系统基于 JavaFX Spring Boot 和 React 经典项目重构实操
本文介绍了基于现代技术栈的酒店管理系统开发方案，整合了JavaFX、Spring Boot和React三大技术框架。系统采用前后端分离架构，JavaFX构建桌面客户端，React开发Web管理界面，Spring Boot提供RESTful API后端服务。核心功能模块包括客房管理和客户预订流程，文中提供了JavaFX实现的客房管理界面代码示例和React开发的预订组件代码，展示了如何实现客房信息展示、添加修改操作以及在线预订功能。
啦啦啦191
320 1
糊涂糊涂123
|
5月前
|
Java 应用服务中间件 Maven
第01课：Spring Boot开发环境搭建和项目启动
第01课：Spring Boot开发环境搭建和项目启动
糊涂糊涂123
729 0
疯狂的猿
|
8月前
简约404错误页面HTML源码
简约404错误页面HTML源码
疯狂的猿
318 12
科技小能手
|
移动开发 JavaScript 前端开发
使用Visual Studio 2010开发和调试Html5项目
科技小能手
1373 0
游客vx6uejvd6s6ck
|
6月前
|
移动开发 前端开发 JavaScript
征信报告修改器，征信报告生成器，制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具，采用HTML5实现，仅供学习参考。核心功能通过JavaScript构建，包含虚拟数据生成、权重分配及信用因素分析（如还款记录、信用使用率等）。
游客vx6uejvd6s6ck
1700 4
游客vx6uejvd6s6ck
|
6月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器，模拟对话制作工具，html+js+css
这是一款纯前端实现的多平台虚拟评论生成器，支持抖音、快手、小红书风格，适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局，利用IndexedDB存储数据，CSS Variables切换主题。
游客vx6uejvd6s6ck
1006 2

热门文章

最新文章

  • 1
    SpringBoot+kafka+ELK分布式日志收集
  • 2
    Maven——创建 Spring Boot项目
  • 3
    spring cloud gateway网关限流
  • 4
    spring boot 整合MyBatis Generator自动生成动态sql代码
  • 5
    springboot集成swagger knife4j 最详细的步骤 手把手教你继承swagger
  • 6
    spring2中基于注释的配置方式浅析
  • 7
    SpringBoot接入轻量级分布式日志框架GrayLog技术分享
  • 8
    【小家Spring】Spring MVC控制器中Handler的四种实现方式：Controller、HttpRequestHandler、Servlet、@RequestMapping(下)
  • 9
    Spring Authorization Server 快速入门
  • 10
    谁才是微服务赢家：Quarkus 与 Spring Boot
  • 1
    Vue 3性能优化
    248
  • 2
    vue中的keep-alive问题（2）
    303
  • 3
    Vue 3
    529
  • 4
    vue3使用ts传参教程
    282
  • 5
    基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
    406
  • 6
    Vue中如何实现兄弟组件之间的通信
    327
  • 7
    虚拟列表在Vue3中的具体应用场景有哪些？
    463
  • 8
    除了循环引用，Vue3还有哪些常见的性能优化技巧？
    272
  • 9
    在 Vue 中，如何在回调函数中正确使用 this？
    273
  • 10
    vue3循环引用自已实现
    143

    • 相关课程

    更多
  • Java Web开发系列课程 - Spring框架入门
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • Spring Boot 2.5.x开发实战
  • Spring Cloud微服务架构设计与开发实战

    • 相关电子书

    更多
  • 云栖社区特邀专家徐雷Java Spring Boot开发实战系列课程（第20讲）：经典面试题与阿里等名企内部招聘求职面试技巧
  • 微服务架构模式与原理Spring Cloud开发实战
  • 阿里特邀专家徐雷Java Spring Boot开发实战系列课程（第18讲）：制作Java Docker镜像与推送到DockerHub和阿里云Docker仓库
    • 下一篇
    对象存储OSS快速上手——如何使用ossbrower2