原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/

Vue-loader 是什么?

vue-loader 是一个加载器,能把如下格式的 Vue 组件转化成JavaScript模块。



vue-loader 提供了一些非常酷炫的特性:

  • ES2015默认可用;
  • 在每个 Vue 组件内支持其他的 Webpack 加载器,如用于<style>的 SASS 和用于<template> 的 Jade。
  • <style><template> 内引用的静态资源作为模块依赖项对待,并用Webpack 加载器处理。
  • 对每个组件模拟有作用域的CSS。
  • 开发阶段支持组件的热加载。

    简单来说,webpack 和 vue-loader 的组合为你创作Vue应用的一个更先进、更灵巧的极其强大的前端开发模式。

Webpack 是什么?

如果你熟悉 Webpack 那就跳过这部分吧,但对于那些新手们,请看下这个简单介绍吧:

Webpack 是一个模块打包工具。在开发中,它把一堆文件中每个都作为一个模块处理,找出它们间的依赖关系,并打包成待发布的静态资源。

列举一个基本例子,设想我们有一堆的 CommonJS 的引用。它们是不能在浏览器直接运行,所以需要把它们 捆绑<script> 标记内的单一文件。Webpack 就能按照 require() 调用的依赖关系为我们做到这点。

实际上,Webpack 能做的更多,通过 "loaders" 我们能让 Webpack 按照我们想要的任何方式打包输出。例如:

  • 编译 ES2015、CoffeeScript 或 TypeScript 模块成 ES5 CommonJS 的模块;

  • 编译之前,可以通过 linter 校验源代码。

  • 编译 Jade 模板成 HTML 并内联 JavaScript 字符串。

  • 编译 SASS 文件成 CSS,然后把生成的CSS插入到 <style> 标签内,然后再转译成 JavaScript 代码段。

  • 处理在 HTML 或 CSS 文件中引用的图片文件,根据配置路径把它们移动到任意位置,根据 MD5 hash 命名。

  • 如果你学会了Webpack,就会知道它有多么强大,它非常显著地改善你前端开发的效率。它主要的缺点是配置方式有点麻烦,但是有了我这份使用指南,那使用 Webpack + Vue + vue-loader 的时候,基本上就扫清了大多数障碍了。


Vue 组件规格

*.vue 文件是用户用 HTML-like 的语法编写的 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>

vue-loader 解析文件,提取每个语言块,让他们通过需要的其他 loaders ,最后组装起来,放回 CommonJS 的模块,此模块的 module.exports 就是个 Vue.js 组件对象。

vue-loader 默认用没有用语言编译器,想CSS 预编译和HTML模板编译语言等,如果想用这些功能,需要设置 lang 属性的来实现。例如,你可以在组件的样式中这样用 SASS :

<style lang="sass">
/* 编写 SASS! */
</style>

更多细节查看 [使用预编译器]。

语言块

<template>

  • 默认语言:html

  • 每个 *.vue 文件几乎都包含一个 <template> 块。

  • <template> 内的内容字符串会被提取出来,用来编译进 Vue 组件内的 template 选项。

<script>

  • 默认语言:js(默认ES2015也会通过Babel支持)。

  • 每个 *.vue 文件几乎都包含一个 <script> 块。

  • 脚本就像在CommonJS的环境中一样被执行(就像通过WebPACK中捆绑一个正常的.js模块)。就是说你可以 require() 其他的依赖项。由于默认支持 ES2015 ,你也可以用 importexport 语法。

  • 该脚本必须导出一个 Vue.js 组件选项对象,也支持导出一个用 Vue.extend() 创建的扩展构造函数,但首先是导出普通对象。

<style>

  • 默认语言:css

  • 每个 *.vue 文件支持多个 <style> 标签。

  • 默认,会通过 style-loader 把内容提取并加载到文档的 <head> 内的 <style> 标签内。这也是可以[通过配置 Webpack 使组件内所有样式提取到一个单一的CSS文件]。

Src Imports

如果你喜欢把你的 *.vue 组件拆分成多个文件,那么你可以用 src 属性导入外部文件,代码如下:

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

需要注意的是 src 导入要遵循和 CommonJS 的 require() 调用一样的路径解析规则,这就是说你需要用以 ./ 开头的相对路径,并且你可以直接从已安装的 NPM 包内导入资源,例如:

<!-- 从已安装的 "todomvc-app-css" NPM 包内导入文件 -->
<style src="todomvc-app-css/index.css">

语法高亮显示

开发中的第一件事,你可能想让 *.vue 组件能高亮显示。现阶段,在 Sublime TextAtomVimVisual Studio CodeBrackets ,和 JetBrains products (WebStorm,PhpStorm,等)都有支持语法高亮显示的插件。如果在 Vue 组件内没有使用任何预编译器,那么编辑器就把 *.vue 文件当成普通的 HTML 文件一样。

注释

在每个代码块内,注释的时候,需要使用各自语言的注释语法去注释(HTML、CSS、JavaScript、Jade 等)。在文件最顶部注释的时候用HTML的注释语法:<!— 在这里写注释的内容 -->


项目设置

语法高亮

开发中的第一件事,你可能想让 *.vue 组件能高亮显示。现阶段,在 Sublime TextAtomVimVisual Studio CodeBrackets ,和 JetBrains products (WebStorm,PhpStorm,等)都有支持语法高亮显示的插件。如果在 Vue 组件内没有使用任何预编译器,那么编辑器就把 *.vue 文件当成普通的 HTML 文件一样。

使用 vue-cli

创建项目的时候推荐使用脚手架工具,可以用 vue-loadervue-cli,命令行如下:

npm install -g vue-cli
vue init webpack-simple hello-vue
cd hello-vue
npm install
npm run dev # 一切就绪!

ES2015

vue-loader 检测到 babel-loader 或者 buble-loader 在项目中存在的时候,将会用它们去处理所有 *.vue 文件的 <script> 部分,所以我们就可以在 Vue 组件中用 ES2015 。 如果你还不熟悉这个新语言的话,最好去学一下:

这里是一个引用其他 Vue 组件的典型模式,

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue' export default {
components: {
ComponentA,
ComponentB
}
}
</script>

在这里用的就是 ES2015 精简的语法定义个子组件。{ ComponentA } 是指 { ComponentA: ComponentA } 。Vue会被自动转为 component-a, 所以你就能在模板中引入组件 <component-a>

转译正常的 .js 文件

由于 vue-loader 只能处理 *.vue 文件,你需要在配置文件中告诉 Webpack 用 babel-loader 或者 buble-loader 。这点,可以用项目脚手架工具 vue-cli

.babelrc 文件来配置 Babel

.babelrc 可以控制 babel-loader ,并推荐这种方式来配置 Babel 预设插件。


Scoped CSS

<style> 标签有 scoped 属性的时候,它的 CSS 就只能作用于当前的组件。这就像样式被封装在 Shadow DOM 内。这是用 PostCSS 转译实现的。如下:

<style scoped>
.example {
color: red;
}
</style> <template>
<div class="example">hi</div>
</template>

转换成:

<style>
.example[_v-f3f3eg9] {
color: red;
}
</style> <template>
<div class="example" _v-f3f3eg9>hi</div>
</template>

注意

  1. 在同一组件内,你能同时用有作用域和无作用域的样式:
<style>
/* global styles */
</style> <style scoped>
/* local styles */
</style>
  1. 父组件的有作用域的CSS和子组件的有作用域的CSS将同时影响子组件。

  2. 有作用域的样式对其他部分没有影响。

  3. 有作用域限定的样式不排除类的需要. 由于浏览器渲染方式支持多种不同的CSS选择器,加了作用域的 p { color: red } 会慢好多倍 (即,和属性选择器组合时候的时候)。如果你用类或者id选择器,比如 .example { color: red } ,你就能消除性能损失。这里有个练习场 ,你可以比较测试下其中的差异。

  4. 在递归组件中小心后代选择器! 对于 CSS 规则的选择器 .a .b,如果匹配 .a 的元素内包含一个递归子组件,那么子组件中所有包含 .b 的元素都会被匹配到。


PostCSS

任何通过 vue-loader 处理过的 CSS 都再用 PostCSS重写有作用域限制的 CSS 部分。你也能添加自定义的 PostCSS 插件处理,例如, autoprefixerCSSNext

在 Webpack 1.x 中的用法如下:

// webpack.config.js
module.exports = {
// 其他配置...
vue: {
// 使用用户自定义的 postcss 插件
postcss: [require('postcss-cssnext')()]
}
}

Webpack 2.x 中的用法:

// webpack.config.js
module.exports = {
// 其他配置...
plugins: [
new webpack.LoaderOptionsPlugin({
vue: {
// 使用用户自定义插件
postcss: [require('postcss-cssnext')()]
}
})
]
}

除了接受插件的数组,postcss 选项也接受:

  • 返回值是插件数组的方法;

  • 包含被传递到PostCSS处理器选项的对象。当你的项目依赖于自定义解析器或编译器的时候,这就会很有用。

  postcss: {
plugins: [...], // list of plugins
options: {
parser: sugarss // use sugarss parser
}
}

热加载

“热加载” 不只是当你修改了文件简单地重新加载下页面。当启用了热加载功能,编写完 *.vue 文件后,组件的所有的实例对象被替换,而页面并没有重新加载。仍然保持应用原有的状态。这在你调整模板或修改组件样式的时候,大大改善了开发体验。

当使用项目的脚手架工具 vue-cli ,热加载自动启用。

Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇的更多相关文章

  1. [vue]webpack&vue组件工程化实践

    [vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...

  2. [js高手之路] es6系列教程 - 对象功能扩展详解

    第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...

  3. ABP框架搭建项目系列教程基础版完结篇

    返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 经过前面十二篇的基础教程,现在终于该做个总结了. 回顾 第一篇,我们建议新手朋友们先通过ABP官网的启动模板生成解决方案,因为这样 ...

  4. Fiddler抓包使用教程-基本功能介绍

    转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/72932886 本文出自[赵彦军的博客] Fiddler 基本页面 会话列表功能介绍 ...

  5. vue组件(Vue+webpack项目实战系列之三)

    组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.特别对于大型应用开发来说,尽量组件化,并且先造好轮子库,不要重复去写组件,这会显著提升项目 ...

  6. vue全家桶(Vue+Vue-router+Vuex+axios)(Vue+webpack项目实战系列之二)

    Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了,直奔主题. 一.Vue 系列一已经用vue-cli搭建了Vue项目,此处就不赘述了. 二.Vue-router Vue的路由,先献上文档(http ...

  7. 【Python3.6+Django2.0+Xadmin2.0系列教程之三(入门篇-下)】学生信息管理系统

    上一篇我们已经初步的构建起了一个学生管理系统的模型,现在接着来继续完善它吧. 1.上传图片/文件等资源 有时候需要添加一些附件,例如,新生刚入学,大家相互之间还不熟悉,希望能通过照片来加深印象,并且方 ...

  8. HelloDjango 系列教程:第 04 篇:Django 迁移、操作数据库

    文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 我们已经编写了博客数据库模型的代码,但那还只是 Python 代码而已,django 还没有把它翻译成数据库语言,因此实际上这 ...

  9. Eureka系列(一)Eureka功能介绍

    Eureka核心功能点 服务注册(register):   Client会发送一次Rest请求给Server端来实现注册,Server接受到请求会将服务信息存储起来,并将注册信息给同集群其他Serve ...

随机推荐

  1. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  2. javascript:逆波兰式表示法计算表达式结果

    逆波兰式表示法,是由栈做基础的表达式,举个例子: 5 1 2 + 4 * + 3 -  等价于   5 + ((1 + 2) * 4) - 3 原理:依次将5 1 2 压入栈中, 这时遇到了运算符 + ...

  3. iOS开发之多种Cell高度自适应实现方案的UI流畅度分析

    本篇博客的主题是关于UI操作流畅度优化的一篇博客,我们以TableView中填充多个根据内容自适应高度的Cell来作为本篇博客的使用场景.当然Cell高度的自适应网上的解决方案是铺天盖地呢,今天我们的 ...

  4. 《JavaScript设计模式与开发实践》整理

    最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...

  5. APP多版本共存,服务端如何兼容?

    做过APP产品的技术人员都知道,APP应用属于一种C/S架构的,所以在做多版本兼容,升级等处理则比较麻烦,不像web应用那么容易.下面将带大家分析几种常见的情况和应对方式: 小改动或者新加功能的 这种 ...

  6. JavaScript中String对象的方法介绍

    1.字符方法 1.1 charAt() 方法,返回字符串中指定位置的字符. var question = "Do you like JavaScript?"; alert(ques ...

  7. AFNetworking报错"_UTTypeCopyPreferredTagWithClass", referenced from: _AFContentTypeForPathExtens

    问题: 在和Unity交互的过程中,从Unity开发工具打包出来的项目文件,在添加AFNetworking库,运行时报出以下错误: Undefined symbols for architecture ...

  8. iOS之解决崩溃Collection <__NSArrayM: 0xb550c30> was mutated while being enumerated.

    崩溃提示:Terminating app due to uncaught exception 'NSGenericException', reason: '*** Collection <CAL ...

  9. Android studio使用gradle动态构建APP(不同的包,不同的icon、label)

    最近有个需求,需要做两个功能相似的APP,大部分代码是一样的,只是界面不一样,以前要维护两套代码,比较麻烦,最近在网上找资料,发现可以用gradle使用同一套代码构建两个APP.下面介绍使用方法: 首 ...

  10. T-SQL字符串相加之后被截断的那点事

    本文出处:http://www.cnblogs.com/wy123/p/6217772.html 字符串自身相加, 虽然赋值给了varchar(max)类型的变量,在某些特殊情况下仍然会被“截断”,这 ...