如何在 Vue 3 中分离 main.ts 中的代码？

Question

我是 Typescript 和 vue 的新手，我很好奇如何在我的 main.ts 文件中提取这段代码。 我只是担心它最终会变得非常丑陋。

const app = createApp(App);

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'
/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
/* import specific icons */
import { faHammer, faTruckPickup, faSortDown } from '@fortawesome/free-solid-svg-icons'
/* add icons to the library */
library.add(faHammer, faMagnifyingGlass, faSortDown)

app.component('font-awesome-icon', FontAwesomeIcon);

我希望我的 main.ts 文件看起来像这样（如果有更好的方法，则不必精确）。

import {addFontAwesomeIcons} from './fontAwesomeLibrary'

const app = createApp(app);

addFontAwesomeIcons(app); //this will use the app object and call library.add() and app.component('font-awesome-icon',FontAwesomeIcon);

这样我的 main.ts 就不会因为我必须添加的图标而受到污染。

任何帮助，将不胜感激

Answer 1

fontAwesomeLibraryPlugin.ts

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faHammer, faTruckPickup, faSortDown } from '@fortawesome/free-solid-svg-icons'
library.add(faHammer, faMagnifyingGlass, faSortDown)

export const falPlugin = {
  install(app) {
    app.component('font-awesome-icon', FontAwesomeIcon);
  }
}

主.ts

import { falPlugin } from './fontAwesomeLibraryPlugin'
const app = createApp(App);

app.use(falPlugin);
app.mount('#app');

记录在这里。