vue cli plugin import components

vue-cli-plugin-importadores

Importar automáticamente componentes en su aplicación Vue CLI con sacudidas de árboles, admitiendo Vue 2 y 3.

¿Por qué y cómo?

Consulte mi artículo sobre por qué existe esta función, cómo funciona y los problemas.

¿Necesitas algo más poderoso? Considere usar componentes unplugin-vue

Características

• ? Vue 2 y 3 soporte con sacudida de árboles completos
• ⚡ Carga perezosa tus componentes
• Módulo caliente recarga listo
• ? Escrito en TypeScript

Configuración

Instalar usando Vue CLI. (Se recomienda Vue CLI 4+)

vue add import-components

---

Uso

Agregue componentes a sus components/ carpeta.

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

Úselos en cualquier .vue como lo haría normalmente. Acceda a sus componentes con Pascalcase o Kebab-Case.

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

Elimine imports y components de la sección script .

Carga de componentes async

Puede cargar sus componentes async prefijo su nombre de componente con Lazy o lazy- , dependiendo de su sintaxis.

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

Configuración

Puede cambiar el comportamiento del complemento modificando las opciones en ./vue.config.js .

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

Opción

Todas las opciones son opcionales.

Ruta - Cadena

La ruta utilizada para escanear para encontrar componentes. Nota: debe ser relativo a la raíz de su proyecto.

Valor predeterminado: ./src/components

Patrón - Cadena

Regex para encontrar los archivos dentro de la path . Nota: Si omite el patrón, usará las extensions configuradas

Predeterminado: **/*.{${extensions.join(',')},}

ignorar - cadena []

Regex para ignorar los archivos dentro de la path .

Predeterminado: [ '**/*.stories.js' ],

mapcomponent - (componente: componente) => componente | FALSO

Una función que puede usar para filtrar las rutas que no desea escanear.

Por ejemplo, si quisiéramos acceder a sus componentes automáticamente solo cuando los prefijan con auto , podría usar el siguiente código.

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

Extensiones - Cadena []

Al escanear la ruta de componentes, qué archivos deben considerarse componentes.

Predeterminado: ['.js', '.vue', '.ts']

Limitaciones

Solo importaciones estáticas

Solo los componentes que se definen estáticamente dentro de su plantilla funcionarán.

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

Usando carpetas como espacios de nombres

Se supone que está utilizando las convenciones VUE para nombrar sus componentes. El siguiente no funcionaría sin mapear manualmente los componentes.

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

Crearía un conflicto con dos componentes llamados Foo.vue . Debe nombrar sus archivos de componentes con el espacio de nombres. es decir, NamespaceFoo.vue .

Componentes de JavaScript

Es posible que deba actualizar su navegador cuando los esté actualizando. La recarga del módulo caliente parece ser un poco buggy a veces.

Se recomienda que se quede con los componentes .vue SFC.

Licencia

MIT