vue cli plugin import components

Vue-cli-plugin-import-Components

Importe automaticamente componentes no seu aplicativo VUE CLI com tremor de árvores, apoiando o VUE 2 e 3.

Por que e como?

Confira meu artigo sobre por que esse recurso existe, como ele funciona e os problemas.

Precisa de algo mais poderoso? Considere o uso de componentes unplugin-vue

Características

• ? Vue 2 e 3 Suporte com tremor de árvores completo
• ⚡ Lazy carrega seus componentes
• Recarregar do módulo quente pronto
• ? Escrito em TypeScript

Configurar

Instale usando o VUE CLI. (Vue cli 4+ é recomendado)

vue add import-components

---

Uso

Adicione componentes aos seus components/ pasta.

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

Use -os em qualquer .vue como você normalmente. Acesse seus componentes com PascalCase ou Kebab Case.

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

Remova imports e components da seção script .

Carregamento de componente assíncrono

Você pode carregar seus componentes assíncronos prefixando seu nome de componente com Lazy ou lazy- , dependendo da sua sintaxe.

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

Configuração

Você pode alterar o comportamento do plug -in modificando as opções em ./vue.config.js .

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

Opções

Todas as opções são opcionais.

caminho - string

O caminho usado para digitalização para encontrar componentes. NOTA: Deve ser relativa à raiz do seu projeto.

Padrão: ./src/components

padrão - string

Regex para encontrar os arquivos dentro do path . Nota: Se você omitir o padrão, ele usará as extensions configuradas

Padrão: **/*.{${extensions.join(',')},}

ignorar - string []

Regex para ignorar os arquivos dentro do path .

Padrão: [ '**/*.stories.js' ],

MapComponent - (Componente: Componente) => Componente | falso

Uma função que você pode usar para filtrar os caminhos que você não deseja ser digitalizado.

Por exemplo, se quiséssemos acessar seus componentes automaticamente apenas quando eles os prefixaram com auto , você pode usar o código abaixo.

 // 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
      }
    }
  }
} 

Extensões - String []

Ao digitalizar o caminho para componentes, quais arquivos devem ser considerados componentes.

Padrão: ['.js', '.vue', '.ts']

Limitações

Apenas importações estáticas

Somente componentes definidos estaticamente em seu modelo funcionarão.

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

Usando pastas como namespaces

Supõe -se que você esteja usando as convenções VUE para nomear seus componentes. O abaixo não funcionaria sem mapear manualmente os componentes.

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

Isso criaria um conflito com dois componentes chamados Foo.vue . Você deve nomear seus arquivos de componentes com o espaço para nome. isto é, NamespaceFoo.vue .

Componentes JavaScript

Pode ser necessário atualizar seu navegador quando estiver atualizando -o. O recarregamento do módulo quente parece ser um pouco de buggy às vezes.

É recomendável que você fique com os componentes .vue sfc.

Licença

Mit