在html5页面开发中，通过script标签直接引入Vue、React等框架是最便捷的入门方式，不需要配置复杂的构建工具，就能快速搭建具备交互能力的页面结构。这种方式适合新手学习框架基础语法，也适合快速验证简单功能场景。
引入前的准备工作
首先需要一个基础的html5页面结构，确保文档声明为<!DOCTYPE html>，并且设置好正确的字符编码，避免中文乱码问题。基础的html5页面结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html5引入框架示例</title>
</head>
<body>
</body>
</html>
通过script引入Vue框架
Vue官方提供了可以直接通过script引入的CDN链接，引入后会在全局暴露Vue构造函数，后续可以直接使用Vue的能力搭建页面。
引入Vue的script标签
在html5页面的<head>或者<body>结束标签前添加如下script标签，引入Vue的生产版本：
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
搭建Vue页面结构示例
引入Vue后，在body中添加一个挂载点元素，然后编写Vue的初始化代码，实现简单的数据绑定和事件交互：
<body>
<!-- Vue挂载点 -->
<div id="app">
<h2>{{ title }}</h2>
<p>当前计数：{{ count }}</p>
<button @click="increment">点击加1</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
// 创建Vue应用实例
const app = Vue.createApp({
data() {
return {
title: 'Vue框架引入示例',
count: 0
}
},
methods: {
increment() {
this.count++
}
}
})
// 挂载到指定元素
app.mount('#app')
</script>
</body>
通过script引入React框架
React的引入需要两个核心库：react核心库和react-dom渲染库，同时还需要引入Babel来处理JSX语法，因为浏览器原生不支持JSX格式的代码。
引入React相关script标签
在body中添加如下三个script标签，分别引入react、react-dom和babel：
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
搭建React页面结构示例
React需要通过<script type="text/babel">标签来编写JSX代码，实现组件渲染和交互逻辑：
<body>
<!-- React渲染容器 -->
<div id="root"></div>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// 定义React函数组件
function Counter() {
const [count, setCount] = React.useState(0)
return (
<div>
<h2>React框架引入示例</h2>
<p>当前计数：{count}</p>
<button onClick={() => setCount(count + 1)}>点击加1</button>
</div>
)
}
// 渲染组件到容器
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<Counter />)
</script>
</body>
注意事项
- script标签的引入顺序需要注意，框架的核心库要先于业务代码引入，否则会出现未定义的错误。
- 引入的CDN链接建议指定具体版本号，避免后续版本更新导致兼容性问题，比如把vue@3改成vue@3.3.4这样的具体版本。
- 这种方式只适合开发学习和简单演示场景，正式项目建议使用构建工具配合npm管理依赖，获得更好的开发体验和性能优化。
- 如果引用的是本地框架文件，只需要把script的src属性换成本地文件的相对路径即可，引入逻辑和CDN引入完全一致。