一个 Vue 单文件组件 (SFC) Single File Components,通常使用 *.vue
作为文件扩展名,它是一种使用了类似 HTML 语法的自定义文件格式,用于定义 Vue 组件。一个 Vue 单文件组件在语法上是兼容 HTML 的。
每一个 *.vue
文件都由三种顶层语言块构成:、
和
,以及一些其他的自定义块:
{{ msg }}This could be e.g. documentation for the component. 2、相应语言块
每个
*.vue
文件最多可以包含一个顶层块。
语块包裹的内容将会被提取、传递给
@vue/compiler-dom
,预编译为 JavaScript 渲染函数,并附在导出的组件上作为其render
选项。
每个
*.vue
文件最多可以包含一个块。(使用
lang
在任意块上都能使用,比如我们可以在标签中使用 SASS 是
中使用 Pug:
p {{ msg }}
注意对不同预处理器的集成会根据你所使用的工具链而有所不同,具体细节请查看相应的工具链文档来确认:
- Vite
- Vue CLI
- webpack + vue-loader
5、Src 导入
如果你更喜欢将
*.vue
组件分散到多个文件中,可以为一个语块使用src
这个 attribute 来导入一个外部文件:
请注意
src
导入和 JS 模块导入遵循相同的路径解析规则,这意味着:
- 相对路径需要以
./
开头- 你也可以从 npm 依赖中导入资源