完全可行，是快速验证和原型开发最直接的方式；Vue官方提供开发版和生产版CDN，纯HTML+CDN场景应选vue.global.js，需注意DOM加载时机及仅支持选项式API或手动调用Composition API函数。
直接在 index.html 里用 <script> 引入 Vue CDN 是否可行？
完全可行，而且是快速验证、原型开发最直接的方式。Vue 官方提供了生产环境和开发环境两个 CDN 地址，区别主要在错误提示和性能提示上：https://unpkg.com/vue@3/dist/vue.global.js（开发版，带警告和调试信息）和 https://unpkg.com/vue@3/dist/vue.global.prod.js（生产版，无警告、体积更小）。开发阶段建议用前者，能及时看到响应式失效、模板语法错误等提示。
vue.global.js 和 vue.esm-browser.js 该选哪个？
对纯 HTML + CDN 场景，只认 vue.global.js。它把 Vue 挂在全局 window.Vue 上，你才能用 Vue.createApp()；而 vue.esm-browser.js 是为原生 ES 模块环境设计的（比如配合 type="module"），在普通 <script> 中直接引入会报 ReferenceError: require is not defined 或模块解析失败。除非你明确写 <script type="module"> 并用 import，否则别碰后者。
引入后怎么写第一个 Vue 应用？注意 DOM 加载时机
常见错误是脚本执行时 <div id="app"> 还没解析完，导致 createApp 找不到挂载点。解决方式有三种：
- 把
<script>放在</body>前（推荐） - 用
document.addEventListener('DOMContentLoaded', ...)包裹初始化逻辑 - 加
defer属性：<script src="..." defer></script>
一个最小可运行示例：
立即学习“前端免费学习笔记（深入）”；
<div id="app">{{ message }}</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue
createApp({
data() {
return { message: 'Hello from CDN!' }
}
}).mount('#app')
</script>
CDN 方式下如何使用 Composition API 和单文件组件风格？
不能直接写 <template> 或 <script setup> —— 那些只在构建工具（如 Vite/Vue CLI）中生效。CDN 下必须用「选项式 API」或手动调用 defineComponent + ref/reactive 等函数。例如用 Composition API 写法：
<script>
const { createApp, ref, onMounted } = Vue
createApp({
setup() {
const count = ref(0)
onMounted(() => console.log('mounted'))
return { count }
}
}).mount('#app')
</script>
注意：所有 Composition API 函数（ref、computed、onMounted 等）都必须从 Vue 解构，不能直接调用；且 setup() 返回的对象属性才会被模板访问到。
真正容易被忽略的是：CDN 引入不提供编译器（vue/compiler-dom），所以你不能在 JS 里写字符串模板（比如 template: '<div>{{x}}</div>'），只能依赖页面中已存在的 DOM 结构作为模板 —— 这也是为什么 mount 目标必须是真实 HTML 元素。
