文章目录
- 参考资料
- 熟悉Vite
-
- [Vite支持的前端 JavaScript 框架/库](#Vite支持的前端 JavaScript 框架/库)
- [Vue 项目变体选择](#Vue 项目变体选择)
- Package.json
参考资料
熟悉Vite
Vite 是一款速度极快的前端构建工具
为下一代 Web 应用程序提供支持
Vite支持的前端 JavaScript 框架/库
- Vanilla（香草）：纯原生 JavaScript。 不使用任何框架，直接操作 DOM（文档对象模型）。最轻量、无学习成本，但大型项目手动管理 DOM 容易导致代码混乱。
- Vue：渐进式框架。 设计非常灵活，上手简单，官方生态（Vue Router + Pinia）完备且统一。在国内和中小型项目中极受欢迎，模板语法像 HTML，对新手友好。
- React：UI 库（业界标杆）。 采用 JSX 语法（JS 中写 HTML）和单向数据流，生态极其庞大（Next.js 等）。核心是虚拟 DOM 和 Hooks，适合复杂的大型企业级应用，但需要搭配路由/状态库自行组合。
- Preac：React 的轻量替代品。 API 与 React 高度兼容（体积仅 3KB），性能极佳，但生态不如 React 丰富，适合对包体积有严苛要求的场景（如移动端 H5）。
- Lit：基于 Web Components 的库。 利用浏览器原生标准，轻量高效，适合开发可跨框架复用的独立组件或 Web 组件库。
- Svelte：编译型框架。 没有虚拟 DOM，在编译阶段将代码转为高效的 DOM 操作，写起来像原生 JS，响应式极其简洁，性能优秀，适合追求极致运行时速度和简洁写法的开发者。
- Solid：类似 React Hooks 但无虚拟 DOM。 采用细粒度响应式，性能媲美 Svelte，写法像 React（JSX），但状态更新更精准（只更新变化的部分）。
- Ember："开箱即用"的重框架。 约定大于配置，内置路由、状态管理全套工具，适合大型长期维护的项目，但学习曲线陡峭，如今热度较低。
- Qwik：极速加载的编译型框架。 主打"可恢复性"（Resumability），几乎不需要加载 JavaScript，首屏加载极快，适合对 SEO 和性能要求极高的页面。
- Angular：完整的 MVC（模型-视图-控制器）框架（TypeScript 开发）。 提供依赖注入、RxJS（响应式编程）等全套方案，适合超大型企业级复杂项目，但语法较重，学习曲线最陡。
- Marko：针对服务端渲染（SSR）优化的框架。 由 eBay 开发，既能渲染后端 HTML 也能做前端交互，适合需要高性能 SEO 的电商类页面。
Vue 项目变体选择
你打算用哪种方式写这个 Vue 项目？
- TypeScript ：使用 TS 语法 。这是目前大中型项目的标准首选。它给 JS 加上类型检查，能提前发现错误、智能提示更全，代码更健壮。虽然多写几个类型定义，但后期维护省心得多。
- JavaScript ：使用纯 JS 语法 。不需要配置类型，写起来快，适合极小的 Demo、临时测试脚本，或者完全不想接触 TS 的新手。但项目一大，容易"改个变量到处报错"。
- Official Vue Starter ↗ ：
pnpm create vue@latest, Vue 官方提供的最简入门模板，通常用于阅读文档时快速复制代码片段，不适合直接创建本地项目。 - Nuxt ↗ https://nuxt.com ：
pnpm dlx nuxi init，Nuxt 在 Vue 基础上增加了服务端渲染（SSR）、自动路由、服务端 API 等功能。如果你要做需要 SEO 的官网或全栈应用，才需要选它。 - Vike ↗ https://vike.dev ：
pnpm create vike@latest --vue比 Nuxt 更轻量、更灵活，也支持 SSR。适合只想给现有 Vue 项目加 SSR 能力，不想用 Nuxt 全家桶的开发者。
Package.json
typescript
npm install --save @types/node
npm add -D @vue/tsconfig
npm install -D typescript
npm install vue-tsc typescript --save-dev