使用unplugin-auto-import自动导入插件优化vite开发vue3应用

为什么要使用unplugin-auto-import插件? 


  使用vite编写vue3代码时,使用composition api函数、Vue Router、pinia状态管理等官方API需要在页面中显式引入。而使用unplugin-auto-import插件可以自动导入这些API,从而提高开发效率,同时使代码更加简洁易读。

如:

import { ref, reactive, Ref, defineComponent, ComponentPropsOptions } from 'vue'
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import { defineStore, createPinia } from "pinia"

 

安装插件


 在项目中安装unplugin-auto-import插件

npm i unplugin-auto-import -D

 

引入插件


在vite.config.js文件中引入插件,并配置需要自动导入的插件和自定义导入的API:

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

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        // 需要自动导入的插件,自定义导入的API
        'vue',
        'vue-router',
        'pinia'
      ]
    })
  ]
})

 

使用插件


配置完成后,运行代码时会自动在根目录下生成一个auto-import.d.ts的文件。需要将该文件放入tsconfig.json中,插件才会生效:

{
  "include": [
    "./auto-imports.d.ts"
  ]
}

 

注意:如果出现报错“Clearing cache and forcing full-reload to ensure TypeScript is compiled with updated config values”,需要终止进程并重新编译项目,插件才能生效。

通过使用unplugin-auto-import插件,我们可以轻松地优化vite开发vue3应用的开发效率和代码质量。 

热门相关:帝少的专属:小甜心,太缠人   天启预报   寂静王冠   巡狩万界   寂静王冠