从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战三（引入ElementPlus图标）

步骤

项目中引入ElementPlus图标分3步：

1.安装图标库

pnpm install @element-plus/icons-vue

2.main.ts导入

import * as ElementPlusIconsVue from "@element-plus/icons-vue";

const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

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

3.App.vue引入图标组件进行测试验证

最终结果

一个可能的问题

import App from './App.vue'
# Cannot find module ‘./App.vue‘ or its corresponding type declarations.

解决办法： 修改vite-env.d.ts

/// <reference types="vite/client" />
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}