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
浏览器开发者插件
TypeScript
代码规范
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](