vue cli plugin import components

vue-cli-plugin-import-components

VUE CLI 앱에서 트리 흔들림으로 VUE 2 및 3을 지원하는 구성 요소의 구성 요소를 자동으로 가져옵니다.

왜 그리고 어떻게?

이 기능이 존재하는 이유, 작동 방식 및 문제에 대한 기사를 확인하십시오.

더 강력한 것이 필요하십니까? Unplugin-vue 경쟁자를 사용하는 것을 고려하십시오

특징

• ? Vue 2와 3은 전체 트리 흔들림으로 지원합니다
• ⚡ 게으른 부품을로드하십시오
• 핫 모듈 재 장전 준비
• ? TypeScript로 작성되었습니다

설정

Vue Cli를 사용하여 설치하십시오. (Vue Cli 4+가 권장됩니다)

vue add import-components

---

용법

components/ 폴더에 구성 요소를 추가하십시오.

 | components/
--- | ComponentFoo.vue
--- | ComponentBar.vue

평소와 같이 .vue 에 사용하십시오. Pascalcase 또는 Kebab Case로 구성 요소에 액세스하십시오.

 < template >
< div >
  < ComponentFoo />
  < component-bar />
</ div >
</ template >

script 섹션에서 imports 및 components 를 제거하십시오.

비동기 구성 요소 로딩

구문에 따라 구성 요소 이름을 Lazy 거나 lazy- 접두사하여 구성 요소를 비동기로로드 할 수 있습니다.

 < template >
< div >
  <!-- ComponentFoo will be loaded in async -->
  < LazyComponentFoo />
  <!-- ComponentBar will be loaded sync -->
  < ComponentBar />
</ div >
</ template > 

구성

./vue.config.js 에서 옵션을 수정하여 플러그인의 동작을 변경할 수 있습니다.

 // vue.config.js
module . exports = {
  pluginOptions : {
    components : {
      ...
    }
  }
}

옵션

모든 옵션은 선택 사항입니다.

경로 - 문자열

구성 요소를 찾기 위해 스캔하는 데 사용되는 경로. 참고 : 프로젝트 루트와 관련이 있어야합니다.

기본값 : ./src/components

패턴 - 문자열

path 내에서 파일을 찾기 위해 Regex. 참고 : 패턴을 생략하면 구성된 extensions 사용합니다.

기본값 : **/*.{${extensions.join(',')},}

무시 - 문자열 []

path 내에서 파일을 무시하는 동정인.

기본값 : [ '**/*.stories.js' ],

mapcomponent- (구성 요소 : 구성 요소) => 구성 요소 | 거짓

스캔하고 싶지 않은 경로를 걸러내는 데 사용할 수있는 기능.

예를 들어, 자동 구성 요소가 자동으로 auto 구성 요소에 액세스하려면 자동으로 액세스하려면 아래 코드를 사용할 수 있습니다.

 // vue.config.js
module . exports = {
  pluginOptions : {
    components : {
      // prefix all automatically imported components with an auto prefix
      mapComponent ( component ) {
        component . pascalCase = 'Auto' + upperFirst ( component . pascalCase )
        component . kebabName = 'auto-' + component . pascalCase
        return component
      }
    }
  }
} 

확장 - 문자열 []

구성 요소의 경로를 스캔 할 때 어떤 파일을 구성 요소로 간주 해야하는지.

기본값 : ['.js', '.vue', '.ts']

제한

정적 수입 만

템플릿 내에서 정적으로 정의 된 구성 요소 만 작동합니다.

< template >
  < component :is = " dynamicComponent " />
</ template >

폴더를 네임 스페이스로 사용합니다

귀하의 구성 요소의 이름을 지정하기 위해 VUE 컨벤션을 사용하고 있다고 가정합니다. 아래는 구성 요소를 수동으로 매핑하지 않으면 작동하지 않습니다.

 | components/
--- | Foo.vue
------ | Namespace/Foo.vue

Foo.vue 라는 두 가지 구성 요소와 충돌합니다. 구성 요소 파일을 네임 스페이스로 지정해야합니다. IE NamespaceFoo.vue .

JavaScript 구성 요소

업데이트 할 때 브라우저를 새로 고침해야 할 수도 있습니다. 핫 모듈 리로드는 때때로 약간 버그가있는 것 같습니다.

.vue SFC 구성 요소를 고수하는 것이 좋습니다.

특허

MIT