一:介绍
Vue3 与 Vue2 有众多区别,其中之一就是组件式开发。当我们在页面中使用时,需要先进行 import 导入,而后才能够使用 ref 等组件。但是这样会有些麻烦,因此我们可以使用一些依赖来进行自动导入。
二:unplugin-auto-import
1、安装
在项目根目录下打开 powershell ,使用以下指令安装依赖。
npm i -D unplugin-auto-import
出现以下情况则是安装成功
2、导入
我们进入项目根目录下的 vite.config.ts 文件,代码如下,主要是第4行和8-10行的代码需要修改。而后保存使用 npm run dev 启动项目。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),AutoImport({
imports:['vue'],
dts:'src/auto-import.d.ts'
})],
resolve:{//路径别名
alias:{
'@': resolve(__dirname,'./src')
}
},
})
启动后我们就可以看到,在上面第十行定义的目录下,出现了 auto-import.d.ts 文件。
文件内容如下,则项目已经成功导入了 unplugin-auto-import 。
3、使用
这时,我们再在页面中使用 ref 等组件,将不必再进行导入。