• Familiar with.vue file structure

    • Three types of top-level language blocks

    • Allows optional custom blocks to be added

    • Vue-loader + other loaders parse the file into a CommonJS module. Module. exports exports a vue.js component object.

    • External files can be imported via SRC. This means that your relative path needs to start with a./. You can also import resources directly from the NPM package (this is the absolute path relative to the package).

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

    Use ES2015 in Templates

    • Scoped CSS: Use PostCSS for transformation

      <style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>
Copy the code

      Note: With scoped, the style of the parent component will not permeate into the child component. But CSS that is scoped by the parent component is applied to the root node of the child component. For layout reasons

    • >>> Native makes styles deeper, and style preprocessors need to use the /deep/ operator.

    • DOM content dynamically generated by V-HTML is not affected by scoped styles, but you can style them using the depth effect selector.

    Note:

    • CSS scopes cannot replace classes. Given the way browsers render various CSS selectors, it is many times slower when p {color: red} is scoped (that is, used in combination with feature selectors). If you use class or ID instead, such as.example {color: red}, the performance impact is eliminated.

    • Be careful with descendant selectors in recursive components! For a CSS rule in selector.a.b, if the element matching.a contains a recursive subcomponent, then.b in all subcomponents will be matched by the rule.

    • CSS Modules

      • <style module></style>
      • <p :class="{ [$style.red]: isRed }">Am I red? </p>
      • console.log(this.$style.red)=> Direct JS access

    • Use the precompiler to NPM installed, VUe-CLI does not take, installed to configure

      • Or load a global Settings file

    • Resource path processing

      • During compilation, all resource paths such as

      • Compile the rules

        1. If the path is an absolute path, it is retained as is.
        2. If the path starts with.At first, it will be treated as relative module dependencies and resolved according to the directory structure on your local file system.
        3. If the path starts with~At the beginning, the rest will be treated as module dependencies. This means that you can use this feature to reference resources in a Node dependency
        4. If the path starts with@At the beginning, it is also considered a module dependency. If your WebPack configuration gives@Alias is configured, which is useful. All vuE-CLI created projects are configured by default to@Point to the/src

    • Extract CSS to a single file

      • npm install extract-text-webpack-plugin --save-dev
      Var ExtractTextPlugin = require(// webpack.config.js-"extract-text-webpack-plugin")
	
	module.exports = {
	  // other options...
	  module: {
	    rules: [
	      {
	        test: /\.vue$/,
	        loader: 'vue-loader',
	        options: {
	          extractCSS: true
	        }
	      }
	    ]
	  },
	  plugins: [
	    new ExtractTextPlugin("style.css")
	  ]
    }
  ```
Copy the code