就这？vue-loader其实很简单

618 08-03

事情的起源被人问到，一个以.vue结尾的文件，是如何被编译然后运行在浏览器中的？突然发现，对这一块模糊的很，而且看mpvue的文档，甚至小程序之类的都是实现了自己的loader，所以十分必要抽时间去仔细读一读源码，顺便总结一番。

一、vue文件

vue文件是一个自定义的文件类型，用类HTML语法描述一个vue组件，每个.vue组件包含三种类型的顶级语言快< template>< script>< style>，还允许添加自定义的模块；

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>

二、vue-loader

vue-loader会解析文件，提取出每个语言块，如果有必要会通过其他loader处理，最后将他们组装成一个commonjs模块；module.exports出一个vue.js组件对象；

1：< temlate>语言块
（1）默认语言：html
（2）每个.vue文件最多包含一个< template>块
（3）内容将被提取为字符串，将编译用作VUE组件的template选项；
2：< script>
（1）默认语言：JS（在监测到babel-loader或者buble-loader配置时，自动支持ES2015）
（2）每个.vue文件最多包含一个< script>块
（3）该脚本在类CommonJS环境中执行（就像通过webpack打包的正常JS模块）。所以你可以require()其他依赖。在ES2015支持下，也可以使用import跟export语法
（4）脚本必须导出Vue.js组件对象，也可以导出由VUE.extend()创建的扩展对象；但是普通对象是更好的选择；
3：< style>
（1）默认语言：css
（2）一个.vue文件可以包含多个< style>标签
（3）这个标签可以有 scoped 或者 module属性来帮助你讲样式封装到当前组件；具有不同封装模式的多个< style>标签可以在同一个组件中混合使用
（4）默认情况下，可以使用style-loader提取内容，并且通过< style>标签动态假如文档的< head>中，也可以配置webpack将所有的styles提取到单个CSS文件中；
4：自定义块
可以在.vue文件中添加额外的自定义块来实现项目的特殊需求；例如< docs>块；vue-loader将会使用标签名来查找对应的webpack loaders来应用到对应的模块上；webpack需要在vue-loader的选项loaders中指定；

vue-loader支持使用非默认语言，比如CSS预处理器，预编译的HTML模板语言，通过设置语言块的lang属性：

<style lang='sass'>
    /*sass*/
</style>

vue-loader作用：

解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template，再分别把他们交给对应的loader去处理。

用途：

js可以写es6,style样式可以写scss或less、template可以加jade等。

更多的学习总结就来智一面吧，海量知识等着你

进入学习

标签： Vue.js