VUE3+VITE+TS自动引入依赖

unplugin-auto-import

安装插件

这个插件可以自动引入对应的依赖，比如ref、reactive、watch，之前使用的时候需要手写import
比如：

import {reactive} from 'vue'
---------
setup(){
	const list:Array<{name:string}>=reactive([{name:'zhangsan'}])
}

使用之后

setup(){
	const list:Array<{name:string}>=reactive([{name:'zhangsan'}])
}

所以我们先安装插件

npm install unplugin-auto-import

创建文件

我自己的目录结构是在根目录下创建了一个用于配置vite.confi.js的文件夹

-config
	-vite
		-plugins
			-components.ts
			-autoImport.ts
			-index.ts

编写配置

下面就是文件的配置

import AutoImport from 'unplugin-auto-import/vite'
//我这边使用的是NaiveUi和element-plus，如果是其他UI库，就去相应的官方文档上找寻一下resolver
import { NaiveUiResolver, ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 这里面要加组件库
export const AutoImportDeps = () => {
  return AutoImport({
    // 目标文件
    include: [
      /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
      /\.vue$/,
      /\.vue\?vue/, // .vue
      /\.md$/ // .md
    ],

    // 全局引入插件
    imports: [
      // presets
      'vue',
      'pinia',
      'vue-router',
      // custom
      {
        '@vueuse/core': []
      }
    ],

    // eslint报错解决
    eslintrc: {
      enabled: true, // Default `false`
      filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
      globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
    },

    // 解析器，例如element-plus的ElementPlusResolver
    // see https://github.com/antfu/unplugin-auto-import/pull/23/
    resolvers: [NaiveUiResolver(), ElementPlusResolver()],
    // 声明文件生成位置和文件名称
    dts: 'types/auto-import.d.ts'
  })
}

引入index.ts

import { PluginOption, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import VitePluginCertificate from 'vite-plugin-mkcert'
import { createHtmlPlugin } from 'vite-plugin-html'
import { visualizer } from 'rollup-plugin-visualizer'
import viteCompression from 'vite-plugin-compression'
import { AutoImportDeps } from './autoImport '
import { ConfigPagesPlugin } from './pages'
import { AutoRegistryComponents } from './components'

export function createVitePlugins(mode) {
  const envConfig = loadEnv(mode, process.cwd())

  const vitePlugins: (PluginOption | PluginOption[])[] = [
    // vue支持
    vue(),
    // JSX支持
    vueJsx(),
    // setup语法糖组件名支持
    vueSetupExtend(),
    // 提供https证书
    VitePluginCertificate({
      source: 'coding'
    }),
    createHtmlPlugin({
      minify: true,
      entry: 'src/main.ts',
      template: '/index.html',
      inject: {
        data: {
          title: envConfig.VITE_APP_TITLE,
          icon: envConfig.VITE_APP_LOGO
        }
      }
    }),
    // 打包分析工具
    visualizer(),
    // 打包工具
    viteCompression({
      // 生成压缩包
      verbose: true, // 输出压缩成功,
      disable: false,
      threshold: 1,
      algorithm: 'gzip',
      ext: '.gz'
    })
  ]
  // 自动导入依赖
  vitePlugins.push(AutoImportDeps())
  // 自动导入组件
  vitePlugins.push(AutoRegistryComponents())

  console.log('hahhaha')

  return vitePlugins
}

vite.config.ts内使用

请看我上一个vite+vue3自动引入组件
链接: link