webpack study notes - depth component (component registration)

Component name (recommended abc)

---

 

Vue.component('my-component-name', { /* ... */ })

When the DOM directly in the use of a component (instead of a string template or in single file component ) when: other components reference component mode

We strongly recommend to follow the  W3C specification custom components in the name (all lowercase letters and must contain a hyphen)

There are two ways of defining component name:

Use kebab-case (separated by dashes name): When using direct same name, written recommendation

Vue.component('my-component-name', { /* ... */ })

 

Use PascalCase (first letter capitalized names):

When PascalCase (named after the first letter capitalized) definition of a component, when you refer to this custom elements two naming method can be used.

That  <my-component-name> and  <MyComponentName> is acceptable.

Note, however, directly in the DOM (ie non-template string) kebab-case is only effective (and angularjs as) when in use

Vue.component ( ' MyComponentName ' , { / * ... * / })

 

Global Registration: You can also use the examples and subassemblies within vue!

---

 

Vue.component ( ' My-Component-name ' , {
   // ... options ... 
})

It can be used in any instance of the newly created root Vue ( new Vue) template

 

These three components inside each can also be used interchangeably

 

Local registration

---

 

 Global registration is often less than ideal, within such a system webpack, will be included in the final build result, the unnecessary increase in volume

var ComponentA = { / * ... * / }
 var as componentB = { / * ... * / }
 var ComponentC = { / * ... * / } // Component Object Options

// then initialize the instance when the VUE 
new new Vue ({
  on: ' #app ' ,
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

 

In its component parts Sign subassemblies are not available, to force use, write below

var components = { / * ... * / }

var ComponentB = {
  components: {
    ' Component, the ' : Component
  },
  // ...
}

 

Or if you use the ES2015 module through Babel and webpack, then the code looks like:

important components from  ' ./ComponentA.vue '

export default {
  components: {
    ComponentA // essence: ComponetA: ComponetA component name and component options, like the object

}, // ... }

 

Modular system

---

Registered in the local module system

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    components
    ComponentC
  },
  // ...
}

Automation components registered global basis

If you use webpack (or use a webpack inside  Vue CLI 3+ ), then you can use  require.context only global registration of these very common infrastructure components

 

Application entry file (such as  src/main.jsthe example code) of the base component introduced globally

Global actions must be registered in the root Vue instances (through  new Vue) occurs before the creation

 

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context (
   // relative path component of its directory 
  ' ./components ' ,
   // whether the query its subdirectories 
  to false ,
   // matching file names base component regular expression 
  / Base [AZ] \ w + \. (vue | js) $ /
)

requireComponent.keys (). forEach (fileName => {
   // acquisition component configured 
  const componentConfig = requireComponent (fileName)

  // get the components PascalCase named 
  const componentName = UpperFirst (
    camelCase(
      // get directory and is independent of the depth of the file name 
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )

  // global registration component 
  Vue.component (
    componentName,
    // If this option component is derived by `export default`,
     // it will prefer to use .default``,
     // otherwise it falls back to use the root module. 
    componentConfig. default || componentConfig
  )
})