單文件組件
vue 中後綴名是 .vue 的文件，我們稱它爲 單文件組件
單文件組件的優點
- 在 vscode 中安裝 vetur 插件。能夠讓單文件組件有很好的語法高亮和代碼提示
- 可以將樣式寫在組件內。並且通過配置還能讓樣式只對當前組件生效（作用域樣式）
- 要實現 作用域樣式，只需要在單文件組件的 style 標籤上設置 scoped 屬性
- 作用域樣式是如何實現的呢？審查元素就可以知道
- 可以使用現代化的 ESM 模塊化
一個單文件組件的組成
- template
- script
- style
給 style 標籤添加上一個 scoped 屬性，這時，這個 style 標籤中的樣式就只對當前組件生效
使用sass
- 在項目中安裝 sass-loader
$ npm install sass-loader --save-dev
- 在項目中安裝 node-sass
$ npm install node-sass --save-dev
- 在單文件組件中設置 style 的 lang 屬性爲 scss
單文件組件的一些特點
- 一個單文件組件，必須要有 template 。其餘兩個可有可無
- 如果 script 中暴露組件的選項配置對象時沒有設置 name 選項，文件名就是當前的組件名
- style 標籤可以有多個
- style 還可以去配置使用 less 或 sass