5.2.Vue-loader输入分析.md

vue-loader的输入

• 既然 vue-loader 是将 .vue 变成 .bundle.js 的工具，那它的输入自然就是 .vue 的文件。
• 这里是官方示例的一个 .vue 文件(其中注释是我加上去了)

//这里是页面的html结构部分
<template lang="pug">
div(ok)
  h1(:class="$style.red") hello
</template>

//这里是页面的js逻辑部分
<script>
export default {
  data () {
    return {
      msg: 'fesfff'
    }
  }
}
</script>

//这里是页面的css样式部分，可以使用less、scss等来编写
<style module>
.red {
  color: red;
}
</style>

//这里是页面的自定义部分，可以配置其他loader将其编译成任意浏览器可以执行的代码
<foo>
export default comp => {
  console.log(comp.options.data())
}
</foo>

vue-loader输入分析

• 写过 vue 的朋友应该都知道，上面只是一个简单的 vue 文件，其实它还支持很多复杂的特性，但它还是有一些基本准则的。如下：

• <temlate>语言块

• 默认语言：html ，还可以配置支持 pug 等模版引擎

• 每个 .vue 文件最多包含一个 <template> 块

• <script> 语言块

• 默认语言：js ，还可以配置支持 .ts 语法

• 每个 .vue 文件最多包含一个 <script> 块

• 脚本必须导出 Vue 组件对象，也可以导出由 Vue.extend() 创建的扩展对象

• <style> 语言块

• 默认语言：css ，还可以配置支持 less 等样式语言

• 一个 .vue 文件可以包含多个 <style> 标签

• 可以使用 scoped 或者 module 属性来帮助你将样式封装到当前组件

• 自定义语言块

• 可以在 .vue 文件中添加额外的自定义块来实现项目的特殊需求，通过 webpack 在 vue-loader 的选项 loaders 中指定 webpack loaders来实现

• 一个 .vue 文件可以包含多个自定义语言块

• 有的项目可能代码结构不一样，.vue文件可以灵活的通过 src 属性导入外部文件来实现

<template src='./template.html'></template>
<style src='./style.css'></style>
<script src='./script.js'></script>

小结

• 本节通过 vue-loader 的官方示例代码 source.vue 温习了一遍 vue 语言代码的基本格式准则， 为后面分析 vue-loader 如何将 .vue 变成浏览器可执行的 .bundle.js文件打下基础。