Element Plus引入到Vue项目

PS: 官方推荐按需自动引入方式(方式一)

方式一：按需自动引入

1. 首先需要安装unplugin-vue-components 和 unplugin-auto-import两个插件

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

2. 然后把下列代码插入到你的 Vite（vite.config.ts 文件中）

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()],
    }),
  ],
})

方式二：全部引入

1. main.ts文件增加配置

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

app.use(ElementPlus)

2. tsconfig.json 文件增加配置

{
  "compilerOptions": {
    "types": ["element-plus/global"]
  }
}