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

最新推荐文章于 2024-07-06 20:20:43 发布
最新推荐文章于 2024-07-06 20:20:43 发布
阅读量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 4455
如果默认生成的 HTML 文件不适合需求，可以创建/使用自定义模板。一是通过 inject 选项，然后传递给定制的 HTML 文件。html-webpack-plugin 将会自动注入所有需要的 CSS, js, manifest 和 favicon 文件到标记中。plugins: [new HtmlWebpackPlugin({title: 'Custom template',template:...
js 获取vue组件html_vue页面中嵌入html vue组件中怎么引入html文件？
weixin_39949473的博客
12-19 6133
如何利用Vue.js库中的v-html指令添加html元素vue组件中怎么引入html文件？HtmlPanel.vue文件 export default{ // 使用时请使用 :url.sync=""传值 props: { url: { required: true } }, data () { return { loading: false, html: '' } }, watch: { url...
springboot集成html-vue
rain_1470626的博客
03-27 433
springboot集成html-vue
SpringBoot+html+vue模板开发
我从不打没有准备的仗！
11-29 1124
SpringBoot+html+vue模板开发备忘录
Spring Boot+Vue项目从零入手
最新发布
fzt12138的博客
07-06 1862
在搭建spring boot+vue项目前，我们首先要准备好开发环境，所需相关环境和软件如下：1、node.js检测安装成功的方法：node -v2、vue检测安装成功的方法：vue -V这个软件是编写vue代码的工具，也可以使用idea，这个视情况而定。4、jdk检测安装成功的方法：java -version和javac -version5、mysql6、idea7、navicat。
vue中 把vue页面导出为 html页面
weixin_44168929的博客
12-14 3670
我司要求我把数据融合起来，导出用html的方式展示
Vue3 组件转为HTML DOM节点
黄彪博客
07-05 3178
工作中，开发地图的时候，其中一个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 + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)
10-19
在本项目中，我们结合了Spring Boot、MyBatis、Vue.js和ElementUI来构建一个功能完备的数据管理应用，实现了基本的数据增删改查功能。首先，我们需要了解这些技术的核心特性以及它们如何协同工作。 Spring Boot是...
基于 Spring Boot 3Spring Security 6Vue.js 3 的前后端分离式论坛系统
04-03
在这个论坛系统中，前端Vue.js 3 通过API与后端Spring Boot 3 进行通信，实现了数据的获取和提交，提高了系统的可扩展性和灵活性。 **项目结构** 在压缩包内，`flip_master.zip` 可能包含了论坛系统的源码，包含...
别墅装饰公司企业网站html静态模板_vue 生成静态html
12-04
别墅装饰公司企业网站html静态模板
Spring Boot 与 Vue.js 整合流程
10-17
在本文中，我们将深入探讨如何将流行的Java后端框架Spring Boot与前端JavaScript框架Vue.js进行整合，实现一个完整的前后端分离的应用。首先，我们需要了解这两个框架的基本概念和版本。 Spring Boot是基于Spring...
基于 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 2295
我觉得这个问题需要从两个方面来说起：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 插槽的作用,用插槽slot-scope获取表格中的数据
前端程序员、项目经理、人工智能博主
12-04 5420
这里我用了elementui的表格组件去做表格,如图 我在编辑和删除的组件用template去包裹，然后在这个标签去写上slot-scope="scope" 然后在需要点击的按钮去添加一个@click事件，在方法中去写上两个参数，第一个参数是当前点击按钮获取的表格在第几行的id,第二个参数是获取表格中当前行的全部参数 如图： 我们看看打印出来的数据 现在我们是拿到了当前行的全部数据,大功告成 ...
Spring Boot与Vue.js整合全攻略：实践流程与CORS解决方案
本文主要探讨Spring Boot与Vue.js的整合实践，作者以自己的经验为基础，分享在实际项目中将这两个流行的Web开发框架结合的过程。作为一名Java开发者转向前后端分离架构，作者选择SpringBoot作为后端服务框架，Vue.js...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

嚣张农民

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

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

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

打赏作者

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

抵扣说明：

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

余额充值