vue 기초 구성 요소의 자동화 전역 등록

1289 단어
vue를 사용하여 프로젝트를 구축하는 과정에서 우리는 일반적인 구성 요소를 설정하고 기본적인 기능을 포함하여 프로젝트에서 빈번하게 호출될 것이다.이 때 모든 구성 요소 페이지에서 인용을 하면, 번거로운 코드가 많이 중복되어 전역 등록으로 바뀔 수 있습니다.단계는 다음과 같습니다.
4
  • 이 일반적인 기초 구성 요소들을 같은 폴더 아래에 두십시오: 예를 들어components/common/

    • 4
  • 응용 입구 파일(main.js)에서 전역적으로 가져오고 공식 문서를 참고하여 실제 상황에 따라 약간 수정한다.npm 설치lodash
    • npm i --save lodash

    이메일 설정js 파일:
    import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  //           
  './components/common/',
  //         
  true,
  //                
  /[A-Za-z0-9-_]+\.(vue|js)$/
)
requireComponent.keys().forEach(fileName => {
  //       
  const componentConfig = requireComponent(fileName)
  //       PascalCase   
  const componentName = upperFirst(
    camelCase(
      //              
      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
    )
  )
  //       
  Vue.component(
    componentName,
    //             `export default`    ，
    //          `.default`，
    //            。
    componentConfig.default || componentConfig
  )
})

    전역 등록 동작은 새 Vue를 통해 루트 Vue 인스턴스가 생성되기 전에 발생해야 합니다.
    4
  • 현재 해당 페이지에서 등록된 전역 구성 요소를 유쾌하게 사용할 수 있습니다
    • Oracle DBLink(투명 게 이 트 웨 이)
    SSH 통합

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage