vue 3 cdn引入后需调用createapp()创建实例：解构vue获取createapp、ref等，setup中用ref声明响应式数据并return，再mount到选择器；不可用new vue()或vue.createapp。
直接用 <script></script> 标签引入 Vue 3 CDN
最简单的方式是通过官方推荐的 CDN 链接，在 index.html 的 或 底部加入：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>这样会在全局挂载
Vue 对象（含 createApp、ref 等），可直接在后续 <script></script> 中使用。注意：CDN 加载的是完整版（含编译器），若只用
createApp + 模板字符串或单文件组件预编译，建议换用 vue.runtime.esm-browser.js（体积更小，不带模板编译器）。
引入后怎么写第一个 Vue 实例？
CDN 引入后不能直接用 new Vue()（Vue 3 已废弃该写法），必须调用 createApp()：
<div id="app">{{ message }}</div><br><script><br> const { createApp, ref } = Vue;<br> createApp({<br> setup() {<br> const message = ref('Hello Vue!');<br> return { message };<br> }<br> }).mount('#app');<br></script>
- 必须显式解构
Vue导出的对象（如createApp、ref），不能写Vue.createApp（CDN 全局变量名是Vue，但导出是命名空间对象） -
mount()必须传入有效 CSS 选择器（如'#app'），传 DOM 节点也可，但不能漏掉 - 如果控制台报错
Uncaught ReferenceError: setup is not defined，说明你用了选项式 API 写法但没配兼容包 —— CDN 默认只支持组合式 API
为什么 vue.global.js 里找不到 Vue.component？
Vue 3 的全局 API 已大幅精简：
-
Vue.component、Vue.directive等全部移除，统一由app.component()、app.directive()在应用实例上调用 -
Vue.filter彻底废弃，需改用方法或计算属性 -
Vue.prototype不再可用，响应式逻辑必须走setup()或data()（选项式需额外加@vue/compat） - 如果你依赖旧版插件（比如某些 Vue 2 的 UI 库），直接引入
vue.global.js会报错 —— 此时要么找对应 Vue 3 版本，要么切到兼容模式（加vue.global.prod.js+runtimeCompiler: true配置，但不推荐）
本地开发要不要用 CDN？
仅限快速验证或静态演示。真实项目中：
- CDN 无法享受 IDE 类型提示、ESLint 插件、热更新等能力
- 没有 Tree-shaking，哪怕只用
ref，也会加载整个 Vue 运行时 - 生产环境受网络稳定性影响（尤其国内访问 unpkg 可能慢或失败）
- 正确做法是用
npm install vue+ 构建工具（Vite / Webpack），让模块系统管理依赖
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
