Vue的单文件组件

单文件组件

vue 中后缀名是 .vue 的文件，我们称它为 单文件组件

单文件组件的优点

1. 在 vscode 中安装 vetur 插件。能够让单文件组件有很好的语法高亮和代码提示
2. 可以将样式写在组件内。并且通过配置还能让样式只对当前组件生效（作用域样式）
   1. 要实现 作用域样式，只需要在单文件组件的 style 标签上设置 scoped 属性
   2. 作用域样式是如何实现的呢？审查元素就可以知道
3. 可以使用现代化的 ESM 模块化

一个单文件组件的组成

1. template
2. script
3. style

给 style 标签添加上一个 scoped 属性，这时，这个 style 标签中的样式就只对当前组件生效

使用sass

1. 在项目中安装 sass-loader

$ npm install sass-loader --save-dev

2. 在项目中安装 node-sass

$ npm install node-sass --save-dev

3. 在单文件组件中设置 style 的 lang 属性为 scss

单文件组件的一些特点

1. 一个单文件组件，必须要有 template 。其余两个可有可无
2. 如果 script 中暴露组件的选项配置对象时没有设置 name 选项，文件名就是当前的组件名
3. style 标签可以有多个
   1. style 还可以去配置使用 less 或 sass