ruby-on-rails 如何将FontAwesome添加到Vue/Express/hypernova-vue应用程序

oug3syen  于 2023-10-21  发布在  Ruby
关注(0)|答案(1)|浏览(133)

我正在开发的应用程序是一个使用hypernova-vue的Rails应用程序,允许在整个网站上使用Vue 3微型前端应用程序/组件。我已经构建了一个小型的私有npm组件库,用于Vue组件微前端。
不幸的是,通过大量的调试和缩小范围,看起来在npm组件库中包含FontAwesome图标会破坏主应用程序(Rails和jQuery)。
hypernova-vue创建了一个这样的应用程序:

createApplication() {
    const app = express();
    app.use(
      '/components/path/',
      express.static(path.join(process.cwd(), 'dist')),
    );

    return app;
},

hypernova-vue的客户端JS是:

import { renderVue } from [private fork of the main project];
import MyComponent from './components/MyComponent.vue';

renderVue('My/Component', MyComponent);

在Rails应用程序中,我添加render_vue_component('My/Component')代码,只要我想包含Vue组件。
FontAwesome希望添加到使用Vue的createApp函数创建的应用程序中,其说明如下:

import { createApp } from 'vue'
import App from './App.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

library.add(faUserSecret)

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

由于我没有一个特定的createApp(App),我不知道我是否可以,我会在哪里,或如何添加component('font-awesome-icon', FontAwesomeIcon)到我现有的组件。

wlzqhblo

wlzqhblo1#

你只需要找到font-awesome库的CDN链接,并将其包含在index.html文件的头部。您可以在cdn.js站点中获取CDN链接
font-awesome库的具体链接是:this希望对你有帮助。

相关问题