Vue-loader输入分析

5.2.Vue-loader输入分析.md

@@ -0,0 +1,76 @@
+---
+layout: post
+title: 4.2.Vue-loader输入分析
+category: 写教程
+tag: vue-loader
+exception: 
+readtime: 12
+---
+
+## vue-loader的输入
+* 既然 `vue-loader` 是将 `.vue` 变成 `.bundle.js` 的工具，那它的输入自然就是 `.vue` 的文件。
+* 这里是官方示例的一个 `.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` 属性导入外部文件来实现
+```vue
+<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`文件打下基础。