初级项目应选能3小时内跑起完整页面的框架:Vue 3用HTML内联+createApp,React用ReactDOM.render+react-router-dom@5,Svelte用onMount处理副作用,避免过早引入复杂特性。

开发初级项目时,不需要为“未来扩展性”提前上 React + TypeScript + Webpack + 微前端这套组合;选框架的核心标准是:能否在 3 小时内跑起一个带表单、列表、路由跳转的完整页面,且你不用反复查文档补基础概念。
Vue 3 的 createApp 足够轻但别直接上 defineComponent
新手用 Vue 最容易卡在“为什么组件没渲染”——往往是因为过早用了 defineComponent 或 setup 语法,而漏了 app.mount() 或模板写法不匹配。对初级项目,推荐从最简 HTML 内联模式起步:
{{ message }}
- 不引入构建工具,不配 Vite,不碰 Composition API
-
data()返回对象比setup()更贴近直觉,状态变更也无需ref()/reactive()判断 - 后续加路由?直接换
vue-router@4的createWebHashHistory,不用createWebHistory(免配服务器)
React 初学慎用 createRoot,优先试 ReactDOM.render(v17 兼容模式)
React 官方文档默认展示 createRoot,但它要求你理解并发渲染、StrictMode 的双调用等隐含行为。初级项目跑不起来,90% 出现在这里:
- 错误信息:
TypeError: ReactDOM.createRoot is not a function→ 实际是用了旧版react-dom(17 以下) - 正确做法:CDN 引入
react@17+react-dom@17,用ReactDOM.render(, root) - 路由别碰
react-router@6的嵌套路由和loader,先用react-router-dom@5的BrowserRouter+Switch
Svelte 没有虚拟 DOM,但 $: 声明式逻辑容易误写成同步阻塞
Svelte 编译时生成原生 JS,启动快、包体积小,适合静态内容为主的初级项目(如产品介绍页、问卷收集页)。但新手常把响应式声明写成:
立即学习“前端免费学习笔记(深入)”;
-
$:是编译期响应式逻辑,不是“监听回调”,避免在里面写副作用(如fetch、console.log、DOM 操作) - 需要发请求?用
onMount;需要根据 props 更新状态?用$:+ 纯计算,再用$$props显式接收 - 不要试图用 Svelte 模拟 Vue 的
v-model行为——它没有指令系统,双向绑定靠bind:value,且仅支持原生表单元素
真正卡住初级开发的,从来不是框架功能强弱,而是“哪一行代码该写在哪、报错信息指向哪个环节、改完要不要刷新页面”。选框架前,先花 10 分钟跑通它的最简 Hello World,而不是读完官方 Quick Start 里的第五个步骤。










