Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇

时间 2020-07-10

标签 vue webpack loader 系列教程功能介绍繁體版

原文原文链接

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

Vue-loader 是什么？

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

vue-loader 提供了一些很是酷炫的特性：css

ES2015默承认用；
在每一个 Vue 组件内支持其余的 Webpack 加载器，如用于<style>的 SASS 和用于<template> 的 Jade。
把 <style> 和 <template> 内引用的静态资源做为模块依赖项对待，并用Webpack 加载器处理。
对每一个组件模拟有做用域的CSS。
开发阶段支持组件的热加载。
简单来讲，webpack 和 vue-loader 的组合为你创做Vue应用的一个更先进、更灵巧的极其强大的前端开发模式。

Webpack 是什么？

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

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

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

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

编译 ES201五、CoffeeScript 或 TypeScript 模块成 ES5 CommonJS 的模块；git
编译以前，能够经过 linter 校验源代码。es6
编译 Jade 模板成 HTML 并内联 JavaScript 字符串。github
编译 SASS 文件成 CSS，而后把生成的CSS插入到 <style> 标签内，而后再转译成 JavaScript 代码段。web
处理在 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 ，你也能够用 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-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>

父组件的有做用域的CSS和子组件的有做用域的CSS将同时影响子组件。
有做用域的样式对其余部分没有影响。
有做用域限定的样式不排除类的须要. 因为浏览器渲染方式支持多种不一样的CSS选择器，加了做用域的 p { color: red } 会慢好多倍（即，和属性选择器组合时候的时候）。若是你用类或者id选择器，好比 .example { color: red } ，你就能消除性能损失。这里有个练习场，你能够比较测试下其中的差别。
在递归组件中当心后代选择器！ 对于 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 ，热加载自动启用。