vue3导入ElementPlus

1.导入ElementPlus

pnpm install element-plus

2.挂载到main.js/ts

main.js

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'  //ELmentPlus组件
import 'element-plus/dist/index.css'      //依赖的css
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

3.导入自动引入插件

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

4.配置vite.config

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

5.使用ICON要导入相关包

pnpm install @element-plus/icons-vue