vue3学习-应用规模化（额，没怎么看）

vue3应用规模化

单文件组件

Single-File Component 简称SFC

在同一文件中封装、组合了组件的视图、逻辑、样式

为什么要使用SFC

• 使用熟悉的 HTML、CSS 和 JavaScript 语法编写模块化的组件
• 让本来就强相关的关注点自然内聚
• 预编译模板，避免运行时的编译开销
• 组件作用域的 CSS
• 在使用组合式 API 时语法更简单
• 通过交叉分析模板和逻辑代码能进行更多编译时优化
• 更好的 IDE 支持，提供自动补全和对模板中表达式的类型检查
• 开箱即用的模块热更新 (HMR) 支持

SFC如何工作

必须由 @vue/compiler-sfc 编译为标准的 javascript 和 css

SFC中的 <style>标签会在开发时注入成原生的<style >,支持热更新，在生成环境瞎，他们会被额抽取、合并成单独的 css 文件

如何看到关注点分离

前端工程化的最终目的为了更好的维护代码。关注点分离不应该完全基于文件类型的区别和分离。

在一个组件中，其模板、逻辑和样式本就是有内在联系的、是耦合的，将它们放在一起，实际上使组件更有内聚性和可维护性。

工具链

项目脚手架

npm init vue@latest

Vite 官方文档

浏览器开发者插件

• Chrome 扩展商店页

TypeScript

配合 TypeScript 使用 Vue。

代码规范

Vue 团队维护着 eslint-plugin-vue 项目，它是一个 ESLint 插件，会提供 SFC 相关规则的定义。

格式化

• Volar VSCode 插件为 Vue SFC 提供了开箱即用的格式化功能。

SFC 自定义块集成

其他在线演练场

• VueUse Playground
• Vue + Vite on Repl.it
• Vue on CodeSandbox
• Vue on Codepen
• Vue on Components.studio
• [Vue on WebComponents.dev](