安装 ELementUI 组件 和 图标库

【VUE3】搭建项目准备工作
unplugin-auto-import/vite 使用详解

1 安装 element 组件库

// 安装  element 组件库
npm install element-plus
// 安装图标库
npm i @element-plus/icons-vue

2. 安装 unplugin-vue-components unplugin-auto-import 自动导入组件 和 自动引入第三方插件.

安装命令:

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

文件配置:

// vite.config.js

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

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
// 配置按需导入
import AutoImport from 'unplugin-auto-import/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 配置按需导入
    AutoImport({
      imports: [
        'vue', // 自动导入 ref, reactive, computed 等
        'vue-router', // 自动导入 useRouter, useRoute 等
        'pinia', // 自动导入 defineStore 等
        '@vueuse/core', // 自动导入 VueUse 函数
        {
          axios: [
            // 自定义导入
            ['default', 'axios'] // import axios from 'axios'
          ]
        }
      ],
      dts: 'src/auto-imports.d.ts', // 自动生成的类型声明文件
      eslintrc: {
        enabled: true, // 生成 ESLint 配置文件
        filepath: './.eslintrc-auto-import.json',
        globalsPropValue: true
      },
      vueTemplate: true, // 是否自动引入 template 中的函数
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})