Vite manual

Init file

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

import {
    
     defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    
    
  plugins: [
    vue(),
  ],
  resolve: {
    
    
    alias: {
    
    
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Vite.config.ts 配置自动导入

Element plus, 其他组件也一样，您需要使用额外的插件来导入要使用的组件。

npm install -D unplugin-vue-components unplugin-auto-import

pnpm add -D unplugin-auto-import

pnpm add -D unplugin-vue-components

AutoImport({
    
    
      resolvers: [ElementPlusResolver()],
      eslintrc: {
    
    
        enabled: true,
        filepath: './.eslintrc-auto-import.json',
        globalsPropValue: true
      }
    }),
    Components({
    
    
      resolvers: [ElementPlusResolver()]
    })

生成两个文件

成功安装后，在项目的根目录下生成两个文件
auto-imports.d.ts

/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// Generated by unplugin-auto-import
export {
    
    }
declare global {
    
    
  const ElMessage: typeof import('element-plus/es')['ElMessage']
}

components.d.ts

/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {
    
    }

declare module 'vue' {
    
    
  export interface GlobalComponents {
    
    
    ElButton: typeof import('element-plus/es')['ElButton']
    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
    IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
    IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
    IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
    IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
    IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
    TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
    WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
  }
}

配置Eslint

1. 在vite.config.ts导入Eslint文件

eslintrc: {
    
    
        enabled: true,
        filepath: './.eslintrc-auto-import.json',
        globalsPropValue: true
      }

2. 生成.eslintrc-auto-import.json文件

{
    
    
  "globals": {
    
    
    "ElMessage": true
  }
}

3. .eslintrc.cjs 包含进来 …eslintrc-auto-import文件，让Eslint可以检测到

extends: [
    './.eslintrc-auto-import.json',
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting'
  ],

svg

安装依赖

npm install vite-plugin-svg-icons -D