0
753
Vistas¿Cómo puedo informar a Volar sobre los componentes disponibles globalmente en Vue 3?
Así que estoy trabajando en un nuevo proyecto con Vue 3 y Volar como extensión en VSCode. Y estoy usando una biblioteca de componentes, CoreUI. Así que en mi main.ts ahora tengo este código.
import { createApp } from 'vue' import App from './App.vue' import CoreuiVue from '@coreui/vue' const app = createApp(App); app.use(CoreuiVue); Lo que ahora significa que en cualquier otro SFC puedo usar cualquier componente CoreUI, como por ejemplo <CAlert color="primary">A simple alert!</CAlert> , sin necesidad de importarlo.
Y compila muy bien. Durante la compilación no recibo quejas de TypeScript o ESLint sobre no haber importado correctamente un componente. Entonces parece que esas herramientas son conscientes de que estos componentes ahora están disponibles a nivel mundial.
Sin embargo, Volar no lo es y representa ese CAlert de esta manera:
En otras palabras, no reconoce CAlert y no puede darme ninguna información sobre él, como cuáles son sus propiedades y tipos de propiedad.
¿Cómo puedo hacer que Volar entienda que todos los componentes de CoreUI están disponibles globalmente?
1 Respuestas
Responde la pregunta0
Los componentes globales deben declararse en src/components.d.ts :
import { CAlert } from '@coreui/vue' declare module '@vue/runtime-core' { export interface GlobalComponents { CAlert: typeof CAlert } } 
Cada componente usado de Core UI debe declararse explícitamente (actualmente no hay forma de declarar todos los componentes en una línea para el aumento de tipo), pero puede generar los tipos para todos los componentes globales de Core con un script de Node:
const coreui = require('@coreui/vue') const components = Object.keys(coreui).filter(key => key.startsWith('C') && !key.endsWith('Plugin')) const code = `import * as CoreUI from '@coreui/vue' declare module '@vue/runtime-core' { export interface GlobalComponents { ${components.map(component => `${component}: typeof CoreUI['${component}']`).join('\n ')} } } ` console.log(code)...o copie el resultado de esta demostración .
Además, deberá reiniciar el servidor de idioma Vue de Volar desde la paleta de comandos (o el propio IDE) para que Volar vuelva a cargar los tipos. Presiona ⌘ + P en macOS (o ⊞ Win + P en Windows) y escribe >Restart Vue Server :
