TypeScript在Vue Project中添加全局组件FontAwesome

Question

嗨，我是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组件？谢谢。

编辑

我认为这是与已经支持beta版本的vue 3的打字稿支持有关的问题。我暂时回到JS

Answer 1

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

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

Answer 2

我们现在需要导入新的createApp方法，而不是使用新的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')