在 Vue3 项目中我们可以发现定义变量跟使用vue里面的方法,都要 import { ref } from 'vue';很不方便
为了不用手动引入,方便开发,我们可以下载插件
npm install unplugin-auto-import
yarn add unplugin-auto-import
pnpm install unplugin-auto-import
在 vite.config.js中配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { relative } 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',
// 如有用到eslint记得加上写段,没有用到可以忽略
eslintrc: {
enabled: true,
},
}),
],
resolve: {
alias: {
'@': relative(__dirname, 'src'),
},
},
server: {
host: '0.0.0.0', //显示当前局域网
open: false, //是否自动启动浏览器
},
})
保存之后重新启动项目,这个时候在src下面就会自动生成一个 auto-imports.d.ts文件,全局状态下生成一个文件夹.eslintrc-auto-import.json
在.eslintrc.cjs中配置
module.exports = {
extends: [
'./.eslintrc-auto-import.json',
],
}
最后一步啦,试试把import { reactive, ref } from 'vue' 去掉看看效果吧