html开发框架怎么用 前端框架快速上手指南【新手】

4次阅读

vue 3 中 createapp 必须赋值给变量(如 const app = createapp(app))再链式调用 .use(),且挂载需显式 app.mount(‘#app’);react usestate 更新对象须返回新引用;webpack 5 报 fs 错误需升级依赖或配置 fallback;tailwind @layer 生效需严格遵循加载顺序和 class 属性使用规范。

html开发框架怎么用 前端框架快速上手指南【新手】

Vue 3 的 createApp 怎么调用才不报错

直接在 main.js 里写 createApp({}) 没问题,但一旦加了 routerpinia,常见错误是「app.use() is not a function」——本质是漏了 createApp() 返回值赋值给 app 变量。

  • 必须先声明变量:const app = createApp(App),再链式调用 .use(router).use(store)
  • createApp() 不接受 Vue 2 风格的选项对象(如 el: '#app'),挂载必须显式调用 app.mount('#app')
  • 如果用 Vite,确保入口文件是 main.js(不是 index.html 直接 script),否则 createApp 可能未定义

React 中 useState 更新对象时为什么视图不刷新

因为 JavaScript 对象是引用类型setState({ ...obj, name: 'new' }) 看似更新了,但如果原对象和新对象内存地址相同(比如用了 Object.assign(obj, {name: 'new'})),React 浅比较后会跳过渲染。

  • 永远用展开运算符structuredClone(支持环境下)生成新对象:setUser(prev => ({ ...prev, age: prev.age + 1 }))
  • 嵌套对象要逐层展开:setForm(prev => ({ ...prev, profile: { ...prev.profile, city: 'Beijing' } }))
  • 别在 useState 初始化里传函数返回对象(除非真需要惰性初始化),否则每次 render 都新建对象,触发多余 diff

Webpack 5 打包时提示 Module not found: Error: Can't resolve 'fs'

这是 Webpack 把 Node.js 内置模块(如 fspath)当浏览器代码处理了。根本原因是某个依赖(比如低版本 pdfjs-distsqlite3)写了服务端逻辑,却没做环境隔离。

  • 检查报错路径里的 node_modules 包,升级它(如 pdfjs-dist@2.16+ 已移除 fs 引用)
  • 临时绕过:在 webpack.config.jsresolve.fallback 中配 { fs: false, crypto: false }(仅限纯前端项目)
  • 更稳妥的是改用 browser 字段声明的包,或用 define 插件注入空对象:fs: 'empty'

Tailwind CSS 的 @layer 为什么加了也不生效

常见于自定义 components 层样式被默认 utilities 层覆盖——不是语法错,是加载顺序和作用域理解偏差。

立即学习前端免费学习笔记(深入)”;

  • @layer components 必须写在 @tailwind components 指令之前,且整个 @layer 块要放在 @tailwind base 后、@tailwind utilities
  • 组件类名必须带 class 属性才能触发 PurgeCSS 保留,单独写 .btn { @apply px-4 py-2; } 不会被识别为“使用”
  • 开发时开热更新(HMR)可能缓存旧 CSS,改完 @layer 后强制重启 dev server

框架本身不难,难的是每个环节都卡在「看起来该这么写,但实际运行时环境已经悄悄变了」——比如 Vite 的预构建、React 的严格模式、Tailwind 的 JIT 编译时机。动手前先看一眼控制台报错路径和打包产物结构,比查文档更快定位真实断点。

text=ZqhQzanResources