html5怎么使用框架_html5用script引入Vue/React等框架搭建页面结构【使用】-html教程-PHP中文网

需通过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怎么使用框架_html5用script引入vue/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、在容器下方添加<script>标签，在其中调用Vue.createApp()方法，传入配置对象，并调用.mount()指定挂载目标：<strong><font color="green">const app = Vue.createApp({ data() { return { message: 'Hello Vue!' } } }); app.mount('#app');。</script>

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

{{ message }}

。

二、使用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、添加<script type="text/babel">标签，在其中调用ReactDOM.createRoot()并传入容器，再使用render()方法注入JSX结构：<strong><font color="green">const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<h1>Hello React);。</script>

前端设计引擎

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载