(12)项目集成Element plus 安装 Icon 图库

安装 element plus

npm install element-plus --save

配置Volar 插件支持

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

自动导入

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件`

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

然后把下列代码插入到你的 Vite配置文件中`

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

全局引入css样式

//main.ts
import 'element-plus/dist/index.css'

安装 icon 图库

安装

npm install @element-plus/icons-vue

全局注册

// main.ts
​
// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
​
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}