能直接在html在线运行器中使用的主流前端框架包括：vue 3（通过cdn引入vue.global.js并使用createapp）、react 18（需react+react-dom+babel-standalone三件套，jsx需type="text/babel"）、alpine.js（单标签defer引入，零配置即用）以及纯css框架如pico.css；其中alpine.js最适配在线环境，体积小、无构建依赖、自动初始化。
哪些前端框架能直接在HTML在线运行器里用
绝大多数主流前端框架都支持——前提是运行器允许外链脚本且不拦截 window 全局对象。CodePen、JSFiddle、CodeSandbox、Glitch 这类平台默认放行，但像某些极简 html 在线运行工具（仅支持内联 JS）会拒绝 script 标签加载外部资源，导致 Vue 或 React 直接报 ReferenceError: Vue is not defined。
能稳定跑通的轻量级框架包括：
-
Vue 3（CDN 引入vue.global.js，用createApp） -
React 18（需同时引入react.development.js+react-dom.development.js+babel-standalone编译 JSX） -
Alpine.js（单个script标签，defer加载即可，无构建步骤） -
Pico.css或Milligram（纯 CSS 框架，不涉及 JS，零风险）
注意：Bootstrap 5 的 JS 组件（如 Modal、Dropdown）必须手动初始化，不能靠 data-bs-toggle 自动触发——因为多数在线环境禁用 DOM MutationObserver 或拦截 addEventListener。
Alpine.js 是最省心的入门选择
它体积小（~11KB）、语法接近 Vue、不需要编译、不污染全局命名空间，特别适合在线环境快速验证交互逻辑。你只要在 里加一行：
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
然后在 HTML 中写：
<div x-data="{ count: 0 }">
<button x-on:click="count++">Clicked <span x-text="count"></span> times</button>
</div>
就能立刻看到响应式计数器。不用 new Alpine()，也不用等 DOMContentLoaded，defer 加载完自动接管。
常见坑：
- 别用
x-model绑定<input type="file">—— 在线沙箱通常屏蔽FileList访问，控制台会静默失败 -
x-effect里调用fetch可能被 CORS 拦截，建议先用本地 JSON 模拟数据 - 不要在
x-data里写异步函数（如async () => {...}），Alpine 2.x 不支持，3.x 虽支持但部分在线平台 babel 版本旧，会解析失败
Vue 3 CDN 引入要绕开两个硬限制
在线运行器普遍禁用 eval 和 Function 构造器，所以 Vue 官方推荐的 vue.global.js（非构建版）是唯一可行路径。别用 vue.esm-browser.js，它依赖 ESM 动态导入，在非模块环境会报 Cannot use import statement outside a module。
正确姿势：
- HTML 中确保
<div id="app"></div>存在，且在script标签之前 - JS 区域第一行必须是
const { createApp } = Vue;，不能解构其他 API（如ref），否则可能因 tree-shaking 失效而报错 - 挂载时用
createApp(...).mount('#app')，别漏掉mount—— 否则页面空白且无报错 - 如果用
defineComponent，必须配合script setup语法糖？不行。在线环境不支持 SFC 解析，所有代码必须写在普通<script></script>块里
典型错误信息：TypeError: Cannot read properties of undefined (reading 'createApp')，基本就是没等 Vue 加载完就执行了 JS。
React 18 在线运行要接受性能妥协
你没法用 Vite 或 CRA，只能走 react.development.js + react-dom.development.js + babel-standalone 三件套。这意味着：
- JSX 会被实时编译，首次渲染慢 300–800ms，频繁修改会明显卡顿
-
createRoot必须显式调用，ReactDOM.render已废弃，用了直接白屏 - 不能用 Hooks 自定义函数（如
useMyHook），因为 babel-standalone 不支持顶层 await 或模块导入 - 第三方库（如
react-router）基本不可用——CDN 找不到兼容版本，或依赖 Node.js 环境
最小可运行示例：
<div id="root"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script type="text/babel">
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, React!);
</script>
真正容易被忽略的是：所有 JSX 必须包裹在 <script type="text/babel"></script> 里，且不能和普通 <script></script> 混用——否则 babel 不会介入编译，直接抛语法错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
