ホームページ > 記事 > ウェブフロントエンド > 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 --saveBootstrap の依存関係を 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 bulmaBulma をダウンロードしたら、
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 --saveImport 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
関連する推奨事項:
プログラミング関連の知識については、 プログラミング コース をご覧ください。 !
以上がCSS フレームワークを Vue に統合するにはどうすればよいですか?手法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。