autoImport 插件

1.功能介绍，自动帮你引入所需要使用的工具

2.安装npm i unplugin-auto-import -D

3.config文件配置

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import vueJsx from '@vitejs/plugin-vue-jsx'

import AutoImport from 'unplugin-auto-import/vite'  // 定义自动引入库

// https://vite.dev/config/

export default defineConfig({

  plugins: [vue(), vueJsx(), AutoImport({

    imports:['vue'], // 自动引入的库

    dts:'src/auto-import.d.ts' // 指定位置生成对应的引入文件

  })],

  css: {

    preprocessorOptions: {

      scss: {

        // additionalData: `@import "./src/study/bem/index.scss";`

      }

    }

  }

})

 

4.重新运行后自动生成该文件

 

5.组件写的时候不再需要引入ref

<template>

<div>{{ msg }}</div>

</template>

<script setup lang='ts'>

const msg = ref('123')

</script>

<style scoped lang='scss'>

</style>