Vue-loader

Original address: https://lvyongbo.gitbooks.io/vue-loader/content/

 

What is vue-loader?

vue-loader is a loader that converts Vue components in the following format into JavaScript modules.
vue-loader Provides some really cool features:

• ES2015 is available by default;
• <style>Additional Webpack loaders such as SASS for SASS and Jade for <template> Jade are supported within each Vue component .
• Treat  static assets referenced within <style> and  <template> as module dependencies and process them with the Webpack loader.
• Emulate scoped CSS for each component.
• The development phase supports hot loading of components.
  Simply put, the combination of webpack and vue-loader gives you a more advanced, smarter, and extremely powerful front-end development model for authoring Vue applications.

What is Webpack?

Skip this section if you are familiar with Webpack, but for those who are new to it, take a look at this brief introduction:

Webpack  is a module packaging tool. In development, it treats each of a bunch of files as a module, finds dependencies between them, and packages them into static resources to be published.

For a basic example, imagine we have a bunch of CommonJS references. They don't run directly in the browser, so they need to be  bundled  into  <script> a single file inside the markup. Webpack can  require() do this for us based on the dependencies called.

In fact, Webpack can do even more, by  "loaders" allowing us to let Webpack bundle the output any way we want. E.g:

• Compile ES2015, CoffeeScript or TypeScript modules into ES5 CommonJS modules;

• Before compiling, the source code can be checked by linter.

• Compile Jade templates into HTML and inline JavaScript strings.

• Compile the SASS file into CSS, then insert the generated CSS into the  <style> tag, and then translate it into a JavaScript snippet.

• Handle image files referenced in HTML or CSS files, move them to arbitrary locations according to the configuration path, and name them according to the MD5 hash.

• If you have learned Webpack, you will know how powerful it is, and it can significantly improve the efficiency of your front-end development. Its main disadvantage is that the configuration method is a bit cumbersome, but with this user guide of mine,  Webpack + Vue + vue-loader most of the obstacles are basically cleared up when using it.

 

---

 

Vue component specs

*.vue Files are Vue components written by the user in HTML-like syntax. Each  *.vue file consists of three parts  <template>,  <script> and  <style>:

<template>
  <div class="example">{{ msg }}</div>
</template>
<script>exportdefault{data () {return{msg:'Hello world!'}}}</script>
<style>.example{color:red;}</style>

vue-loader Parse the file, extract each language block, pass them through the other loaders needed, and finally assemble it and put it back into the CommonJS module, which  module.exports is a Vue.js component object.

vue-loader By default, no language compiler is used, such as CSS pre-compilation and HTML template compilation language, etc. If you want to use these functions, you need to set  lang properties to achieve it. For example, you can use SASS in a component's style like this:

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

See [Using the Precompiler] for more details.

language block

<template>

• Default language: html .

• Almost every  *.vue file contains a  <template> block.

• <template> The content string inside will be extracted and used to compile  template options into the Vue component.

<script>

• Default language: js(default ES2015 is also supported via Babel).

• Almost every  *.vue file contains a  <script> block.

• Scripts are executed as if they were in a CommonJS environment (as if by bundling a normal .js module in WebPACK). That is, you can have  require() other dependencies. Since ES2015 is supported by default, you can also use  import and  export syntax.

• The script must export a Vue.js component options object, and also supports exporting an  Vue.extend() extension constructor created with , but first a normal object.

<style>

• Default language: css.

• *.vue Multiple  <style> tags are supported per  file.

• By default,  style-loader the content will be extracted and loaded into  <head> a  <style> tag within the document. This is also possible [by configuring Webpack to extract all styles within a component into a single CSS file].

Src Imports

If you like to  *.vue split your components into multiple files, then you can  src import external files with properties, the code is as follows:

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

Note that  src imports follow the same path resolution rules as CommonJS  require() calls, which means you need  ./ a relative path to start with, and you can import resources directly from installed NPM packages, for example:

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

syntax highlighting

开发中的第一件事，你可能想让 *.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 。 如果你还不熟悉这个新语言的话，最好去学一下：

• Babel - Learn ES2015
• ES6 Features
• Exploring ES6 (book)

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

<script>import ComponentA from'./ComponentA.vue'import ComponentB from'./ComponentB.vue'exportdefault{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 插件处理，例如， 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 ，热加载自动启用。