Antecedents to introduce

In fact, I have never seriously read the detailed introduction of the Vue Loader ecosystem since I have used Vue for so long. It is inevitable that sometimes I need to customize some styles when I use third-party UI plug-ins in my work, but every time when I implement the >>>, /deep/, as well as the usage principle of v-deep that I met recently, I didn’t know very well. I tried in three ways every time, which was very brainless. Later, I saw Vue by chance I didn’t read the oil related introduction of Loader in detail at that time, but I had planted a seed to systematically study it in my heart. Therefore, today’s task is to visit the official website and record my notes in this process. Let’s start without further ado!

What is a Vue Loader?

Before getting to know what a Loader is, it’s important to know what a Webpack is.

Vue Loader is a Webpack Loader that allows us to write Vue components in a single file component format

  • Hot overloading can be used to preserve state during development
  • Model the Scooped CSS for each component
  • Allows you to use custom blocks in a. Vue file and apply custom loader chains to them

Use of Vue Loader

In fact, if Xu Xiang manually set up webpack, we are using Vue CLI to create a project scaffolding,Vue CLI to create a project for most common development needs for pre-configuration, do out of the box can be used.

Scoped CSS

When the style tag has the scoped attribute, its CSS only applies to the elements in the current component. In the compiled result, the style attribute name is followed by [data-x-xxxx..]. Is an identifier

Mix local and global styles

We can use both scoped and non-scoped styles in one file

<style scoped>
	/* Applies to the current file style */
</style>
<style>
	/* Global style */
</style>
Copy the code

Styles of nested components

When scoped is used, the parent component’s style does not permeate into the child component, but the child component’s root node is influenced by both the parent’s Scoped CSS and the child’s scoped CSS. This is designed so that the parent component can adjust the style of the child component’s root element from a layout perspective.

Depth action selector

If we want a selector in scoped style to go deeper and affect sub-components we can use the >>> operator, or we can use the >>> alias /deep/ or :: V-deep

Pay attention to

Dynamically generated content

DOM content created using V-HTML is not affected by scoped styles, so we can still style them using the depth effect selector

Pay attention to

  • Scoped style is not a substitute for class. The way CSS selectors are rendered in browsers is much slower when using tag selectors in Scoped, and much better when using class or ID
  • Use descendant selectors carefully in recursive components. For CSS rules in selector.a. b, if the element matching.a contains a recursive subcomponent, then.b in all subcomponents will be matched by this rule

CSS Modules

  • Css modules are simple, with local scopes and module dependencies to ensure that the style of one component will not be affected by other components.
  • CSS rules are global; any single component style rule applies to the entire page.
  • The only way to generate a local scope is to use a unique class name that does not overlap with other selectors
  • Using CSS modules means that calSS names are compiled into hash strings.

Thermal overload

“Hot reloading” is not simply reloading the page even when we are modifying the file. Instead, with hot overloading enabled, when we modify the.vue file, all instances of the component will be replaced without refreshing the page. It can even save the current state of the application and the replaced component, which greatly improves the development experience when you adjust templates or modify styles.

The effect of hot overloading on different files

  • The editor is one<template>, the component instance will render in place and retain all of its current private state. This is possible because the template is compiled into a new render function with no side effects.
  • When editing a component<script>, the component instance in situ destroyed and recreated, (applications in shift will be retained in the other team’s price), because in the script there may be some side effects with the life cycle of the hook, so the replacement to render to reload is necessary, so that we can guarantee the consistency of component behavior, if the component with the side effects of the global, the entire page The surface will be reloaded.
  • The editor<style>A file,<style>throughvue-style-loader Self-loading, so it does not affect the state of the application

usage

Hot reloading is enabled out of the box when using vue-CLI to create projects. It is also enabled by default when manually configuring projects. Hot reloading is enabled when starting the project webpack-dev-sever –hot service