Vue-loader使用教程

 更新时间:2022年08月06日 09:18:18   作者:IT利刃出鞘  
Vue-loader其实就是一个webpack的loader,用来把vue组件转换成可部署的js, html, css模块,这篇文章主要介绍了Vue-loader使用教程,需要的朋友可以参考下

简介

说明

本文介绍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使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue3+Canvas实现坦克大战游戏(二)

    Vue3+Canvas实现坦克大战游戏(二)

    本文主要给大家讲解一下子弹击中物体、物体销毁、敌方坦克构建生成、运动算法、爆炸效果、以及障碍物的生成,感兴趣的小伙伴可以了解一下
    2022-03-03
  • Vue 数据绑定的原理分析

    Vue 数据绑定的原理分析

    这篇文章主要介绍了Vue 数据绑定的原理,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • 详解VUE 对element-ui中的ElTableColumn扩展

    详解VUE 对element-ui中的ElTableColumn扩展

    本篇文章主要介绍了详解VUE 对element-ui中的ElTableColumn扩展,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserver实例详解

    vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserve

    这篇文章主要介绍了vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserver实例详解,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • Vue Element前端应用开发之组织机构和角色管理

    Vue Element前端应用开发之组织机构和角色管理

    本篇文章继续深化Vue Element权限管理模块管理的内容,介绍组织机构和角色管理模块的处理,使得我们了解界面组件化模块的开发思路和做法,提高我们界面设计的技巧,并减少代码的复杂性,提高界面代码的可读性,同时也是利用组件的复用管理。
    2021-05-05
  • Vue调用后端java接口的实例代码

    Vue调用后端java接口的实例代码

    今天小编就为大家分享一篇Vue调用后端java接口的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 一文详解如何在Vue网站中实现多语言支持

    一文详解如何在Vue网站中实现多语言支持

    在当今全球化的互联网环境中,为网站提供多语言支持已成为提升用户体验和扩大受众范围的关键策略,本文为大家介绍了如何在Vue网站中实现多语种支持功能,有需要的可以了解下
    2025-03-03
  • VUE中setTimeout和setInterval自动销毁案例

    VUE中setTimeout和setInterval自动销毁案例

    这篇文章主要介绍了VUE中setTimeout和setInterval自动销毁案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue3+vite自定义封装vue组件发布到npm包的全过程

    vue3+vite自定义封装vue组件发布到npm包的全过程

    当市面上主流的组件库不能满足我们业务需求的时候,那么我们就有必要开发一套属于自己团队的组件库,下面这篇文章主要给大家介绍了关于vue3+vite自定义封装vue组件发布到npm包的相关资料,需要的朋友可以参考下
    2022-09-09
  • Vue中点击active并第一个默认选中功能的实现

    Vue中点击active并第一个默认选中功能的实现

    这篇文章主要介绍了Vue中点击active并第一个默认选中功能的实现代码,代码简单易懂,非常不错具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02

最新评论