vue.loader是什么?

vue.loader是什么?下面本篇文章给大家介绍一下vue.loader。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

vue.loader是什么?

简单的说,他就是基于webpack的一个的loader,解析和转换 .vue 文件,提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template,再分别把它们交给对应的 Loader 去处理,核心的作用,就是提取,划重点。

至于什么是webpack的loader,其实就是用来打包、转译js或者css文件,简单的说就是把你写的代码转换成浏览器能识别的,还有一些打包、压缩的功能等。

这是一个.vue单文件的demo

vue文件式例

<template>
  <div class="example">{{ msg }}</div>
</template>
 
<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>
 
<style>
.example {
  color: red;
}
</style>

vue-loader 的作用(引用自官网)

  • 允许为 Vue 组件的每个部分使用其它的 webpack loader,例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug;

  • 允许在一个 .vue 文件中使用自定义块,并对其运用自定义的 loader 链;

  • 使用 webpack loader 将 <style> 和 <template> 中引用的资源当作模块依赖来处理;

  • 为每个组件模拟出 scoped CSS;

  • 在开发过程中使用热重载来保持状态。

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是vue.loader是什么?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读