A deep understanding of how to use vue-loader and vue-loader

A deep understanding of how to use vue-loader and vue-loader

. Vue format files use HTML-like syntax to describe vue components. Each. vue file contains three basic language blocks :,

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

Vue-loader parses each language block in the file, transmits it to other loaders, and finally outputs it to module. exports, which is the CommonJS module of the configuration object of the vue component.

Vue-loader supports css pre-compilation, html compilation templates, and other language formats by specifying the lang attribute of the language block. For example, use sass in the style block of the component.

<style lang="sass"> /* write SASS! */</style>

Language Block

1. Default language: html
2. Each *. vue can contain a maximum of one block.
3. The content in the block is extracted as a string.

Src Introduction

If you are used to splitting the *. vue component into multiple files, you can use the src attribute of the language block to introduce the extension file to the component.

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

Syntax highlighting

You can use the *. vue file as HTML in the editor to highlight the syntax.

Use vue-cli

We recommend that you use vue-cli and vue-loader in combination to build a project.

npm install -g vue-clivue init webpack-simple hello-vuecd hello-vuenpm installnpm run dev # ready to go!

ES2015

When vue-loader detects the existence of babel-loader or buble-loader in the same project, it will use them to process *. vue files

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

We can use the abbreviation of ES2015 object to define child components. {ComponentA} is the abbreviation of {ComponentA: ComponentA. Vue will automatically convert the key to component-a, so we can introduce the component in.

ES2015

* The content of the vue file will be compiled into the js rendering function and processed by the Buble and other custom generation tools supporting ES2015 features. So we can use ES2015 features such as Object shorthand properties and computed properties.

<div :class="[{ active: active }, isButton ? prefix + '-button' : null]">

Can be abbreviated:

<div :class="{ active, [`${prefix}-button`]: isButton }">

You can use the features supported by the buble custom template.

Process common js files

Because vue-loader only processes *. vue files, you need to configure babel-loader or buble-loader in the webpack configuration file to process common js files. Vue-cli can do these tasks in the project.

Configure babel in the. babelrc File

Local css

When a style label has the scoped attribute, its css is only applied to the elements of the current component.

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

Convert:

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

Note:

1. The same component can contain local and global styles.

<style>/* global styles */</style><style scoped>/* local styles */</style>

1. The root node of the Child component is affected by the local css style of the parent component and the component.
2. Partials are not affected by scoped styles.
3. Class selector is still required with a local style.
4. Child selector is used in components that contain iterative components. A css rule about. a. B. If a child component is used in the label of Class a, the label of Class B in the child component will also apply this rule.

CSS Modularization

English tutorial

CSS Modules facilitates css modularization. vue-loader provides Modules to Implement css modular integration by imitating the css scope.

Used in

<style module>.red { color: red;}.bold { font-weight: bold;}</style>

In this way, the CSS Module mode is enabled, and the class object will be injected into the component as the $ style attribute, and dynamic class binding will be performed in it.

<template> <p :class="$style.red">  This should be red </p></template>

Classes in the style are calculated attributes. You can also use arrays or object syntax in: class.

<template> <div>  <p :class="{ [$style.red]: isRed }">   Am I red?  </p>  <p :class="[$style.red, $style.bold]">   Red and bold  </p> </div></template>

Or use it in js.

<script>export default { created () {  console.log(this.$style.red)  // -> "_1VyoJ-uZOjlOxP7jWUy19_0"  // an identifier generated based on filename and className. }}</script>

Custom injection name

A vue component can contain multiple

<style module="a"> /* identifiers injected as $a */</style><style module="b"> /* identifiers injected as $b */</style>

Configure css-loader

Use css-loader to process CSS Modules. The following is a css-loader pair.

{ modules: true, importLoaders: true, localIdentName: '[hash:base64]'}

Use the css modules configuration item of vue-loader to customize css-loader

// wepback 1vue: { cssModules: {  // overwrite local ident name  localIdentName: '[path][name]---[local]---[hash:base64:5]',  // enable camelCase  camelCase: true }}// webpack 2module: { rules: [  {   test: '\.vue$',   loader: 'vue',   options: {    cssModules: {     localIdentName: '[path][name]---[local]---[hash:base64:5]',     camelCase: true    }   }  } ]}

PostCSS

Any css output by vue-loader is partially overwritten by PostCSS. We can also add the PostCSS plug-in for such processing, such as autoprefixer and CSSNext.

Webpack 1.x usage:

// webpack.config.jsmodule.exports = { // other configs... vue: {  // use custom postcss plugins  postcss: [require('postcss-cssnext')()] }}

Webpack 2.x usage:

// webpack.config.jsmodule.exports = { // other configs... plugins: [  new webpack.LoaderOptionsPlugin({   vue: {    // use custom postcss plugins    postcss: [require('postcss-cssnext')()]   }  }) ]}

Postcss also supports plug-in Arrays

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

Hot loading

Hot loading is not just a page Refresh after the file is modified. After a. vue component is modified, all instances of this component on the page will be replaced without reloading the page. It also saves the current status of the application and the replaced component.

If you use vue-cli to build a project, it comes with hot loading.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.