Es engorroso introducir ref, reactivo, etc. para definir variables en los proyectos diarios de vue3, podemos introducirlos automáticamente a través de unplugin-auto-import
1. Instalación
npm i -D desenchufar-importación automática
2. Introducir en vite.config.ts
importar Importación automática desde 'unplugin-auto-import/vite'
Y configurar en complementos:
exportar defineConfig predeterminado ({
complementos: [
......
Importación automática ({
importaciones: ['ver'],
dts: 'src/auto-import.d.ts',
})
]
})
Puede haber muchos elementos de configuración en AutoImport, puede ir a github para ver la configuración detallada:
Nota: dts es un archivo de declaración de tipo generado por nosotros y no se encontrará si se usa directamente
Una vez completada la configuración anterior, se generará un archivo auto-import.d.ts en el directorio src, que nos ayudará a importar automáticamente contenido relacionado con Vue, que podemos usar directamente en el proyecto.
Nota: Después de configurar dts anteriormente, es posible que el archivo auto-import.d.ts no se genere automáticamente. Puede volver a ejecutar el proyecto o cerrar el editor y volver a abrirlo.
Utilizar de la siguiente manera:
<script setup lang="ts">
// 这里我们不用引入ref直接使用
const msg = ref<string>('Hello Vue3')
</script>
<template>
{
{ msg }}
</template>
<style scoped lang="scss"></style>