Étapes de la méthode pour configurer font-awesome5 dans vue-js tutoriel-php.cn

Étapes de la méthode pour configurer font-awesome5 dans vue

不言

Libérer： 2019-01-26 09:30:17

avant

7630 Les gens l'ont consulté

Le contenu de cet article concerne les étapes de configuration de font-awesome5 dans Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Ne parlons pas de la configuration de vue pour l'instant, principalement de la configuration de font-awesome5 plus tard :

1 Installez la configuration de base de fontawesome

npm i --save @fortawesome/fontawesome
npm i --save @fortawesome/vue-fontawesome

Copier après la connexion

2. Installez les dépendances de style fontawesome

npm i --save @forawesome/fontawesome-free-solid
npm i --save @forawesome/fontawesome-free-regular
npm i --save @fortawesome/fontawesome-free-brands

Copier après la connexion

ou deux étapes en une

npm i --save @fortawesome/fontawesome @fortawesome/vue-fontawesome @forawesome/fontawesome-free-solid @forawesome/fontawesome-free-regular @fortawesome/fontawesome-free-brands

Copier après la connexion

Étapes de la méthode pour configurer font-awesome5 dans vue

3. Configurez font-awesome

dans main.js

import fontawesome from '@fortawesome/fontawesome'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import solid from '@fortawesome/fontawesome-free-solid'
import regular from '@fortawesome/fontawesome-free-regular'
import brands from '@fortawesome/fontawesome-free-brands'
fontawesome.library.add(solid)
fontawesome.library.add(regular)
fontawesome.library.add(brands)
Vue.component('font-awesome-icon', FontAwesomeIcon)

Copier après la connexion

Étapes de la méthode pour configurer font-awesome5 dans vue

4. Utilisez

<font-awesome-icon></font-awesome-icon>

Copier après la connexion

sur la page vue Bien sûr, il n'est pas nécessaire qu'il soit écrit comme font-awesome. Balise -icon. Elle se trouve juste à l'intérieur du composant et de main.js. Contrairement à Vue.component, Vue.component de main.js le traite simplement comme un composant global. In:icon="['Style','Nom du graphique sans préfixe de style']",

Étapes de la méthode pour configurer font-awesome5 dans vue

Ceux ci-dessus utilisent font-awesome 5.0.13

Pour la version 5.6.3, car Font Awesome SVG Core a été ajouté, l'installation de 5.6.3 :
1 Installer la configuration de base de fontawesome

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/vue-fontawesome

Copier après la connexion

2. dans main.js

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(fas)
Vue.component('font-awesome-icon', FontAwesomeIcon)

Copier après la connexion

3. Dans la page, vous pouvez écrire