Vuejs - 單文件組件
為什麽需要單文件組件
在之前的實例中,我們都是通過 Vue.component
或者 components
屬性的方式來定義組件,這種方式在很多中小規模的項目中還好,但在復雜的項目中,下面這些缺點就非常明顯了:
字符串模板:缺乏高亮,書寫麻煩,特別是 HTML 多行的時候,雖然可以將模板寫在 html 文件中,但是侵入性太強,不利於組件解耦分離。
不支持CSS:意味著當 HTML 和 JavaScript 組件化時,CSS明顯被遺漏了
沒有構建步驟:限制只能使用 HTML 和 ES5 JavaScript,而不能使用預處理器。
Vuejs 提供的擴展名為 .vue
的 單文件組件 為以上所有問題提供了解決方案。
初識單文件組件
還是利用 工欲善其事必先利其器 中的源碼,在 src
目錄下創建 hello.vue
文件,內容如下:
1
|
<template>
|
然後在 app.js 中引入使用:
1
|
// ES6 引入模塊語法
|
此時項目是沒法運行的,因為 .vue
文件 webpack 是沒法是別的,它需要對應的 vue-loader
來處理才行,而且細心的朋友會發現 hello.vue
中用到了 ES6 語法,此時就需要用到相應的語法轉化 loader
babel
工具了。先安裝需要的 loader
:
1
|
# hello.vue 文件中使用了 css,所以需要 css-loader 來處理,vue-loader 會自動調用
|
有的人疑惑只是使用
babel-loader
為什麽還需要安裝後面這麽多工具呢,這是因為很多工具都是獨立的,loader
只是為了配合 webpack 使用的橋梁,而這裏babel-core
和babel-preset-env
才是實現 ES6 到 ES5 的核心。
我們再修改 webpack.config.js
配置如下:
1
|
module.exports = {
|
對於 babel 的配置,我們還需在項目根目錄下剛創建 .babelrc
文件來配置 Babel presets 和 其他相關插件,內容如下:
1
|
{
|
但是雖然雖然都配置好了,項目還是還是會報錯,報如下錯誤:
1
|
ERROR in ./src/hello.vue
|
有人就不高興了,明明是按照官方提示安裝了依賴,並正確的進行配置,為什麽還是會報錯呢?遇到錯誤不要怕,先閱讀下錯誤是什麽,很容易發現,是因為 Cannot find module ‘vue-template-compiler‘
,這是因為 vue-loader
在處理 .vue
文件時,還需要依賴 vue-template-compiler
工具來處理。
剛開始我不知道官方為什麽沒有直接告訴用戶需要安裝這個依賴,通過閱讀
vue-loader
才明白其package.json
文件中是將vue-template-compiler
和css-loader
作為 peerDependencies,而peerDependencies
在安裝的時候,並不會自動安裝([email protected]+),只會給出相關警告,所以這個需要我們手動安裝的,當然在.vue
文件中如果需要寫 CSS,也必須用到css-loader
,這個也是在peerDependencies
中。相關討論:https://github.com/vuejs/vue-loader/issues/1158
知道問題了,直接安裝下就可以了:
1
|
npm install vue-template-compiler css-loader --save-dev
|
再次運行項目,頁面中出現了我們的內容,並沒報錯,ok,大功告成~
使用預處理器
我們已經學會在 .vue
中寫 css 了,那麽如果使用 sass 預處理器呢?首先安裝上篇文章中提到的模塊:
1
|
npm install sass-loader node-sass --save-dev
|
配置只需兩步:
-
修改
webpack.config.js
中vue-loader
配置1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30module.exports = {
// ...
module: {
// 這裏用來配置處理不同後綴文件所使用的loader
rules: [
{
test: /.vue$/,
loader: ‘vue-loader‘,
options: {
loaders: {
// 這裏也可以使用連寫方式,但是不利於自定義話參數配置
// scss: ‘vue-style-loader!css-loader!sass-loader‘
scss: [
{
loader: ‘vue-style-loader‘
},
{
loader: ‘css-loader‘
},
{
loader: ‘sass-loader‘
}
]
}
}
},
// ...
]
}
} -
給
.vue
文件中的style
標簽,添加lang="scss"
屬性。
配置完後,就可以再 .vue
文件中,愉快地編寫 sass
語法了。
加載全局設置文件
實際開發中,我們在編寫 sass
文件時,經常會將全局的 scss 變量提取出來,放到一個單獨的文件中,但是這樣就有個問題,每個需要用到的組件,都需要手動 @import ‘./styles/_var.scss‘
進來,非常不友好。插件 sass-resources-loader
就很好地幫我們解決這個問題,先安裝一下:
1
|
npm install sass-resources-loader --save-dev
|
然後修改 webpack.config.js
文件中 vue-loader
相關配置:
1
|
// ...
|
配置就完成了,我們再來測試下。
在 src
目錄下分別創建 hello1.vue
和 hello2.vue
文件:
1
|
<!-- hello1.vue -->
|
然後創建一個 styles
目錄,並在其中新建存放全局變量的文件 _var.scss
:
1
|
$green: rgb(41, 209, 41);
|
接下來,在 app.js
中引用兩個組件:
1
|
import Vue from ‘vue‘;
|
重新運行項目就可以了。
有作用域的 style
單文件組件中為我們提供了一個非常便利的功能,就是當 style
標簽添加 scoped
屬性時,標簽內的樣式將只作用於當前組件中的元素。
接著上面的例子,運行後會發現 hello1.vue
中的 h1
顏色並不是想要的 $green
色,而是被 hello2.vue
中的樣式覆蓋了。於是分別在 hello1.vue
和 hello2.vue
的 style
標簽上添加 scoped
屬性,如下:
1
|
<!-- hello1.vue -->
|
這樣一來我們的兩個 h1
標簽顏色都顯示正常了。
自定義塊
在編寫某些開源組件時,有時候我們需要同時維護多個組件和組件說明,但是每次修改就要同時修改 .vue
和 .md
文件,相當麻煩。.vue
文件的 自定義語言塊 功能,就允許我們將 markdown
說明同時寫進 .vue
文件中,然後通過插件將其說明部分單獨提取到相應的 .md
文件中,這樣就可以同時維護說明文檔和組件功能了。
比如我們將 hello1.vue
文件修改如下:
1
|
<docs>
|
然後修改 webpack.config.js
配置:
1
|
const path = require(‘path‘);
|
這裏用到了 extract-text-webpack-plugin
導出 text
插件,和 raw-loader
,分別都安裝下就行。
然後運行構建命令 npm run build
,等運行結束,根目錄下會同時生成一個 docs.md
文件,這就是我們想編寫的說明文檔。
Vuejs - 單文件組件