您现在的位置是:网站首页> 编程资料编程资料
Vue-loader使用教程_vue.js_
2023-05-24
508人已围观
简介 Vue-loader使用教程_vue.js_
简介
说明
本文介绍vue-loader的作用及其用法。
官网网址
https://vue-loader.vuejs.org/zh/
Vue-loader是什么
Vue-loader其实就是一个webpack的loader,用来把vue组件转换成可部署的js, html, css模块。
预处理器示例(sass-loader)
官网网址:https://vue-loader.vuejs.org/zh/guide/pre-processors.html#sass
在webpack中,所有预处理器都要匹配相应的loader。vue-loader允许其他的webpack-loader处理组件中的一部分,然后它根据lang属性自动判断出要使用的loaders。
以scss为例,只要安装处理sass/scss的loader,就能在vue中使用scss了。
现在我们来安装sass/scss loader:
npm install -D sass-loader node-sass
vue-loader允许能根据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有了这种能力,它会根据不同的文件去使用不同的loader。
到此这篇关于Vue-loader使用教程的文章就介绍到这了,更多相关Vue-loader使用内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
您可能感兴趣的文章:
相关内容
- Vue语法和标签的入门使用教程_vue.js_
- 如何使用Vue3设计实现一个Model组件浅析_vue.js_
- 详解Vuex的属性_vue.js_
- vue前后端分离如何解决每次请求session都会变的问题_vue.js_
- Node中的Events模块介绍及应用_node.js_
- JavaScript Generator异步过度的实现详解_javascript技巧_
- JS实现大数相加大数相乘示例详解_JavaScript_
- 前端使用xlsx库导出带有样式的excel文件_JavaScript_
- Vue axios库发送请求的示例介绍_vue.js_
- vue跳转同一个路由参数不同的问题_vue.js_
