<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> <h1>{{data.name}}</h1> <img src="../static/img/sea.jpg" alt="" /> </div> </body> </html> <script src="https://cdn.jsdelivr.net/npm/vue@3.0.11/dist/vue.global.prod.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script> <script> const { createApp, reactive, getCurrentInstance } = Vue; const app = createApp({ setup() { const data = reactive({ name: "aa", }); getInformation(); //方法1 function getInformation() { //方法的实现 data.name = "引入的html文件"; } // 方法2 const handleClick = (val) => { //方法的实现 }; return { data, handleClick, }; }, }); app.mount("#app"); </script>
Vue3项目中引入html页面
2023-11-09
337
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
Vue3项目中引入html页面
目录
相关文章
|
2月前
|
数据采集
监控
JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具，正确配置和运行预渲染操作，结合其他 SEO 策略，可以实现更好的搜索引擎优化效果。同时，需要不断地监控和优化预渲染效果，以适应不断变化的搜索引擎环境和用户需求。
161
63
63
|
2月前
|
JavaScript
前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
232
26
26
|
2月前
|
前端开发
测试技术
定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现，强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
72
7
7
|
2月前
|
2月前
|
2月前
|
JavaScript
前端开发
Java
|
2月前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念，掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索，你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
51
2
2
|
2月前
|
JavaScript
测试技术
UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素，通过仔细分析、排查和优化，逐步提高 Tree shaking 的效果，为项目带来更好的性能和用户体验。同时，持续关注和学习相关技术的发展，不断探索新的解决方案，以适应不断变化的项目需求。
61
1
1
|
2月前
|
JavaScript
前端开发
Java
|
2月前
|
前端开发
热门文章
最新文章
1
Python 爬虫必备杀器，xpath 解析 HTML
2
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
3
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
4
HTML（HyperText Markup Language，超文本标记语言）
5
太便利了 ！通义灵码方便生成html页面
6
HTML5 新的 Input 类型2
7
HTML（HyperText Markup Language）和XML（Extensible Markup Language）
8
HTML5 元素2
9
高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
10
HTML与CSS在Web组件化中的核心作用及前端技术趋势
1
使用Vue.js构建交互式前端的技术探索
96
2
ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
176
3
vue2升级到vue3的一些使用注意事项记录(四）
142
4
ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
159
5
ruoyi-nbcio-plus基于vue3的flowable多租户机制
212
6
ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
123
7
vue3中使用动态组件
117
8
Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
150
9
ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
80
10
ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
129