CSS フレームワークを Vue に統合するにはどうすればよいですか?手法の紹介

次の Vue.js チュートリアル コラムでは、CSS フレームワークを Vue.js に統合する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#CSS フレームワークは多くの理由で優れています。たとえば、コードが理解しやすく、Web アプリケーションの保守が容易で、プロトタイプを実装する際の手順が簡素化されます。 CSS フレームワークを VUE に統合する方法は一般的に同じですが、この記事では広く使用されている Bootstrap 4 を例に取り上げます。

#準備

CSS フレームワークをダウンロードする前に、まず Vue CLI で新しいプロジェクトを作成します:

npm install vue-cli
vue init webpack project-name

Bootstrap 4 のインストールと統合

新しい Vue プロジェクトを作成して初期化した後、

npm を使用して Bootstrap 4 をダウンロードします。 Bootstrap 4 の JavaScript は jQuery に依存しているため、jQuery もインストールする必要があります。

npm install bootstrap jquery --save

Bootstrap の依存関係を Vue の

main.js ファイルに追加して、プログラム全体でグローバルに使用できるようにする必要があります。

import './../node_modules/jquery/dist/jquery.min.js';
import './../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './../node_modules/bootstrap/dist/js/bootstrap.min.js';

アプリケーションのビルドに失敗した場合は、

popper.js 依存関係をインストールする必要があります。その後、エラーは発生しないはずです。

npm install --save popper.js

このようにして、Bootstrap 4 は Vue に統合されます。

Bulma のインストールと統合

Bulma は、Flexbox をベースとした軽量で柔軟な CSS フレームワークです。 GitHub には 25,000 個以上のスターが付いています。

Bootstrap とは異なり、Bulma には CSS のみが含まれており、jQuery や JavaScript には依存しません。

Bulma のインストール:

npm install bulma

Bulma をダウンロードしたら、

main.js を開いてインポートします。

/* main.js */
import './../node_modules/bulma/css/bulma.css';

このようにして、Bulma は Vue.js プログラムに統合されます。

Foundation のインストールと統合

Foundation は優れた CSS フレームワークです。フレームは 2 つあり、1 つは電子メール用、もう 1 つは Web サイト用です。私たちは Web で Foundation を使用することだけに興味があるため、必要なのは

Foundation Sites フレームワークです。

Foundation Sites をインストールし、

main.js ファイルにインポートします:

$ npm install foundation-sites --save

Import it into your

main.js ドキュメント内:

/* main.js */
import './../node_modules/foundation-sites/dist/css/foundation.min.css';
import './../node_modules/foundation-sites/dist/js/foundation.min.js';

Vue のベスト プラクティス

上記の 3 つのフレームワークは非常に似ており、すべて行と列に基づいています。ユーザー インターフェイスの作成に使用できます。グリッドを使用すると、要素にアタッチされたクラスを追加または変更するだけで、デバイスの幅に基づいて列の幅を簡単に変更できます。

注: 次の例では Bootstrap4 を使用します。ただし、行と列のフレームワークに基づくこのアプローチは、すべての CSS フレームワークに適用されます。

可能な限りフレームワーク クラスを使用することをお勧めします。使いやすさを考慮して、これらのフレームワークは拡張可能でカスタマイズできるように慎重に設計されています。独自のクラスで独自のボタンを作成する代わりに、Bootstrap、Bulma、または Foundation を使用して同じことを行うことができます。

<!-- Bootstrap -->
<button class="btn btn-primary btn-lg">Bootstrap 大按钮</button>

<!-- Bulma -->
<button class="button is-primary is-large">Bulma 大按钮</button>

を使用する代わりに、

btn-primary (Bootstrap) または is-primary (Bulma) が独自のスタイルの色を参照するように各色を設定できます。 Bootstrap と Bulma に同梱されるデフォルトのカラー。

独自のスタイルで独自のテーマを作成する必要がある場合は、フレームワークを直接変更したくないため、フレームワークのグローバル スタイルをオーバーライドするグローバル スタイル シートを作成できます。

独自のスタイルを作成する

独自の CSS テーマを作成したい場合は、まず新しい CSS ファイルを作成してそれを配置する必要があります

assets ディレクトリにあるファイルを App.vue ファイルにインポートします。

/* App.vue */
import '@/assets/styles.css';
...

独自のものと一致するいくつかのデフォルト スタイルをブートストラップ コンポーネントにマップしてみてください:

/* styles.css */
/* Buttons
--------------------------- */
.btn-primary   { background: #00462e; color: #fff; } /* dark green */
.btn-secondary { background: #a1b11a; color: #fff; } /* light green */
.btn-tertiary  { background: #00b2e2; color: #fff; } /* blue */
.btn-cta       { background: #f7931d; color: #fff; } /* orange */

/* Forms
--------------------------- */
.form-control {
  border-radius: 2px;
  border: 1px solid #ccc;
}

.form-control:focus,
.form-control:active {
  outline: none;
  box-shadow: none;
  background: #ccc;
  border: 1px solid #000;
}

#コンポーネントの再利用性に注意してください Vue.js で CSS フレームワークを使用する場合は、コンポーネントの再利用性を必ず念頭に置いてください。レイアウト CSS をコンポーネント自体と混合することはできません。このコンポーネントを再利用するだけでよい場合もあれば、別のレイアウトが必要な場合もあります。

悪い例

<!--Navigation.vue-->
<template>
  <p class="row">
    <p class="col">
      <nav>
        <ul>
          <li><a href="#">Navigation Item #1</a></li>
          <li><a href="#">Navigation Item #2</a></li>
          <li><a href="#">Navigation Item #3</a></li>
        </ul>
      </nav>
    </p>
  </p>
</template/>

<!--App.vue-->
<template>
  <p>
    ...
    <Navigation/>
  </p>
</template/>

このコンポーネントはヘッダーとフッターの両方で使用できます。この 2 つは異なって見えるはずですが、同じ情報が含まれています。レイアウト HTML を削除し、その親コン​​ポーネントまたは基本コンポーネントに移動しましょう。

良い例

<!--Navigation.vue-->
<template>
  <nav>
    <ul>
      <li><a href="#">Navigation Item #1</a></li>
      <li><a href="#">Navigation Item #2</a></li>
      <li><a href="#">Navigation Item #3</a></li>
    </ul>
  </nav>
</template/>

<!--App.vue-->
<template>
  ...
  <p class="row">
    <p class="col">
      <Navigation/>
    </p>
  </p>
</template/>

概要CSS フレームワークにより、開発作業が容易になります。これらにより、テンプレート コードに一貫性があり、保守と作成が容易になります。ボタンを最初から作成するなどの一般的なタスクに時間を浪費するのではなく、プログラムの機能と全体的なデザインに集中できます。

Bootstrap、Bulma、Foundation は一般的に使用される 3 つのフレームワークに過ぎませんが、これらに限定されません。 Semantic UI や UI Kit など、探索できるフレームワークも多数あります。

英語の元のアドレス: https://www.digitalocean.com/community/tutorials/vuejs-css-frameworks-vuejs

著者: Dave Berning

関連する推奨事項:

2020 年のフロントエンド vue インタビューの質問の概要 (回答付き)

#vue チュートリアルの推奨事項: 2020 年の最新 5 つの選択vue.js ビデオ チュートリアルの

プログラミング関連の知識については、 プログラミング コース をご覧ください。 ！

以上がCSS フレームワークを Vue に統合するにはどうすればよいですか?手法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。