Vue-loader使用教程
簡(jiǎn)介
說(shuō)明
本文介紹vue-loader的作用及其用法。
官網(wǎng)網(wǎng)址
https://vue-loader.vuejs.org/zh/
Vue-loader是什么
Vue-loader其實(shí)就是一個(gè)webpack的loader，用來(lái)把vue組件轉(zhuǎn)換成可部署的js, html, css模塊。
預(yù)處理器示例（sass-loader）
官網(wǎng)網(wǎng)址：https://vue-loader.vuejs.org/zh/guide/pre-processors.html#sass
在webpack中，所有預(yù)處理器都要匹配相應(yīng)的loader。vue-loader允許其他的webpack-loader處理組件中的一部分，然后它根據(jù)lang屬性自動(dòng)判斷出要使用的loaders。
以scss為例，只要安裝處理sass/scss的loader，就能在vue中使用scss了。
現(xiàn)在我們來(lái)安裝sass/scss loader：
npm install -D sass-loader node-sass
vue-loader允許能根據(jù)lang屬性自動(dòng)判斷出要使用的loaders，它是怎么樣做到的？下面來(lái)看一看最核心部分的源代碼：
exports.cssLoaders = function (options) {
options = options || {}
var cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}上述這段代碼讓vue-loader有了這種能力，它會(huì)根據(jù)不同的文件去使用不同的loader。
到此這篇關(guān)于Vue-loader使用教程的文章就介紹到這了,更多相關(guān)Vue-loader使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue下滾動(dòng)到頁(yè)面底部無(wú)限加載數(shù)據(jù)的示例代碼
本篇文章主要介紹了Vue下滾動(dòng)到頁(yè)面底部無(wú)限加載數(shù)據(jù)的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
vue框架和react框架的區(qū)別以及各自的應(yīng)用場(chǎng)景使用
這篇文章主要介紹了vue框架和react框架的區(qū)別以及各自的應(yīng)用場(chǎng)景使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
今天小編就為大家分享一篇vue移動(dòng)端彈框組件的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
uni-app是一款基于Vue.js的跨平臺(tái)開(kāi)發(fā)框架，它借助了 Vue.js 的語(yǔ)法和組件化開(kāi)發(fā)思想，本文將詳細(xì)介紹 uni-app 的全局配置、靜態(tài)資源管理、路由管理以及數(shù)據(jù)通信和狀態(tài)管理的進(jìn)階使用技巧,需要的朋友可以參考下2023-06-06
element?tab標(biāo)簽管理路由頁(yè)面的項(xiàng)目實(shí)踐
本文主要介紹了element?tab標(biāo)簽管理路由頁(yè)面的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue使用swiper實(shí)現(xiàn)中間大兩邊小的輪播圖效果
這篇文章主要介紹了vue使用swiper實(shí)現(xiàn)中間大兩邊小的輪播圖效果，本文分步驟通過(guò)實(shí)例代碼講解的非常詳細(xì),需要的朋友可以參考下2019-11-11
vue實(shí)現(xiàn)商品購(gòu)物車(chē)全選反選
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商品購(gòu)物車(chē)全選反選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
本篇文章主要介紹了vue中component組件的props使用詳解，這里整理了詳細(xì)的用法，具有一定的參考價(jià)值，有興趣的可以了解一下2017-09-09
淺析webpack-bundle-analyzer在vue-cli3中的使用
這篇文章主要介紹了webpack-bundle-analyzer在vue-cli3中的使用,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
今天小編就為大家分享一篇vue 根據(jù)選擇條件顯示指定參數(shù)的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11