月度归档： 2024 年 7 月

发布于

如何使用 unplugin-auto-import 和 unplugin-vue-components 自动导入组件、ui库、单文件组件

自动导入Vue 、Vue-route、pinia、AntdV、Vant

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from '@vant/auto-import-resolver'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import GetLoginTemplate from './src/utils/GetLoginTemplate'
import { AntDesignIconResolver,AntDesignApiResolver } from './src/utils/AntDesignResolver'

export default defineConfig({
  server: {
    host: '',
    proxy: {
      '/api': 'http://localhost:4000'
    }
  },
  plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
    AutoImport({
      dirs: ['@/utils/Composable/**'],
      eslintrc: {
        enabled: true,
        filepath: '.eslintrc-auto-import.json',
        globalsPropValue: true
      },
      imports: ['vue', 'vue-router', 'pinia'],
      include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
      dts: 'auto-imports.d.ts',
      resolvers: [
        VantResolver(),
        AntDesignVueResolver({ importStyle: 'less' }),
        AntDesignApiResolver()
      ]
    }),
    Components({
      dirs: ['./src/components/**', './src/utils/Composable/**', './src/Layout/**'],
      extensions: ['vue'],
      exclude: [/node_modules/, /\.git/, /\.nuxt/, /dist/, /public/, /test/, /mocks/],
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/, /\.ts$/, /\.js$/, /\.jsx$/, /\.tsx$/],
      deep: true,
      dts: 'components.d.ts',
      resolvers: [
        VantResolver(),
        AntDesignVueResolver({ importStyle: 'less' }),
        AntDesignIconResolver()
      ]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/variables.scss";'
      }
    }
  }
})
继续阅读“如何使用 unplugin-auto-import 和 unplugin-vue-components 自动导入组件、ui库、单文件组件”