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

最新推荐文章于 2024-07-14 21:33:55 发布
最新推荐文章于 2024-07-14 21:33:55 发布
阅读量2.4k 收藏 4
点赞数
分类专栏： vue 文章标签： javascript typescript vue.js html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40808668/article/details/106851474
版权

开始我们需要导入我们的vue组件的路径到我们当前的js文件目录
在这里插入图片描述
然后我们需要用到一个函数render进行渲染，将定义的组件写到createElements函数中去
想要详细了解render函数的使用可以进入
如图
在这里插入图片描述

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

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

嚣张农民
关注
专栏目录
怎么将vue模板转换为html,vue中自定义html文件的模板
weixin_39925350的博客
06-01 4461
如果默认生成的 HTML 文件不适合需求，可以创建/使用自定义模板。一是通过 inject 选项，然后传递给定制的 HTML 文件。html-webpack-plugin 将会自动注入所有需要的 CSS, js, manifest 和 favicon 文件到标记中。plugins: [new HtmlWebpackPlugin({title: 'Custom template',template:...
springboot集成html-vue
rain_1470626的博客
03-27 435
springboot集成html-vue
SpringBoot+html+vue模板开发
我从不打没有准备的仗！
11-29 1127
SpringBoot+html+vue模板开发备忘录
SpringBoot + vue 管理系统
最新发布
小林的博客
07-14 1770
SpringBoot + vue 管理系统步骤： 生成的pom.xml文件 创建项目工程目录结构配置文件application.yml 设置统一返回数据 构建一个vue项目功能模块分为六部分：班级管理、学员管理、部门管理、员工管理、员工信息统计、学员信息统计开发的部门管理功能包含： 3.1.2、后端代码实现 service接口 serviceImpl 3.2、员工管理 我们可以把员工管理功能分为： 3.2.2、后端代码实现 mapper.xml 因为需要涉及到oss文件上传所
vue中 把vue页面导出为 html页面
weixin_44168929的博客
12-14 3729
我司要求我把数据融合起来，导出用html的方式展示
Vue3 组件转为HTML DOM节点
黄彪博客
07-05 3221
工作中，开发地图的时候，其中一个API需要添加HTML代码，考虑到HTML代码很多，如果去拼接HTML字符串很麻烦，而且很容易出错，另外，在给HTML添加事件的时候，很容易绑定到全局中，这样污染了全局，而且也不符合Vue组件开发的思想。解决思路：希望像Vue2那样可以直接创建一个Vue组件实例，然后获取Vue组件实例的DOM，添加到组件中。问题: Vue3 没有Vue.extend() 方法，因此Vue2 的写法不能适用。
Spring Boot + Vue3 完整开发全栈项目附资料.zip
06-24
3. Axios集成：Vue3项目中，使用Axios库进行Ajax请求，与Spring Boot后端进行通信。 四、Spring Boot核心组件 1. 数据访问：使用Spring Data JPA或MyBatis等ORM框架，连接数据库，处理CRUD操作。 2. 模板引擎：...
基于 Spring Boot 3Spring Security 6Vue.js 3 的前后端分离式论坛系统
04-03
在这个论坛系统中，前端Vue.js 3 通过API与后端Spring Boot 3 进行通信，实现了数据的获取和提交，提高了系统的可扩展性和灵活性。 **项目结构** 在压缩包内，`flip_master.zip` 可能包含了论坛系统的源码，包含...
Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)
10-19
在本项目中，我们结合了Spring Boot、MyBatis、Vue.js和ElementUI来构建一个功能完备的数据管理应用，实现了基本的数据增删改查功能。首先，我们需要了解这些技术的核心特性以及它们如何协同工作。 Spring Boot是...
Spring Boot 与 Vue.js 整合流程
10-17
在本文中，我们将深入探讨如何将流行的Java后端框架Spring Boot与前端JavaScript框架Vue.js进行整合，实现一个完整的前后端分离的应用。首先，我们需要了解这两个框架的基本概念和版本。 Spring Boot是基于Spring...
别墅装饰公司企业网站html静态模板_vue 生成静态html
12-04
别墅装饰公司企业网站html静态模板
基于 Java 17 Spring Boot 3 Spring Security 6 Vue 3 Eleme
03-22
此外，Vue 3还引入了Teleport，可以将内容渲染到页面的任意位置，以及Suspense组件，用于处理异步组件加载，提升了用户体验。 Element-Plus是基于Vue 3的UI组件库，它是Element UI的升级版，提供了丰富的前端组件，...
如何把一个完整的vue项目转成原生html模式_Vue 入门
weixin_39982017的博客
12-01 6774
Vue作者尤雨溪，英文 Evan You艺术硕士，毕业后在 Google Creative Lab工作后转为 全职 JavaScript 开发工程师主要作品 Vue、Vue Router、Vuex、@vue/cli github主页：https://github.com/yyx990803Vue.js记录片：https://www.youtube.com/watch?v=OrxmtDw4pVIVu...
springboot访问vue的html,解决Vue调用springboot接口403跨域问题_含真_前端开发者
weixin_39854923的博客
07-20 299
最近在做一个前后端分离的项目, 前端用的是前端跨域请求已解决, 那么问题就出在后端了, 找了一些资料找到了很多种方法, 这里说两个简单粗暴的.注意：“@CrossOrigin“注解要求jdk1.8及以上版本, SpringMVC 4.2及以上版本1. 在controller层上添加@Configuration注解, 如果没有效果请制定RequestMapping总的method类型在试一下.(此注...
获取vue页面内容转为html格式
热门推荐
weixin_44514665的博客
05-10 1万+
实现方法： 找到需要转换的页面 用innerHTML 转换 需要在组件标签上加上ref 属性 像这样 <Child class="testDemo" ref="child"></Child> this.$refs[child].$el.innerHTML // 或者 this.$refs.child.$el.innerHTML $el 表示的是 Vue 实例使用的根 DOM 元素。 ...
vue template标签_vue为什么要求组件模板只能有一个根元素？
weixin_39605905的博客
12-10 2297
我觉得这个问题需要从两个方面来说起：1.new Vue({el:'#app'})2.单文件组件中，template下的元素div一当我们实例化Vue的时候，填写一个el选项，来指定我们的SPA入口：let vm = new Vue({ el:'#app'})同时我们也会在body里面新增一个id为app的div 这很好理解，就是为vue开启一个入口，那我们不妨来想想，如果我在body下这样 Vue...
vue 将组件渲染成html_Vue 源码之组件渲染
weixin_34677379的博客
01-26 770
上篇讲了 new Vue 发生了哪些事情的大致流程，即如图所示，今天来分析下组件是如何渲染的基本流程。import Vue from 'vue' import App from './App.vue' var app = new Vue({ el: '#app', // 这里的 h 是 createElement 方法 render: h => h(App) })new Vue...
vue项目转化成html,vue项目转换成pdf文件（简单易懂）
weixin_35805266的博客
06-10 1046
1，添加两个模块html2canvas和jspdf(1)npminstall--savehtml2canvas(将页面html转换成图片)(2)npminstall--savejspdf(将图片生成pdf)2，创建一个htmlToPdf.js文件在指定位置.我个人习惯放在('src/components/utils/htmlToPdf.js'),内容如下import html2Canva...
springboot引入vue项目的教程
勤修方可得道成仙
10-24 1396
将 Vue 项目引入到 Spring Boot 中有多种方法，其中一种方法是使用 Spring Boot 的静态文件服务。你可以将 Vue 项目的静态文件（html、js、css）复制到 Spring Boot 的静态文件目录下（默认路径为 /src/main/resources/static）。这样，你就可以在 Spring Boot 中直接访问 Vue 项目的静态文件了。你可以将 Vue 项目作为独立的模块引入到 Spring Boot 中，然后使用 DevTools 来调试和运行两个模块。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

嚣张农民

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值