As the project continues to grow, some people may put the introduction of plug-ins and the registration of global components into main.js, resulting in a large pile of imported code in main.js, which looks messy and not conducive to the maintenance of later, so we try our best to make main.js look cleaner. Here, webpack require.context function is used to realize Vue automatic registration of global components and plug-ins, convenient management of global components and plug-ins.

Global Plug-in Management

  1. Create a new plugins directory in your project and keep it the same as the components directory.
  2. pluginsCreate index.js in the directory to importelement-uiFor example:
  3. againpluginsCreate new element.js in the directory and write the official reference method (forget importing on demand for now)
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Element, {
 size: 'small'
})
Copy the code
  1. Element. Js is introduced into index.js
import './element'
Copy the code
  1. Plugins include index.js in main.js
import Vue from 'vue'
import App from './App.vue'

// Import plugins, referenced here for possible use of plugins in the following Router and store.
import './plugins/index'

import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h= > h(App)
}).$mount('#app')

Copy the code

In this way, main.js looks much cleaner, and there are new plugins in the back. Just create a new plugin name in the plugins directory and add it to index.js. No matter how many plugins there are, you can also easily maintain them.

Automatic registration of global components

Official document reference: Click to go

  1. First installationlodash
npm install i lodash
Copy the code
  1. componentsNew directoryglobalsDirectory, behind the need for global registration of components are put in this
  2. pluginsIn the newauto-regist.js(File name optional), write the following
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // The relative path of its component directory
  '.. /components/globals'.// Whether to query the subdirectory
  true.// A regular expression that matches the underlying component file name
  /\w+\.vue$/
)

requireComponent.keys().forEach(fileName= > {
  // Get the component configuration
  const componentConfig = requireComponent(fileName)

  // Get the PascalCase name of the component
  const componentName = upperFirst(
    camelCase(
      // Get a file name independent of directory depth
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/.' ')))// Globally register components
  Vue.component(
    componentName,
    // If the component option is exported via 'export default',
    // Then '.default 'is preferred,
    // Otherwise fall back to the root of the use module.
    componentConfig.default || componentConfig
  )
})
Copy the code
  1. pluginsIn theindex.jsThe introduction of
import './auto-regist'
import './element'
Copy the code

Finally, you can put a test component in Components /globals to test.

More elegant loading of plug-ins

Every time a plugin is added to a plugins, it needs to be referenced in index.js. If there are 100 plugins, we need to write 100 plugins. We need to automatically import plugins into index.js in the same way that global components are automatically registered. Alter index.js code:

const requirePlugin = require.context(
  // The current plugins directory
  '/'.// Whether to query the subdirectory
  false.// Match the js file in the current plugins directory
  /.+\.js$/
)
requirePlugin.keys().forEach(fileName= > {
  requirePlugin(fileName)
})


Copy the code

This will automatically load all plug-ins introduced into your plugins. But it would be A plugin introduce order problems, because webpack is ordered by the location of the files in your folder, such as A, B, C three plug-in, plug-in provides A plugin to use B A feature of this case as A plug-in by reference first, after B references, lead to A plug-in code error, here in A tricky way, Name plug-ins A and B as follows:

A-2-a.js, A-1-B.js, so that the B plugin will be loaded first. If no dependency exists, feel free to do so.

Directory structure

reference