Vue + Webpack + Vue-loader 功能介绍

ゝ一纸荒年。 2022-07-13 06:21 299阅读 0赞

## Vue-loader 是什么？ ##

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

![这里写图片描述][SouthEast]

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

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

## Webpack 是什么？ ##

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

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

![这里写图片描述][SouthEast 1]

列举一个基本例子，设想我们有一堆的 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 ：

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

### 语言块 ###

#### `<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` 属性导入外部文件，代码如下：

需要注意的是 `src` 导入要遵循和 CommonJS 的 `require()` 调用一样的路径解析规则，这就是说你需要用以 `./` 开头的相对路径，并且你可以直接从已安装的 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 。 如果你还不熟悉这个新语言的话，最好去学一下：

*  [Babel - Learn ES2015][]
 *  [ES6 Features][]
 *  [Exploring ES6 (book)][Exploring ES6 _book]

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

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

### 转译正常的 `.js` 文件 ###

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

### 用 `.babelrc` 文件来配置 Babel ###

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

--------------------

# Scoped CSS #

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

转换成：

#### 注意 ####

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

1.  父组件的有作用域的CSS和子组件的有作用域的CSS将同时影响子组件。
2.  有作用域的样式对其他部分没有影响。
3.  **有作用域限定的样式不排除类的需要**. 由于浏览器渲染方式支持多种不同的CSS选择器，加了作用域的 `p { color: red }` 会慢好多倍 （即，和属性选择器组合时候的时候）。如果你用类或者id选择器，比如 `.example { color: red }` ，你就能消除性能损失。[这里有个练习场][Link 1] ，你可以比较测试下其中的差异。
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` ，热加载自动启用。

[SouthEast]: /images/20220713/1a23a8d77a034f319bd9e5945f658da8.png
[Webpack]: http://webpack.github.io/
[SouthEast 1]: /images/20220713/ec256d3d237b4c87bf20d9a11e75c05d.png
[Sublime Text]: https://github.com/vuejs/vue-syntax-highlight
[Atom]: https://atom.io/packages/language-vue
[Vim]: https://github.com/posva/vim-vue
[Visual Studio Code]: https://marketplace.visualstudio.com/items/liuji-jim.vue
[Brackets]: https://github.com/pandao/brackets-vue
[JetBrains products]: https://plugins.jetbrains.com/plugin/8057
[Babel - Learn ES2015]: https://babeljs.io/docs/learn-es2015/
[ES6 Features]: https://github.com/lukehoban/es6features
[Exploring ES6 _book]: https://leanpub.com/exploring-es6
[.babelrc]: https://babeljs.io/docs/usage/babelrc/
[Link 1]: http://stevesouders.com/efws/css-selectors/csscreate.php
[PostCSS]: https://github.com/postcss/postcss
[autoprefixer]: https://github.com/postcss/autoprefixer
[CSSNext]: http://cssnext.io/