Heim > Artikel > Web-Frontend > Über die Verwendung von vue-fontawesome in vue.js
Dieser Artikel stellt hauptsächlich die Verwendung von vue-fontawesome in der vue.js-Reihe vor. Freunde, die es benötigen, können darauf verweisen
Wurf-Vorwort
Meine aktuelle Arbeit verwendet hauptsächlich das vue.js-Framework für die Entwicklung. Ich weiß nicht viel über vue und bin noch in einem unausgegorenen Zustand, also muss ich mich damit vertraut machen In den letzten zwei Tagen habe ich Scaffolding vue-cli
verwendet, um Projekte zu erstellen und zu spielen. Ich habe hart daran gearbeitet font-awesome
, und ich habe über Github erfahren, dass ein großer Kerl bereits Vue erstellt hat – großartig, also habe ich angefangen zu basteln herum damit...
Ohne weitere Umschweife, fangen wir an!
Vorbereitung
Dies ist die Github-Adresse des Autors: Flugzeug
Um die vollständigen Schritte zu demonstrieren, verwenden Sie ein Gerüst Erstellen Sie ein neues Projekt
Wird erstellt...
Nutzen Sie die Gelegenheit, um ein paar Worte zu plaudern
Der Vorteil dieser Methode besteht darin, dass Sie jedes Symbol selbst anpassen können Geben Sie es dann im SVG-Format aus. Verwenden Sie dann Icon.register
, um ein Symbol zu registrieren:
Wenn viele Symbole vorhanden sind, sind möglicherweise viele SVG-Tags im DOM verstreut . Ich weiß nicht, ob das ein Nachteil ist.
Icon.register({ 'chevron-right': { 'width': 1280, 'height': 1792, 'paths': [{ 'd': 'M1107 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z' }] } });
chevron-right Dies ist der Name des Symbols. Wenn Sie es verwenden, verwenden Sie
<icon name="chevron-right"></icon>
. Definieren Sie ihn einfach normal.
Pfade enthält die Pfadinformationen beim Zeichnen der SVG-Datei des Symbols
Die Installation ist in Ordnung, kommen wir zum Punkt...
Vorbereitung:
vue-awesome installieren
$ npm install vue-awesome --save
Diese einfache Installation ist in Ordnung.
Ergebnisvorschau
Wie Sie auf dem Bild sehen können, ist das Symbol am Ende tatsächlich ein SVG-Tag
icon-Speicherverzeichnis
Um die Entwicklung zu erleichtern, erstellen Sie ein neues src/icons-Verzeichnis, um Icon-JS-Dateien zentral zu speichern
$ cd src/ $ mkdir icons && cmod
Der cmod hier ist 777 Berechtigungen . Da eine virtuelle Maschine verwendet wird, treten häufig Probleme mit den Berechtigungen auf. Geben Sie daher einfach 777 ein (nur lokale Entwicklung).
Symbolkomponente
Laden Sie die Icon.vue-Datei herunter
Gehen Sie hier, um die Icon.vue-Datei herunterzuladen. Es wird empfohlen, das gesamte Projekt zu giten.
Diese Komponente wird zum Erstellen <icon name="your icon name"></icon>
benutzerdefinierter Tags verwendet.
Dann legen Sie Icon.vue im Komponentenverzeichnis ab (Sie können entscheiden, wo es abgelegt werden soll)
Erstellen Sie eine registrierte Symboldatei in src/icons
Legen Sie die registrierten js-Dateien aller Symbole zentral im Verzeichnis ab
Erstellen Sie die Exportdatei index.js, die alle Symbol-js-Dateien importiert
// src/icons/index.js import './chevron-right.js'; // ...... 其他需要的图标文件
Klicken Sie mit der rechten Maustaste auf das Symbol als ein Beispiel: (chevron-right.js)
import Icon from '../components/Icon.vue'; Icon.register({ 'chevron-right': { 'width': 1280, 'height': 1792, 'paths': [{ 'd': 'M1107 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z' }] } });
Der Projekteintrag main.js verweist auf die Schriftartenbibliothek
Die Projekthaupteintragsdatei main.js führt den Bibliothek und die vue-awesome
-Dateiicons/index.js
import Icon from './components/Icon';Führen Sie die Symbolinhaltsdatei ein
import './icons/index.js';Registrieren Sie dann das Symbol als Vue-Komponente
Vue.component('icon', Icon);Nachdem die Registrierung abgeschlossen ist, können wir sie direkt im Code verwenden
Tag <icon></icon>
Ende
Die Schritte sind nach den oben genannten Schritten sehr einfach , wir können die Symbolbibliothek normal verwenden Zusammenfassend sind die Schritte eigentlich die folgenden SchritteSo implementieren Sie Änderungen in Überwachungsobjekten und entsprechenden Werten in Vue
Bei Verwendung von $emit in vue, Wie kann man erkennen, dass die übergeordnete Komponente die Ereignisse der untergeordneten Komponente nicht abhören kann?
Wie verwende ich die globale Eingabeaufforderungsbox-Komponente in Vue?
Das obige ist der detaillierte Inhalt vonÜber die Verwendung von vue-fontawesome in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!