需通过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'));。
