广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue-loader使用教程
  • 334
分享到

Vue-loader使用教程

Vue-loader使用教程Vue-loader使用 2022-11-13 14:11:26 334人浏览 薄情痞子
摘要

目录简介Vue-loader是什么简介 说明 本文介绍vue-loader的作用及其用法。 官网网址 https://vue-loader.vuejs.org/zh/ Vue-loa

简介

说明

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

--结束END--

本文标题: Vue-loader使用教程

本文链接: https://www.lsjlt.com/news/171956.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue-loader使用教程
    目录简介Vue-loader是什么简介 说明 本文介绍vue-loader的作用及其用法。 官网网址 https://vue-loader.vuejs.org/zh/ Vue-loa...
    99+
    2022-11-13
    Vue-loader使用教程 Vue-loader使用
  • vue如何使用vue-loader
    这篇文章主要介绍vue如何使用vue-loader,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!vue-loader小技巧vue-loader 是处理 *.vue 文件的 webpa...
    99+
    2022-10-19
  • Vue各种loader的基本配置与使用示例教程
    目录webpack中的loader  loader概述  打包处理css文件  打包处理less文件  打包处理图片  打包处理js...
    99+
    2023-01-07
    Vue loader 基本配置与使用
  • Vue + Webpack + Vue-loader有什么用
    这篇文章主要介绍Vue + Webpack + Vue-loader有什么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Vue-loader 是什么?vue-loader 是一个加...
    99+
    2022-10-19
  • win7激活工具nt6 oem loader使用教程(网上没有的)
      在之前的教程中,小编为大家推荐了几款win7激活工具,比如,小马激活工具、nt6 oem loader、Win7 Activation。一些网友已经下载使用了。而部分网友跟小编反映,没有找到nt6 oem loade...
    99+
    2023-06-16
    win7 激活工具 激活 工具 教程 nt6 oem loader
  • vue中loader的作用是什么
    vue中loader可以用来解析和转换.vue文件,提取出每个语言块,有必要的情况下会分别把他们交给对应的loader去处理,它还能够在.vue文件中添加额外的自定义块来实现项目的特殊需求。...
    99+
    2022-10-12
  • Sql Loader的简单使用
        之前总结的关于SQL*Loader的用法,今天又用到,又翻出来看看    SQL*Loader 可将外部文件中的数据加载到Oracle D...
    99+
    2022-10-18
  • SQL Loader的使用方法
    本篇内容介绍了“SQL Loader的使用方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! Oracl...
    99+
    2022-10-18
  • Vue electron零基础使用教程
    需求:给vue项目加一个外壳(electron),顾名思义也就是使用electron应用程序运行vue项目,直接将写好上线的vue项目在线地址放入electron程序中即可 操作步骤...
    99+
    2022-11-13
    Vue electron Vue electron
  • Open62541 NodeSet loader 编译与使用
            大多数的OPC UA 建模工具通常是将NodeSet 编译成为C 或者C# 的源代码,然后和Server 程序一起编译。比如uaModeler,Opc foundation 的UA ModelCompiler 以及Open6...
    99+
    2023-09-10
    OPCUA 自动化
  • Oracle SQL*Loader使用案例(三)
          上两篇文章中,介绍了SQL*Loader的使用方法及使用案例,本篇将根据实际的使用案例来更深层次的来解读SQL*Loader     &nbs...
    99+
    2022-10-18
  • Oracle SQL*Loader使用案例(二)
          上一篇文章中,介绍了SQL*Loader的使用方法及简单的案例 Oracle SQL*Loader使用案例(一),本篇将根据实际的使用案例来更深层次的来...
    99+
    2022-10-18
  • 使用vue渲染页面的教程
    本篇内容介绍了“使用vue渲染页面的教程”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!vue渲染页面路径图...
    99+
    2022-10-19
  • Vue中$attrs与$listeners的使用教程
    目录介绍举例总结 介绍 $attrs 继承所有的父组件属性(没有通过 props 接收的属性还有 class 类名 和 style 样式 )。 inheritAttrs: 是否非 p...
    99+
    2022-11-12
  • vue-cli使用stimulsoft.reports.js的详细教程
    vue-cli使用stimulsoft.reports.js(保姆级教程) 第一部分:数据源准备 以下是JSON数据的教程 json数据结构 { "数据源名":[...
    99+
    2022-11-12
  • OpenLayer基于vue的封装使用教程
    目录前言基本结构 _createView _createBaselayer_createMap _initMapEvt _initMapCon...
    99+
    2022-11-13
    vue OpenLayer vue OpenLayer封装
  • Vue中Mixin&extends的详细使用教程
    目录认识Mixin官方定义Mixin项目中如何使用Mixin官方定义extends项目中使用extends总结认识Mixin 目前我们使用组件化开发方式来开发应用程序,但是在不同组件...
    99+
    2022-11-13
  • vue中使用vuex的超详细教程
    目录一、适合初学者使用,保存数据以及获取数据二、模块化(适合有部分基础的人)vuex是使用vue中必不可少的一部分,基于父子、兄弟组件,我们传值可能会很方便,但是如果是没有关联的组件...
    99+
    2022-11-13
    vue使用vuex vue vuex
  • 路由vue-route的使用示例教程
    目录一、项目初始化二、路由配置规则三、声明式导航和编程式导航四、路由重定向五、嵌套路由总结六、路由参数动态匹配七、导航跳转时传递路由参数八、路由导航守卫一、项目初始化 二、路由配置...
    99+
    2022-12-22
    路由vue-route使用 vue-route路由使用 路由vue-route
  • Vue webpack的基本使用示例教程
    目录前端工程化 小白眼中的前端开发 vs 实际的前端开发 什么是前端工程化 前端工程化的解决方案webpack的基本使用  什么是webpac...
    99+
    2022-12-22
    Vue webpack的基本使用 Vue webpack使用
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作