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

豆约翰

已于 2024-06-07 15:31:47 修改

阅读量275

点赞数 1

分类专栏：手把手Element Plus管理后台项目实战文章标签： typescript javascript 前端

于 2024-06-07 15:30:46 首次发布

本文链接：https://blog.csdn.net/douyh/article/details/139528145

版权

手把手Element Plus管理后台项目实战专栏收录该内容

22 篇文章 8 订阅

订阅专栏

步骤

项目中引入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
}