vue3中setup语法糖插件unplugin-auto-import

vue3 中setup 语法糖插件介绍

插件作用：在开发过程中，基本每一个 .vue文件都要引入 import {} from 'xxx' 才能使用一些东西，例如 ref，要使用必先 import { ref } from 'vue'，重复的 import 显得很麻烦，所以需要一个插件来帮助我们引入====> unplugin-auto-import

下载

npm i unplugin-auto-import -D

package.json文件中显示了版本号说明下载成功了，继续配置即可使用

配置

在 vite.config.js 文件中加入如下代码即可配置完成

// 引入插件
import vue from '@vitejs/plugin-vue'

plugins: [
    vue(),
    // 在plugins中使用
    AutoImport({
      imports:['vue','vue-router']
    })
],

可能源文件里面有一些东西，不过不用管，加入我们该加的就可以了，就像下面

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports:['vue','vue-router']
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
})

结束

到此自动引入插件就完成了，重启项目就可以安心使用了，上面我们配置的是imports:['vue','vue-router']，那么在项目中所有需要从import { xxx } from 'vue'和import { xxx } from 'vue-router'的API 就都不需要再引入了，举个栗子：

<script setup>
    // 无需手动从 vue 中引入 ref 和 useRouter 
    const active = ref(0);
    const router = useRouter()
    router.push("/login")
</script>