Vue-loader使用教程
簡介
說明
本文介紹vue-loader的作用及其用法。
官網(wǎng)網(wǎng)址
https://vue-loader.vuejs.org/zh/
Vue-loader是什么
Vue-loader其實就是一個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屬性自動判斷出要使用的loaders。
以scss為例,只要安裝處理sass/scss的loader,就能在vue中使用scss了。
現(xiàn)在我們來安裝sass/scss loader:
npm install -D sass-loader node-sass
vue-loader允許能根據(jù)lang屬性自動判斷出要使用的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有了這種能力,它會根據(jù)不同的文件去使用不同的loader。
到此這篇關(guān)于Vue-loader使用教程的文章就介紹到這了,更多相關(guān)Vue-loader使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue下滾動到頁面底部無限加載數(shù)據(jù)的示例代碼
本篇文章主要介紹了Vue下滾動到頁面底部無限加載數(shù)據(jù)的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04vue框架和react框架的區(qū)別以及各自的應(yīng)用場景使用
這篇文章主要介紹了vue框架和react框架的區(qū)別以及各自的應(yīng)用場景使用,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10element?tab標(biāo)簽管理路由頁面的項目實踐
本文主要介紹了element?tab標(biāo)簽管理路由頁面的項目實踐,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08vue使用swiper實現(xiàn)中間大兩邊小的輪播圖效果
這篇文章主要介紹了vue使用swiper實現(xiàn)中間大兩邊小的輪播圖效果,本文分步驟通過實例代碼講解的非常詳細(xì),需要的朋友可以參考下2019-11-11淺析webpack-bundle-analyzer在vue-cli3中的使用
這篇文章主要介紹了webpack-bundle-analyzer在vue-cli3中的使用,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10