【VUE3】搭建項目準備工作
unplugin-auto-import/vite 使用詳解
Element Plus 組件庫 Vue 3.x 官網(wǎng)

1 安裝 element 組件庫

//  element 組件庫 
npm install element-plus --save

// 安裝圖標庫
npm i @element-plus/icons-vue

2. 安裝 unplugin-vue-components unplugin-auto-import 自動導(dǎo)入組件 和 自動引入第三方插件.

安裝命令:

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'
// 配置按需導(dǎo)入
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(),
    // 配置按需導(dǎo)入
    AutoImport({
      imports: [
        'vue', // 自動導(dǎo)入 ref, reactive, computed 等
        'vue-router', // 自動導(dǎo)入 useRouter, useRoute 等
        'pinia', // 自動導(dǎo)入 defineStore 等
        '@vueuse/core', // 自動導(dǎo)入 VueUse 函數(shù)
        {
          axios: [
            // 自定義導(dǎo)入
            ['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 中的函數(shù)
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})