Vue-loader使用教程
簡介
說明
本文介紹vue-loader的作用及其用法。
官網(wǎng)網(wǎng)址
https://vue-loader.vuejs.org/zh/
Vue-loader是什么
Vue-loader其實(shí)就是一個(gè)webpack的loader，用來把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)在我們來安裝sass/scss loader：
npm install -D sass-loader node-sass
vue-loader允許能根據(jù)lang屬性自動(dòng)判斷出要使用的loaders，它是怎么樣做到的？下面來看一看最核心部分的源代碼：
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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3+Canvas實(shí)現(xiàn)坦克大戰(zhàn)游戲(二)
本文主要給大家講解一下子彈擊中物體、物體銷毀、敵方坦克構(gòu)建生成、運(yùn)動(dòng)算法、爆炸效果、以及障礙物的生成，感興趣的小伙伴可以了解一下2022-03-03
這篇文章主要介紹了Vue 數(shù)據(jù)綁定的原理，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
詳解VUE 對element-ui中的ElTableColumn擴(kuò)展
本篇文章主要介紹了詳解VUE 對element-ui中的ElTableColumn擴(kuò)展，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
vue3?圖片懶加載的兩種方式、IntersectionObserver和useIntersectionObserve
這篇文章主要介紹了vue3?圖片懶加載的兩種方式、IntersectionObserver和useIntersectionObserver實(shí)例詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-03-03
Vue Element前端應(yīng)用開發(fā)之組織機(jī)構(gòu)和角色管理
本篇文章繼續(xù)深化Vue Element權(quán)限管理模塊管理的內(nèi)容，介紹組織機(jī)構(gòu)和角色管理模塊的處理，使得我們了解界面組件化模塊的開發(fā)思路和做法，提高我們界面設(shè)計(jì)的技巧，并減少代碼的復(fù)雜性，提高界面代碼的可讀性，同時(shí)也是利用組件的復(fù)用管理。2021-05-05
今天小編就為大家分享一篇Vue調(diào)用后端java接口的實(shí)例代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
一文詳解如何在Vue網(wǎng)站中實(shí)現(xiàn)多語言支持
在當(dāng)今全球化的互聯(lián)網(wǎng)環(huán)境中,為網(wǎng)站提供多語言支持已成為提升用戶體驗(yàn)和擴(kuò)大受眾范圍的關(guān)鍵策略,本文為大家介紹了如何在Vue網(wǎng)站中實(shí)現(xiàn)多語種支持功能,有需要的可以了解下2025-03-03
VUE中setTimeout和setInterval自動(dòng)銷毀案例
這篇文章主要介紹了VUE中setTimeout和setInterval自動(dòng)銷毀案例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue3+vite自定義封裝vue組件發(fā)布到npm包的全過程
當(dāng)市面上主流的組件庫不能滿足我們業(yè)務(wù)需求的時(shí)候,那么我們就有必要開發(fā)一套屬于自己團(tuán)隊(duì)的組件庫,下面這篇文章主要給大家介紹了關(guān)于vue3+vite自定義封裝vue組件發(fā)布到npm包的相關(guān)資料,需要的朋友可以參考下2022-09-09
Vue中點(diǎn)擊active并第一個(gè)默認(rèn)選中功能的實(shí)現(xiàn)
這篇文章主要介紹了Vue中點(diǎn)擊active并第一個(gè)默認(rèn)選中功能的實(shí)現(xiàn)代碼，代碼簡單易懂，非常不錯(cuò)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02