vue3 减少重复import引入ref，reactive等重复引入

vue3 减少重复import引入ref，reactive等重复引入

start

• 最近做一些 vue3 项目，每次都要重复的去引入：ref，reactive，onMounted 等等。忘记引入了还会报错，有时候报错不准确，浪费时间浪费心智带宽。
• 今天记录下借助插件自动帮我们引入，我们直接使用即可。

1. vite版本

1.1 安装插件

npm i  unplugin-auto-import --save-dev

1.2 配置vite.config.js

增加如下代码：

import { fileURLToPath, URL } from 'node:url'

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

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    // AutoImport({
    //   dts: './auto-imports.d.ts',    // 项目根目录生成auto-imports.d.ts配置文件
    //   imports: ["vue", "vue-router", "pinia"],    // 设置自动导入的模块/插件
    // })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

核心的代码就是下面这些：

import AutoImport from 'unplugin-auto-import/vite';

AutoImport({
     dts: './auto-imports.d.ts',    // 项目根目录生成auto-imports.d.ts配置文件
     imports: ["vue", "vue-router", "pinia"],    // 设置自动导入的模块/插件
})

1.1.3 效果截图

1.未安装

2.已安装

2. webpack版本

2.1 安装插件

npm i  unplugin-auto-import --save-dev

2.2 配置vue.config.js

const AutoImport = require('unplugin-auto-import/webpack').default;
const { defineConfig } = require('@vue/cli-service');


module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      AutoImport({
        imports: [
          // auto-import插件内置了vue vue-router, react这些常见基本库的引入规则
          'vue',
          {
            // 放入我们自定义的自动引入库
            lodash: [
              // import { cloneDeep } from 'lodash'
              'cloneDeep',
              // import { isEmpty as Empty } from 'lodash'
              ['isEmpty', 'Empty']

            ],
            axios: [
              // import { default as axios } from 'axios'
              ['default', 'axios']
            ]
          }
        ],
        // 生成相应`.d.ts`文件的文件路径。默认为“”/在本地安装“typescript”时自动导入.d.ts。
        dts: './src/types/auto-import.d.ts',
        vueTemplate: true,
        eslintrc: {
          enabled: true,
        },
      })
    ]
  },
})

2.1.3 效果截图