TypeScript 在 Vue 项目中添加全局组件 FontAwesome答案

【问题标题】：TypeScript add global components FontAwesome in Vue ProjectTypeScript 在 Vue 项目中添加全局组件 FontAwesome
【发布时间】：2021-07-12 14:43:40
【问题描述】：

您好，我是 TypeScript 的新手，我想将 FontAwesome 图标添加到我的 Vue 应用程序中。我忘了说这是一个使用 Vue 3 的项目

这是我的main.ts：

import Vue, { createApp } from 'vue';
import './registerServiceWorker';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faUserSecret } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import router from './router';
import store from './store';
import App from './App.vue';

library.add(faUserSecret);

Vue.component('font-awesome-icon', FontAwesomeIcon); // This line generate an error

createApp(App).use(router).use(store).mount('#app');

错误是：

如何在全局范围内设置我的 fontawesome 组件？谢谢。

【问题讨论】：

不应该是import { Vue, createApp } from 'vue';吗？
与import { Vue, createApp } from 'vue';同样的错误

标签： typescript vue.js font-awesome

【解决方案1】：

对于最干净的解决方案，可以链接。

createApp(App).component("font-awesome-icon", FontAwesomeIcon).mount("#app");

【讨论】：

【解决方案2】：

我们现在需要导入新的 createApp 方法，而不是使用 new Vue()。所以下面的行会产生错误：

Vue.component('font-awesome-icon', FontAwesomeIcon); // This line generate an error

根据 Vue 3 将 vue.component 替换为 app.component ：

const app = createApp(App)
app.component('font-awesome-icon', FontAwesomeIcon)
app.use(router)
app.mount('#app')

【讨论】：