前端模块自动导入

在开发中我们经常会遇到这种问题。逻辑代码没几行，但是导入语句一大堆。
如：

import { Map, View } from \"ol\";//地图,视图
import OSM from \"ol/source/OSM\"; //可以理解为数据源,就是一张图片
import TileLayer from \"ol/layer/Tile\"; //可以理解为图层
import { fromLonLat } from \"ol/proj\";//将坐标从经度/纬度转换为不同的投影。
import { ZoomSlider } from \"ol/control\";
import { FullScreen } from \"ol/control\"
export default {
  data() {
    return {
      map: null,
    };
  },
  methods: {
    createMap() {
      this.map = new Map({
        target: \"map\",
        layers: [
          new TileLayer({
            source: new OSM({}),
          }),
        ],
        view: new View({
          center: [116.394926, 39.9125],
          projection: \"EPSG:3857\",
          zoom: 8,
          maxZoom: 20,
        }),
      });
    },
  },
  mounted() {
    this.createMap();
  },
};

为了解决上面提到的问题，就有了 unplugin-auto-import 这个插件。
这个插件会在根目录生成一个auto-import.d.ts，这个文件会将所有的插件导入到global中，这样在使用的时候直接就可以使用了

1. 安装

npm i -D unplugin-auto-import

2. 配置

2.1 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
  plugins: [
      vue(),
      AutoImport({
        imports:["vue","vue-router"],
        dts:'src/auto-import.d.ts'    // 路径下自动生成文件夹存放全局指令
      }),
  ],
})