Vue + Webpack + Vue-loader学习教程之功能介绍篇

Vue-loader 是什么？

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

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

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

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

Webpack 是什么？

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

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

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

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

  1. 编译 ES2015、CoffeeScript 或 TypeScript 模块成 ES5 CommonJS 的模块；
  2. 编译之前，可以通过 linter 校验源代码。
  3. 编译 Jade 模板成 HTML 并内联 JavaScript 字符串。
  4. 编译 SASS 文件成 CSS，然后把生成的CSS插入到 <style> 标签内，然后再转译成 JavaScript 代码段。
  5. 处理在 HTML 或 CSS 文件中引用的图片文件，根据配置路径把它们移动到任意位置，根据 MD5 hash 命名。
  6. 如果你学会了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 ，你也可以用 import 和 export 语法。
  • 该脚本必须导出一个 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 Text ， Atom ， Vim ， Visual Studio Code ， Brackets ，和 JetBrains products （WebStorm，PhpStorm，等）都有支持语法高亮显示的插件。如果在 Vue 组件内没有使用任何预编译器，那么编辑器就把 *.vue 文件当成普通的 HTML 文件一样。

注释

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

项目设置

语法高亮

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

使用 vue-cli

创建项目的时候推荐使用脚手架工具，可以用 vue-loader 和 vue-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>

注意

在同一组件内，你能同时用有作用域和无作用域的样式：

<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 插件处理，例如， autoprefixer 或 CSSNext。

在 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 ，热加载自动启用。

总结

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • Vue + Webpack + Vue-loader学习教程之相关配置篇

    前言 之前已经介绍过了Vue + Webpack + Vue-loader的相关功能介绍,大家可以点击这篇文章了解详情.下面就来看看相关配置篇,感兴趣的可以参考学习. 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue-loader 允许你用其它的 Webpack 加载器去处理 Vue 组件一部分代码.它会根据 lang 属性自动用适当的加载器去处理. CSS 例如,我们编译用 SASS 编译 <style> 标签: npm install sass-l

  • 深入理解vue-loader如何使用

    深入理解vue-loader如何使用

    .vue格式的文件使用类似HTML的语法描述vue组件.每个.vue文件包含三种最基本的语言块:, <template> <div class="example">{{ msg }}</div> </template> <script> export default { data () { return { msg: 'Hello world!' } } } </script> <style> .exa

  • Vue + Webpack + Vue-loader学习教程之功能介绍篇

    Vue + Webpack + Vue-loader学习教程之功能介绍篇

    Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue 组件转化成JavaScript模块. vue-loader 提供了一些非常酷炫的特性: ES2015默认可用: 在每个 Vue 组件内支持其他的 Webpack 加载器,如用于<style>的 SASS 和用于<template> 的 Jade. 把 <style> 和 <template> 内引用的静态资源作为模块依赖项对待,并用Webpack 加载器处理. 对每个

  • Vue+webpack项目基础配置教程

    最近在学习webpack,跟着课程一个单页面应用,在这里记录一下.这个部分主要讲了如何配置webpack的环境,以及webpack dev的配置. 记录比较粗略,后续会更新. 1.开发环境:vscode,node.js,vue.js,webpack 大家自己安装一下node.js可以参考菜鸟教程 使用的IDE是 VScode 2.项目初始化 快捷键ctrl+` 打开vscode控制台 vscode界面 2.1安装webpack vue vue-loader npm init npm i webp

  • Vue + OpenLayers 快速入门学习教程

    Vue + OpenLayers 快速入门学习教程

    Openlayers 是一个模块化.高性能并且功能丰富的WebGIS客户端的JavaScript包,用于显示地图及空间数据,并与之进行交互,具有灵活的扩展机制. 简单来说,使用 Openlayers(后面简称ol) 可以很灵活自由的做出各种地图和空间数据的展示.而且这个框架是完全免费和开源的. 前言 本文记录 Vue 使用 OpenLayers 入门,使用 OpenLayers 创建地图组件,分别使用 OpenLayers 提供的地图和本地图片做为地图. Overview OpenLayers

  • vue中的inject学习教程

    最近看源码有一段对于整合参数的代码, normalizeProps(child, vm) normalizeInject(child, vm) normalizeDirectives(child) 想象里边的Inject很少用到,所以查了一下资料, 通常组件传参是有两种情况 父子组件进行传参,这时候通常利用props 非父子组件传参,这时候一般利用vuex 会有一种情况隔代组件传参,这时候可以利用props一层一层传递下去,但是代码就比较乱了 所以就有了 provide/inject 进行隔代组

  • JavaScript的Vue.js库入门学习教程

    JavaScript的Vue.js库入门学习教程

    Vue是一个小巧轻便的javascript库.它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷.实际上,一直让Vue引以为豪的是它的便捷性.执行力.灵活性. 这篇教程的目的就是通过一些例子,让你能够概览一些基本的概念和特性.在接下来的其他教程里,你会学到Vue更多的有用的特性,从而用Vue搭建一个可扩展的项目. MVVM 数据绑定 MVVM的本质是通过数据绑定链接View和Model,让数据的变化自动映射为视图的更新.Vue.js在数据绑定的API设计上借鉴了Angula

  • Vue.js 2.0学习教程之从基础到组件详解

    Vue.js 2.0学习教程之从基础到组件详解

    前言 最近这段时间里不停的做着Vue的技术分享,虽然不是什么深层次的代码底能架构,如果底层架构真说出来,我就不会做Vue.js 2.0从基础到组件了,就会分享Vue从底层到还是到底层.我相信能来看我这次分享的朋友都是在工作开发层面上面临着一些问题.此次分享我们先抛开Vue - router和Vuex,很多朋友都觉得Vuex和router比较难,大错特错! 对Vue 2.0的介绍 我对Vue 2.0认知,能it前端框架的认知,在我们不算底层原理的情况下,什么才是精髓,那就是基础的方法和一些api介

  • socket.io学习教程之基础介绍（一）

    socket.io学习教程之基础介绍（一）

    前言 Web端与服务器间的实时数据传输的是一个很重要的需求,但最早只能通过AJAX轮询询实现.在WebSocket标准没有推出之前,AJAX轮询是唯一可行的方式(通过Flash浏览器也可以,但这里不做讨论).AJAX轮询原理是设置定时器,定时通过AJAX同步服务器数据.这种方式存在延时且对服务端造成很大负载.直到2011年,IETF才标准化WebSocket--一种基于TCP套接字进行收发数据的协议.现如今主流浏览器均已支持WebSocket. socket.io将数据传输部分独立出来形成了en

  • Netty学习教程之基础使用篇

    什么Netty? Netty是由JBOSS提供的一个java开源框架.Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客户端程序. 也就是说,Netty 是一个基于NIO的客户.服务器端编程框架,使用Netty 可以确保你快速和简单的开发出一个网络应用,例如实现了某种协议的客户,服务端应用.Netty相当简化和流线化了网络应用的编程开发过程,例如,TCP和UDP的socket服务开发. 我们下面编写四个类 1.用于接收数据的服务器端Socket

  • Spring boot学习教程之快速入门篇

    Spring boot学习教程之快速入门篇

    前言 首先来说一下为什么使用 Spring Boot,之前我用的后端 WEB 开发框架一直都是 PlayFramework的 1.2.7 版本(目前已经停止更新), 不得不说这个框架非常好用,但是由于 Play2.x 版本和 Play1.x 版本差别巨大,并且不兼容,所以现在面临着选择新的框架的问题,问了下身边的朋友,发现他们都在用 Spring ,然而我发现 Spring 的话,经常要配置各种东西,习惯了 Play 的简单明了的配置方式,确实有些不习惯 Spring ,这个时候发现了 Spri

随机推荐