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