HTML5结合Vue/React搭建页面结构教程

珍惜时间，勤奋学习！今天给大家带来《HTML5引入Vue/React框架搭建页面结构教程》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

需通过script标签引入CDN资源并匹配挂载点：一、Vue 3用vue.global.js，createApp挂载至#app；二、React 18需react、react-dom与babel，createRoot渲染；三、Vue 3 ESM方式用type="module"导入vue.esm-browser.js；四、Preact单文件替代React，体积更小。

如果您希望在HTML5页面中引入Vue或React等前端框架来构建页面结构，则需要通过script标签加载对应框架的CDN资源，并确保DOM元素与框架挂载点匹配。以下是具体操作步骤：

一、使用CDN引入Vue 3并初始化应用

Vue 3提供官方CDN版本，支持直接通过script标签引入，无需构建工具即可运行。该方式适用于快速原型开发或学习演示，核心是创建一个根容器元素并使用createApp进行挂载。

1、在HTML文件的

或底部添加Vue 3的全局CDN链接：https://unpkg.com/vue@3/dist/vue.global.js。

2、在

中定义一个具有id属性的容器元素，例如：

。

3、在容器下方添加

4、在容器内部使用插值语法显示数据，例如：

。

二、使用CDN引入React 18并渲染组件

React 18支持通过CDN加载ReactDOM和React核心库，利用createRoot实现根节点渲染。此方式要求同时引入两个脚本：React核心与ReactDOM，且需使用JSX语法（需配合Babel转换器或使用预编译JS）。

1、在

中按顺序引入React与ReactDOM的CDN地址：https://unpkg.com/react@18/umd/react.development.js 和 https://unpkg.com/react-dom@18/umd/react-dom.development.js。

2、在

底部添加Babel CDN以支持JSX实时转换：https://unpkg.com/@babel/standalone/babel.min.js。

3、在

中定义一个用于挂载的容器，例如：

。

4、添加

三、使用ES模块方式在HTML5中导入Vue 3组合式API

现代浏览器原生支持ES模块，可通过type="module"的script标签直接导入Vue的ESM构建版本。该方式避免全局变量污染，更贴近生产环境模块化写法。

1、在HTML中声明script标签并设置type="module"：。

2、在该script内使用import从CDN导入Vue：import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';。

3、定义一个模板字符串或使用现有DOM节点作为挂载点，例如：const app = createApp({ template: '

{{ title }}

', data() { return { title: 'Vue with ESM' }; } });。

4、执行挂载操作：app.mount('#app');。

四、引入Preact替代React以减少体积并保持兼容性

Preact是轻量级React兼容库，API几乎一致但体积更小，适合对加载性能敏感的HTML5页面。其CDN引入方式与React类似，但只需单个脚本即可完成React与ReactDOM功能整合。

1、在

或底部引入Preact官方CDN：https://esm.sh/preact@10.19.3?target=es2017 或 https://cdn.jsdelivr.net/npm/preact@10.19.3/dist/preact.min.js。

2、定义挂载容器：

。

3、在

4、调用render将虚拟节点渲染至容器：render(h('h2', null, 'Hello Preact'), document.getElementById('preact-root'));。

理论要掌握，实操不能落！以上关于《HTML5结合Vue/React搭建页面结构教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！