Vue Loader
Vue Loader 是一个 webpack 的 loader,它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件
作用:解析和转换 .vue 文件,提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template,再分别把它们交给对应的 Loader 去处理。
.vue 文件是一个自定义的文件类型,用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>,允许添加可选的自定义块
vue-loader 会解析.vue文件,提取每个语言块,如有必要会通过其它 loader 处理,最后将他们组装成一个 CommonJS 模块,module.exports 出一个 Vue.js 组件对象。
vue-loader 支持使用非默认语言,比如 CSS 预处理器,预编译的 HTML 模版语言,通过设置语言块的 lang 属性。例如,你可以像下面这样使用 Sass 语法编写样式:
<style lang="sass">
/* write Sass! */
</style>
语言块
<template>
默认语言:
html
。每个
.vue
文件最多包含一个<template>
块。内容将被提取为字符串,将编译并用作 Vue 组件的
template
选项。
<script>
默认语言:
js
(在检测到babel-loader
或buble-loader
配置时自动支持ES2015)。每个
.vue
文件最多包含一个<script>
块。该脚本在类 CommonJS 环境中执行 (就像通过 webpack 打包的正常 js 模块),这意味着你可以
require()
其它依赖。在 ES2015 支持下,你也可以使用import
和export
语法。脚本必须导出 Vue.js 组件对象。也可以导出由
Vue.extend()
创建的扩展对象,但是普通对象是更好的选择。
<style>
默认语言:
css
。一个
.vue
文件可以包含多个<style>
标签。<style>
标签可以有scoped
或者module
属性 (查看 CSS 作用域和 CSS Modules) 以帮助你将样式封装到当前组件。具有不同封装模式的多个<style>
标签可以在同一个组件中混合使用。默认情况下,将会使用
style-loader
提取内容,并通过<style>
标签动态加入文档的<head>
中,也可以配置 webpack 将所有 styles 提取到单个 CSS 文件中。