우아한 관리 Vue 글로벌 구성 요소 자동 등록 및 플러그인 자동 도입 기록

프로젝트가 커지면서 플러그인의 도입과 전역 구성 요소의 등록을 main.js에 넣는 사람들이 있을 수 있습니다. 그래서 뒷부분main.js에 코드를 많이 넣어서 난잡하고 후반 유지보수에 불리하기 때문에 가능한 한 main.js을 깔끔하게 보이도록 하겠습니다.여기에는 webpack의 require.context 기능을 사용하여 Vue에서 전역 구성 요소와 플러그인을 자동으로 등록하고 전역 구성 요소와 플러그인 관리를 편리하게 합니다.
전역 플러그인 관리
1. 프로젝트에 새 plugins 디렉터리를 만들고 components 디렉터리와 같은 등급을 유지한다.2. plugins 디렉터리에 새로 만들기index.js, 도입element-ui을 예로 들면: 3. 다시 plugins 디렉터리에 새로 만들기element.js, 공식 인용 방법에 쓰기(수요에 따라 도입하는 문제를 고려하지 않음)

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Element, {
  size: 'small'
})

4.index.js에 도입element.js

import './element'

5. main.js 에 도입된 plugins 에 도입된 index.js

import Vue from 'vue'
import App from './App.vue'

//     ，            router 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')

이렇게 하면 main.js 보기에 훨씬 시원해 보인다. 뒤에 새로 추가된 플러그인이 있다. 플러그인 디렉터리에 해당하는 플러그인 이름을 새로 만들고 index.js에 도입하면 된다. 아무리 많은 플러그인도 쉽게 유지보수할 수 있다.
글로벌 구성 요소 자동 등록
홈페이지 문서 참조: 클릭하여 1로 이동, 먼저 설치lodash

npm install i lodash

2. components 디렉터리에 새로 만들기globals 디렉터리를 만들고 그 다음에 전역적으로 등록해야 하는 구성 요소를 모두 이 안에 넣는다. 3. plugins 목록에 새로 만들기auto-regist.js (파일 이름은 마음대로 쓸 수 있다)

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

const requireComponent = require.context(
  //           
  '../components/globals',
  //         
  true,
  //                
  /\w+\.vue$/
)

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

  //       PascalCase   
  const componentName = upperFirst(
    camelCase(
      //              
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )

  //       
  Vue.component(
    componentName,
    //             `export default`    ，
    //          `.default`，
    //            。
    componentConfig.default || componentConfig
  )
})

4.plugins 중index.js 도입

import './auto-regist'
import './element'

마지막으로 components/globals에 테스트 구성 요소를 넣고 테스트를 진행할 수 있습니다.
세련된 로드 플러그인
매번 plugins에 플러그인을 추가한 후에 index.js에서 인용해야 한다. 만약에 이런 플러그인이 100개가 있다면 우리는 100개를 써야 한다. 여기에 필요한 것은 전역 구성 요소와 마찬가지로 index.js에 자동으로 도입plugins된 플러그인은 원리가 상단 과 유사하다.변경된 코드index.js:

const requirePlugin = require.context(
  //   plugins  
  '/',
  //         
  false,
  //     plugins    js  
  /.+\.js$/
)
requirePlugin.keys().forEach(fileName => {
  requirePlugin(fileName)
})

이렇게 하면 도입 plugins 의 모든 플러그인을 자동으로 불러올 수 있다.그러나 이렇게 하면 플러그인 도입 순서 문제가 존재할 수 있다. 웹 패키지는 폴더에 있는 파일의 위치에 따라 정렬된 것이기 때문이다. 만약에 A, B, C 세 개의 플러그인이 있다면 A플러그인은 B플러그인이 제공하는 어떤 기능을 사용해야 한다. 이런 상황에서 A플러그인이 먼저 인용되고 B가 나중에 인용되어 A플러그인 코드가 잘못된 상황을 보고하게 된다. 여기서 교묘한 방법으로 A,B 플러그인은 다음과 같은 형식으로 명명됩니다: a-2-A.js, a-1-B.js. 이렇게 하면 B 플러그인은 앞에서 우선적으로 불러옵니다.의존 관계가 존재하지 않는다면, 마음대로 할 수 있다.
디렉토리 구성도