Vuejs 單文件組件實(shí)例詳解
在之前的實(shí)例中,我們都是通過 Vue.component 或者 components 屬性的方式來定義組件,這種方式在很多中小規(guī)模的項(xiàng)目中還好,但在復(fù)雜的項(xiàng)目中,下面這些缺點(diǎn)就非常明顯了:
字符串模板:缺乏高亮,書寫麻煩,特別是 HTML 多行的時(shí)候,雖然可以將模板寫在 html 文件中,但是侵入性太強(qiáng),不利于組件解耦分離。
不支持CSS:意味著當(dāng) HTML 和 JavaScript 組件化時(shí),CSS明顯被遺漏了
沒有構(gòu)建步驟:限制只能使用 HTML 和 ES5 JavaScript,而不能使用預(yù)處理器。
Vuejs 提供的擴(kuò)展名為 .vue 的 單文件組件 為以上所有問題提供了解決方案。
初識(shí)單文件組件
還是利用工欲善其事必先利其器 中的源碼,在 src 目錄下創(chuàng)建 hello.vue 文件,內(nèi)容如下:
<template> <h2>{{ msg }}</h2> </template> <script> export default { data () { return { msg:'Hello Vue.js 單文件組件~' } } } </script> <style> h2 { color: green; } </style>
然后在 app.js 中引入使用:
// ES6 引入模塊語法 import Vue from 'vue'; import hello from './hello.vue'; new Vue({ el: "#app", template: '<hello/>', components: { hello } });
此時(shí)項(xiàng)目是沒法運(yùn)行的,因?yàn)?.vue 文件 webpack 是沒法是別的,它需要對(duì)應(yīng)的 vue-loader 來處理才行,而且細(xì)心的朋友會(huì)發(fā)現(xiàn) hello.vue 中用到了 ES6 語法,此時(shí)就需要用到相應(yīng)的語法轉(zhuǎn)化 loader 將 ES6 轉(zhuǎn)化成主流瀏覽器兼容的 ES5 語法,這里就需要用到官方推薦的 babel 工具了。先安裝需要的 loader :
# hello.vue 文件中使用了 css,所以需要 css-loader 來處理,vue-loader 會(huì)自動(dòng)調(diào)用 npm install vue-loader css-loader babel-loader babel-core babel-preset-env --save-dev
有的人疑惑只是使用 babel-loader
為什么還需要安裝后面這么多工具呢,這是因?yàn)楹芏喙ぞ叨际仟?dú)立的, loader 只是為了配合 webpack 使用的橋梁,而這里 babel-core
和 babel-preset-env
才是實(shí)現(xiàn) ES6 到 ES5 的核心。
我們?cè)傩薷?webpack.config.js 配置如下:
module.exports = { // ... module: { // 這里用來配置處理不同后綴文件所使用的loader rules: [ { test: /.vue$/, loader: 'vue-loader' }, { test: /.js$/, loader: 'babel-loader' } ] } }
對(duì)于 babel 的配置,我們還需在項(xiàng)目根目錄下剛創(chuàng)建 .babelrc 文件來配置 Babel presets 和 其他相關(guān)插件,內(nèi)容如下:
{ "presets": [ "env" ] }
但是雖然雖然都配置好了,項(xiàng)目還是還是會(huì)報(bào)錯(cuò),報(bào)如下錯(cuò)誤:
ERROR in ./src/hello.vue Module build failed: Error: Cannot find module 'vue-template-compiler'
有人就不高興了,明明是按照官方提示安裝了依賴,并正確的進(jìn)行配置,為什么還是會(huì)報(bào)錯(cuò)呢?遇到錯(cuò)誤不要怕,先閱讀下錯(cuò)誤是什么,很容易發(fā)現(xiàn),是因?yàn)?Cannot find module 'vue-template-compiler' ,這是因?yàn)?vue-loader
在處理 .vue 文件時(shí),還需要依賴 vue-template-compiler
工具來處理。
剛開始我不知道官方為什么沒有直接告訴用戶需要安裝這個(gè)依賴,通過閱讀 vue-loader 才明白其 package.json 文件中是將 vue-template-compiler
和 css-loader
作為 peerDependencies ,而 peerDependencies 在安裝的時(shí)候,并不會(huì)自動(dòng)安裝(npm@3.0+),只會(huì)給出相關(guān)警告,所以這個(gè)需要我們手動(dòng)安裝的,當(dāng)然在 .vue 文件中如果需要寫 CSS,也必須用到 css-loader ,這個(gè)也是在 peerDependencies 中。相關(guān)討論: https://github.com/vuejs/vue-loader/issues/1158
知道問題了,直接安裝下就可以了:
npm install vue-template-compiler css-loader --save-dev
再次運(yùn)行項(xiàng)目,頁(yè)面中出現(xiàn)了我們的內(nèi)容,并沒報(bào)錯(cuò),ok,大功告成~
使用預(yù)處理器
我們已經(jīng)學(xué)會(huì)在 .vue 中寫 css 了,那么如果使用 sass 預(yù)處理器呢?首先安裝上篇文章中提到的模塊:
npm install sass-loader node-sass --save-dev
配置只需兩步:
修改 webpack.config.js 中 vue-loader 配置
module.exports = { // ... module: { // 這里用來配置處理不同后綴文件所使用的loader rules: [ { test: /.vue$/, loader: 'vue-loader', options: { loaders: { // 這里也可以使用連寫方式,但是不利于自定義話參數(shù)配置 // scss: 'vue-style-loader!css-loader!sass-loader' scss: [ { loader: 'vue-style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' } ] } } }, // ... ] } }
給 .vue 文件中的 style 標(biāo)簽,添加 lang="scss"
屬性。
配置完后,就可以再 .vue 文件中,愉快地編寫 sass 語法了。
加載全局設(shè)置文件
實(shí)際開發(fā)中,我們?cè)诰帉?sass 文件時(shí),經(jīng)常會(huì)將全局的 scss 變量提取出來,放到一個(gè)單獨(dú)的文件中,但是這樣就有個(gè)問題,每個(gè)需要用到的組件,都需要手動(dòng) @import './styles/_var.scss'
進(jìn)來,非常不友好。插件 sass-resources-loader
就很好地幫我們解決這個(gè)問題,先安裝一下:
npm install sass-resources-loader --save-dev
然后修改 webpack.config.js 文件中 vue-loader 相關(guān)配置:
// ... { test: /.vue$/, loader: 'vue-loader', options: { loaders: { scss: [ { loader: 'vue-style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }, // 看這里,看這里,看這里 { loader: 'sass-resources-loader', options: { // 這里的resources 屬性是個(gè)數(shù)組,可以放多個(gè)想全局引用的文件 resources: [resolve('./src/styles/_var.scss')] } } ] } } } // ...
配置就完成了,我們?cè)賮頊y(cè)試下。
在 src 目錄下分別創(chuàng)建 hello1.vue 和 hello2.vue 文件:
<!-- hello1.vue --> <template> <h1>{{ msg }}</h1> </template> <script> export default { name:'hello1', data () { return { msg:'Hello Vue.js 單文件組件~' } } } </script> <stylelang="scss"> h1 { color: $green; } </style> <!-- hello2.vue --> <template> <h1>{{ msg }}</h1> </template> <script> export default { name:'hello2', data () { return { msg:'Hello Vue.js 單文件組件~' } } } </script> <stylelang="scss"> h1 { color: $red; } </style>
然后創(chuàng)建一個(gè) styles 目錄,并在其中新建存放全局變量的文件 _var.scss :
$green: rgb(41, 209, 41); $red: rgb(177, 28, 28);
接下來,在 app.js 中引用兩個(gè)組件:
import Vue from 'vue'; import hello1 from './hello1.vue'; import hello2 from './hello2.vue'; new Vue({ el: "#app", template: '<div><hello1/><hello2/></div>', components: { hello1, hello2 } });
重新運(yùn)行項(xiàng)目就可以了。
有作用域的 style
單文件組件中為我們提供了一個(gè)非常便利的功能,就是當(dāng) style 標(biāo)簽添加 scoped 屬性時(shí),標(biāo)簽內(nèi)的樣式將只作用于當(dāng)前組件中的元素。
接著上面的例子,運(yùn)行后會(huì)發(fā)現(xiàn) hello1.vue 中的 h1 顏色并不是想要的 $green 色,而是被 hello2.vue 中的樣式覆蓋了。于是分別在 hello1.vue 和 hello2.vue 的 style 標(biāo)簽上添加 scoped 屬性,如下:
<!-- hello1.vue --> <stylelang="scss"scoped> h1 { color: $green; } </style> <!-- hello2.vue --> <stylelang="scss"scoped> h1 { color: $red; } </style>
這樣一來我們的兩個(gè) h1 標(biāo)簽顏色都顯示正常了。
自定義塊
在編寫某些開源組件時(shí),有時(shí)候我們需要同時(shí)維護(hù)多個(gè)組件和組件說明,但是每次修改就要同時(shí)修改 .vue 和 .md 文件,相當(dāng)麻煩。 .vue 文件的 自定義語言塊 功能,就允許我們將 markdown 說明同時(shí)寫進(jìn) .vue 文件中,然后通過插件將其說明部分單獨(dú)提取到相應(yīng)的 .md 文件中,這樣就可以同時(shí)維護(hù)說明文檔和組件功能了。
比如我們將 hello1.vue 文件修改如下:
<docs> # 標(biāo)題 這是標(biāo)題內(nèi)容,[倉(cāng)庫(kù)地址](https://github.com/yugasun/You-Dont-Know-Vuejs) ## 子標(biāo)題 這是子標(biāo)題內(nèi)容 </docs> <template> <h1>{{ msg }}</h1> </template> <script> export default { name:'hello1', data () { return { msg:'Hello Vue.js 單文件組件~' } } } </script> <stylelang="scss"scoped> h1 { color: $green; } </style>
然后修改 webpack.config.js 配置:
const path = require('path'); // 引入相關(guān)插件 const ExtractTextPlugin = require('extract-text-webpack-plugin'); function resolve(dir){ return path.resolve(__dirname, dir); } module.exports = { // 入口文件 entry: './src/app.js', // 編譯輸出文件 output: { path: resolve('./'), filename: 'build.js' }, resolve: { alias: { // 因?yàn)槲覀冞@里用的是 require 引入方式,所以應(yīng)該使用vue.common.js/vue.js/vue.min.js 'vue$': 'vue/dist/vue.common.js' } }, devServer: { // 這里定義 webpack-dev-server 開啟的web服務(wù)的根目錄 contentBase: resolve('./') }, module: { // 這里用來配置處理不同后綴文件所使用的loader rules: [ { test: /.vue$/, loader: 'vue-loader', options: { loaders: { scss: [ { loader: 'vue-style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }, { loader: 'sass-resources-loader', options: { resources: [resolve('./src/styles/_var.scss')] } } ], docs: ExtractTextPlugin.extract('raw-loader') } } }, { test: /.js$/, loader: 'babel-loader' } ] }, plugins: [ new ExtractTextPlugin('docs.md') ] }
這里用到了 extract-text-webpack-plugin
導(dǎo)出 text 插件,和 raw-loader
,分別都安裝下就行。
然后運(yùn)行構(gòu)建命令 npm run build
,等運(yùn)行結(jié)束,根目錄下會(huì)同時(shí)生成一個(gè) docs.md 文件,這就是我們想編寫的說明文檔。
點(diǎn)擊查看源碼:https://github.com/yugasun/You-Dont-Know-Vuejs/tree/master/chapter2/2
總結(jié)
以上所述是小編給大家介紹的Vuejs 單文件組件實(shí)例詳解,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
web開發(fā)中如何優(yōu)雅的解決"重復(fù)請(qǐng)求"問題
在我們的日常開發(fā)當(dāng)中,很多時(shí)候會(huì)出現(xiàn)短時(shí)間內(nèi)重復(fù)請(qǐng)求的情況,如果沒有妥當(dāng)?shù)靥幚砗蠊車?yán)重,這篇文章主要給大家介紹了關(guān)于web開發(fā)中如何優(yōu)雅的解決重復(fù)請(qǐng)求問題的相關(guān)資料,需要的朋友可以參考下2022-05-05vue如何解決this.refs拿取v-for下元素undefine問題
這篇文章主要介紹了vue如何解決this.refs拿取v-for下元素undefine問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05Vue簡(jiǎn)化用戶查詢/添加功能的實(shí)現(xiàn)
本文主要介紹了Vue簡(jiǎn)化用戶查詢/添加功能的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01vue項(xiàng)目關(guān)閉eslint校驗(yàn)
eslint是一個(gè)JavaScript的校驗(yàn)插件,通常用來校驗(yàn)語法或代碼的書寫風(fēng)格。這篇文章主要介紹了vue項(xiàng)目關(guān)閉eslint校驗(yàn),需要的朋友可以參考下2018-03-03vue項(xiàng)目如何實(shí)現(xiàn)前端預(yù)覽word與pdf格式文件
最近項(xiàng)目中需要在線預(yù)覽WORD文檔,所以給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目如何實(shí)現(xiàn)前端預(yù)覽word與pdf格式文件的相關(guān)資料,需要的朋友可以參考下2023-03-03Vue3+cesium環(huán)境搭建的實(shí)現(xiàn)示例
本文主要介紹了Vue3+cesium環(huán)境搭建的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08