Vue アプリケーション参照ベクトル図

今回は、Vue アプリケーションのリファレンス ベクター グラフィックスについて説明します。以下は実際のケースです。

1. アイコンをダウンロードするには、カスタマイズ可能なベクター アイコンが多数ある icomoon ウェブサイトをお勧めします。もちろん、Alibaba ベクター アイコン ライブラリにアクセスして、必要な小さなアイコンをダウンロードすることもできます。 。クリックして icomoon ウェブサイトに入り、右上隅にある「IcoMoon アプリ」をクリックし、必要なアイコンを見つけて選択し、右下隅にある「フォントを生成」をクリックし、上部にある 2 番目のボタン「設定」をクリックします。左隅をクリックして、ダウンロードするアイコン情報をカスタマイズします。通常は、「フォント名」を変更してから、戻って右下隅の「ダウンロード」をクリックして、アイコンをダウンロードします。

2. ダウンロードしたアイコン圧縮パッケージを解凍し、次のようなファイルを取得します。

3. vue プロジェクトの src フォルダーに新しい共通フォルダーを作成し、ここのフォントを common にコピーします。フォルダーに新しいスタイラスフォルダーを作成し、ここにある style.css をスタイラスにコピーします。この CSS ファイルには、アイコンに関連するスタイル コードが含まれています。これを配置した後、識別しやすいように icon.styl に変更しました。使用するスタイラス プリプロセッサ プロセッサを使用するため、新しいスタイラスを作成します。サフィックス名は styl です。これは意見の問題です。配置後のフォルダ構造は次のとおりです。

4. ここからがポイントです。 はい、解凍したファイル内の style.css の @font-face の URL パスをプロジェクト内のパスに変更する必要があります。 変更内容は次のとおりです。

5. 次に、このファイルを App.vue に導入します。それ以外の場合は効果がありません:

6. 次に、テンプレートに対応するクラス名を書き込み、スタイルを追加します。ページは次のとおりです:

あなたはこの記事を読んだと思います。あなたはケースメソッドをマスターしました。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

vue の全選択機能と逆選択機能

JS インタビューにおける 5 つの共通知識ポイント

以上がVue アプリケーション参照ベクトル図の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。