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

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

2023-08-28 150
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 在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项目
HTML页面
Spring组件
Spring boot vue
Spring vue
嚣张农民
目录
相关文章
众所周知
|
25天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先，创建并配置 Spring Boot 项目，实现后端 API；然后，使用 Ant Design Pro Vue 创建前端项目，配置动态路由和菜单。通过具体案例，展示了如何快速搭建高效、易维护的项目框架。
众所周知
97 62
html的七十二变
|
14天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
36 5
html的七十二变
|
14天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中，不同组件之间传递数据和事件的方法。常用的方式有：props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
html的七十二变
24 4
mao29955
|
16天前
|
负载均衡 算法 Java
除了 Ribbon，Spring Cloud 中还有哪些负载均衡组件？
这些负载均衡组件各有特点，在不同的场景和需求下，可以根据项目的具体情况选择合适的负载均衡组件来实现高效、稳定的服务调用。
mao29955
39 5
东方睿赢
|
23天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架，实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架，实现动态路由和菜单功能。首先，确保开发环境已安装必要的工具，然后创建并配置 Spring Boot 项目，包括添加依赖和配置 Spring Security。接着，创建后端 API 和前端项目，配置动态路由和菜单。最后，运行项目并分享实践心得，帮助开发者提高开发效率和应用的可维护性。
东方睿赢
40 2
大树营养快线
|
25天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式，可以实现组件的按需加载，减少资源浪费，提高应用的响应速度和用户体验。在实际应用中，需要根据具体情况选择合适的懒加载方式，并结合性能优化的其他措施，以打造更高效、更优质的 Vue 应用。
大树营养快线
58 4
程序员皮皮林
|
25天前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目（附源码）
基于SpringBoot + Vue的医院管理系统，涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X，环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
程序员皮皮林
133 0
john散漫
|
29天前
|
JavaScript 前端开发 安全
vue -- 指令 -- v-text/html/on/show/if/bind/for/model
【10月更文挑战第17天】Vue 指令是构建 Vue 应用的基础工具，掌握它们的特性和用法是成为一名优秀 Vue 开发者的重要一步。通过深入理解和熟练运用这些指令，可以打造出更加出色的前端应用。
john散漫
13 2
东方睿赢
|
29天前
|
JavaScript 前端开发 测试技术
组件化开发：创建可重用的Vue组件
【10月更文挑战第21天】组件化开发：创建可重用的Vue组件
东方睿赢
25 1
刘大猫.
|
21天前
|
JavaScript NoSQL Java
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
刘大猫.
34 0

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    Vue报错Interpolation inside attributes has been removed.解决方法
  • 4
    自制简单的range（Vue）
  • 5
    如何在VUE中播放RTSP 实时视频，延迟要小于300毫秒？
  • 6
    VueJS && ReactJS 如何？听听别人怎么说。
  • 7
    使用webstorm来创建并且运行vue项目详细教程
  • 8
    自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）（上）
  • 9
    vue2与vue3的区别
  • 10
    Vue手写搜索防抖代码
  • 1
    【MongoDB 专栏】MongoDB 与 Spring Boot 的集成实践
    240
  • 2
    深入探索Spring Boot Web应用源码及实战应用
    95
  • 3
    ruoyi-nbcio从spring2.7.18升级springboot到3.1.7，java从java8升级到17（二）
    317
  • 4
    springboot全局自定义异常
    39
  • 5
    RabbitMQ的springboot项目集成使用-01
    143
  • 6
    什么是Spring Boot 自动配置？
    49
  • 7
    Spring cloud原理详解
    69
  • 8
    Springboot 集成Rabbitmq之延时队列
    186
  • 9
    Spring Boot 单元测试 0基础教程
    45
  • 10
    Spring框架与Spring Boot的区别和联系
    626

    • 相关课程

    更多
  • 全面讲解Spring Cloud Alibaba技术栈（知识精讲+项目实战）第二阶段
  • 精通Spring Cloud Alibaba
  • 微服务框架 Spring Cloud 快速入门
  • Java Web开发系列课程 - Spring框架入门
  • Spring Boot 2.5.x开发实战
  • Spring Cloud微服务架构设计与开发实战

    • 相关电子书

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

    • 相关实验场景

    更多
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
  • 从零搭建Spring Boot的Hello World
    • 下一篇
    无影云桌面