Vue-loader使用教程

目录
  • 简介
  • 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使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 深入理解vue-loader如何使用

    深入理解vue-loader如何使用

    .vue格式的文件使用类似HTML的语法描述vue组件.每个.vue文件包含三种最基本的语言块:, <template> <div class="example">{{ msg }}</div> </template> <script> export default { data () { return { msg: 'Hello world!' } } } </script> <style> .exa

  • vue中使用sass及解决sass-loader版本过高导致的编译错误问题

    目录 使用sass及解决sass-loader版本过高导致编译错误 安装依赖包 使用 解决编译错误 安装sass(规避因版本过高报错) 安装的两个命令 配置文件 样式标签更改 使用sass及解决sass-loader版本过高导致编译错误 安装依赖包 安装node-sass.sass-loader和style-loader: npm i node-sass sass-loader style-loader -D 使用 <style scoped lang="scss"> &l

  • vue-content-loader内容加载器的使用方法

    当我们开发网站或者APP时,遇到内容过多加载速度慢时,会导致用户打开页面有大量空白页,vue-content-loader正是解决这个问题的一个组件,使加载内容之前生成一个dom模板,提高用户体验. 第一步:安装 在控制台的项目路径下执行:npm install vue-content-loader --save 第二步:引入使用 <template> <!--<content-loader></content-loader>--> <facebook

  • VUE-cli3使用 svg-sprite-loader

    VUE-cli3使用 svg-sprite-loader svg-sprite-loader 的插件,用来根据导入的 svg 文件自动生成 symbol 标签并插入 html,接下来就可以在模版中方便地使用 svg-sprite 技术了. 使用 svg-sprite 的好处 页面代码清爽 可使用 ID 随处重复调用 每个 SVG 图标都可以更改大小颜色 安装插件 npm install svg-sprite-loader --save-dev webpack 配置,在Vue.config.js加

  • 在vue中使用image-webpack-loader实例

    首先打开 webpack.base.confi.js 提示:在这里url-loader 和 image-webpack-loader 不能一起使用,否则会导致图片出不来 接着找到 module: { rules: [ {}... ] } 在这里写入,一定要先写 'file-loader' 才能使用 'image-webpack-loader' 有各种配置,可以调整你要压缩后图片的质量 提示:如果使用了 webp 会大大减少体积,但是ios并不支持这个格式,会导致在ios上看不见图片 { test

  • Vue项目中使用WebUploader实现文件上传的方法

    Vue项目中使用WebUploader实现文件上传的方法

    简介: WebUploader是由 Baidu WebFE(FEX) 团队开发的一个简单的以 HTML5为主 , FLASH为辅 的现代 文件上传组件 .在现代的浏览器里面能充分发挥HTML5的优势,同时又 不摒弃主流IE浏览器 ,沿用原来的FLASH运行时, 兼容IE6+,iOS 6+, android 4+ .两套运行时,同样的调用方式,可供用户任意选用.采用 大文件分片并发上传 ,极大的提高了文件上传效率. 分片.并发 分片 与 并发 结合,将一个大文件分割成多块, 并发上传 ,极大地提高

  • Vue vant-ui使用van-uploader实现头像上传功能

    Vue vant-ui使用van-uploader实现头像上传功能

    效果图: 项目中是使用有赞vant-ui框架实现的头像上传替换功能 代码布局结构: <van-row class="sendInfo"> <van-col span="24" class="flex colorf topInfo p20"> <!--左边头像部分--> <van-uploader :after-read="afterCard" :before-read="be

  • 如何在vue-cli中使用css-loader实现css module

    [前言] 无论是vue还是react的css模块化解决方案都是依赖loader来实现的 在使用上,vue中用scoped属性实现样式的私有化,利用深度作用选择器/deep来实现样式的去私有化. 例子: <div> <div class="demo"> <div class="child"></ div> </div> </div> <script> // some code <

  • vue axios用法教程详解

    axios是vue-resource后出现的Vue请求数据的插件.vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios. 下面我们来使用axios npm install axios --save-dev import axios from "axios" 这时候如果在其它的组件中,是无法使用 axios 命令的.但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题 1 1.    Vue.prototype.$ajax=axio

  • VUE安装使用教程详解

    如果是简单实用vue的话,可以直接引用js文件. https://vuejs.org/js/vue.js 但是在构建大型项目的时候推荐使用NPM安装,NPM能够很好的和诸如webpack或Browserify模块打包器配合使用,同时Vue也提供配套工具来开发单文件组件. 1. 安装nodejs 由于npm(nodejs package manager)是nodejs的包管理器,所以要首先安装nodejs,从官网下载相应版本安装即可https://nodejs.org/en/download/.

  • Electron vue的使用教程图文详解

    下面详细给大家介绍Electron+vue的使用,具体内容如下所示: .现如今前端框架数不胜数,尤其是angular.vue吸引一大批前端开发者,在这个高新技术快速崛起的时代,自然少不了各种框架的结合使用.接下来是介绍electron+vue的结合使用. 2.Electron是什么?? 对于我来说Electron相当于一个浏览器的外壳,可以把网页程序嵌入到壳里面,可以运行在桌面上的一个程序,可以把网页打包成一个在桌面运行的程序,通俗来说就是软件,比如像QQ.优酷.网易音乐等等.功能的强大超出你的

  • vue interceptor 使用教程实例详解

    vue interceptor 使用教程实例详解

    二次封装axios,根据参数来实现多个请求多次拦截 1. 新建 axiosTool.js 文件,设置请求拦截和处理的逻辑 import Vue from 'vue' import axios from 'axios' //取消请求 let CancelToken = axios.CancelToken //设置默认请求头,如果不需要可以取消这一步 axios.defaults.headers = { 'X-Requested-With': 'XMLHttpRequest' } // 请求超时的时

  • 使用webpack搭建vue环境的教程详解

    1.安装node.js,在官网下载,直接下一步,完成.nodejs里默认包含npm环境.国内安装包的速度太慢,建议使用cnpm淘宝镜像. npm install -g cnpm --registry=https://registry.npm.taobao.org 2.vue-cli构建SPA应用 安装vue:npm install vue -g 安装vue-cli:npm install -g vue-cli 使用webpack构建一个简单项目:vue init webpack-simple d

  • 前端Vue单元测试入门教程

    目录 一.为什么需要单元测试 二.如何写单元测试 三.测试工具 四.Jest入门 安装 简单示例 Jest Cli 使用配置文件 使用 Babel vue-cli 中使用 Jest 常见示例 判断值相等 检查类false值 数字大小比较 字符串比较 数组和类数组 异常 只执行当前test 测试异步代码 回调函数 Promises Async/Await 安装和拆卸 测试前和测试后 测试用例分组 执行顺序 mock 函数 测试mock mock的返回值 模拟接口返回 mock函数的匹配器 五.Vu

  • Docker容器部署前端Vue服务(小白教程)

    Docker容器部署前端Vue服务(小白教程)

    目录 需要工具 首先对前端项目进行打包:npm run build 在项目文件夹下编写nginx config配置文件 在项目文件夹下编写Dockerfile文件 构建docker镜像 启动docker容器 查看启动的容器 访问 需要工具 Xftp Xshell 首先对前端项目进行打包:npm run build 打包完成 在项目中生成dist文件: 通过Xshell在/home目录下创建项目文件夹 mkdir xxxx(文件名) 通过Xftp将打包的dist文件上传到服务器的项目文件夹下: 利

  • 写给vue新手们的vue渲染页面教程

    写给vue新手们的vue渲染页面教程

    前言 本文主要给各位vue的新手们分享了关于vue渲染页面的教程,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. vue渲染页面 路径图 index.html App.vue router.js main.js 效果图: 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对我们的支持.

  • Vue.JS入门教程之事件监听

    你可以使用 v-on 指令来绑定并监听 DOM 事件.绑定的内容可以是一个当前实例上的方法 (后面无需跟括号) 或一个内联表达式.如果提供的是一个方法,则原生的 DOM event 会被作为第一个参数传入,同时这个 event 会带有 targetVM 属性,指向触发该事件的相应的 ViewModel: <div id="demo"> <a v-on="click: onClick">触发一个方法函数</a> <a v-on

  • Vue.JS入门教程之列表渲染

    你可以使用 v-repeat 指令来基于 ViewModel 上的对象数组渲染列表.对于数组中的每个对象,该指令将创建一个以该对象作为其 $data 对象的子 Vue 实例.这些子实例继承父实例的数据作用域,因此在重复的模板元素中你既可以访问子实例的属性,也可以访问父实例的属性.此外,你还可以通过 $index 属性来获取当前实例对应的数组索引. <ul id="demo"> <li v-repeat="items" class="ite

随机推荐