Vue 单文件组件 (SFC) 规范

vue-loader 会解析文件，提取每个语言块，如有必要会通过其它 loader 处理，最后将他们组装成一个 ES Module，它的默认导出是一个 Vue.js 组件选项的对象。

vue-loader 支持使用非默认语言，比如 CSS 预处理器，预编译的 HTML 模版语言，通过设置语言块的 lang 属性。例如，你可以像下面这样使用 Sass 语法编写样式：

更多细节可以在使用预处理器中找到。

• 每个 .vue 文件最多包含一个 <template> 块。

• 内容将被提取并传递给 vue-template-compiler 为字符串，预处理为 JavaScript 渲染函数，并最终注入到从 <script> 导出的组件中。

• 每个 .vue 文件最多包含一个 块。

• 它的默认导出应该是一个 Vue.js 的。也可以导出由 Vue.extend() 创建的扩展对象，但是普通对象是更好的选择。

• 任何匹配 .js 文件 (或通过它的 lang 特性指定的扩展名) 的 webpack 规则都将会运用到这个 <script> 块的内容中。

• 默认匹配：/.css$/。

• 一个 .vue 文件可以包含多个 <style> 标签。

• 任何匹配 .css 文件 (或通过它的 特性指定的扩展名) 的 webpack 规则都将会运用到这个 <style> 块的内容中。

更多细节，查看自定义块。

如果喜欢把 .vue 文件分隔到多个文件中，你可以通过 src 属性导入外部文件：

需要注意的是 src 导入遵循和 webpack 模块请求相同的路径解析规则，这意味着：

• 相对路径需要以 ./ 开始
• 你可以从 NPM 依赖中导入资源：

在自定义块上同样支持 src 导入，例如：

目前有下列 IDE/编辑器 支持语法高亮：

• VS Code
• Vim
• JetBrains IDEs (WebStorm、PhpStorm 等)
  非常感谢其他编辑器/IDE 所做的贡献！如果在 Vue 组件中没有使用任何预处理器，你可以把 .vue 文件当作 HTML 对待。

在语言块中使用该语言块对应的注释语法 (HTML、CSS、JavaScript、Jade 等)。顶层注释使用 HTML 注释语法：。