vueページで要素コンポーネントを使用する方法（手順）

Vue は、有名な国内企業の Element チームによって作成された人気のフロントエンド開発フレームワークです。Element は、Vue 2.0 をベースにしたデスクトップ コンポーネント ライブラリです。マテリアル デザイン設計標準に従い、豊富なコンポーネント セットを提供します。豊富な機能と優れたユーザー インタラクション エクスペリエンスを備えており、より便利で美しいユーザー インターフェイスを構築するのに非常に適しています。では、Vue ページで Element コンポーネントを使用するにはどうすればよいでしょうか?次は一緒に学びましょう。

1. Element コンポーネント ライブラリのインストール

Element を使用する前に、まずインストールする必要があります。ターミナルでプロジェクト ディレクトリに入り、次のコマンドを実行して Element をインストールします:

npm i element-ui -S

ここでの -S は、Element をプロジェクトの依存環境としてインストールすることを意味します。yarn を使用している場合は、コマンド ライン

yarn add element-ui

インストールが完了したら、main.js に Element を導入します:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

ここの Vue.use メソッドは、Element プラグインを登録するために使用されます。 Vue プロジェクトの Element コンポーネントを使用します。

2. Element コンポーネントの使用

続いて、Vue ページで、Element コンポーネントを導入して、それが提供するさまざまなコンポーネントを使用できます。たとえば、ボタンを使用する必要がある場合、次のコードをコード内に直接記述できます。

<template>
  <div>
    <el-button>按钮</el-button>
  </div>
</template>

ここでの el-button は、Element プラグインで定義されたボタン コンポーネントです。このプロセスでは、必要なコンポーネントを自由に選択してプロジェクト コードに挿入し、複雑なページのインタラクティブな効果を実現できます。

3. カスタマイズされたテーマ

要素には多くの基本コンポーネントが含まれていますが、プロジェクト内で色、サイズ、フォントなどをカスタマイズする必要がある状況に遭遇した場合は、テーマ非常に簡単にカスタマイズすることもできます。テーマのカスタマイズは、パラメータの変更とスタイルのオーバーライドの 2 つの方法に分けることができます。

3.1 パラメータの変更

プロジェクト内で個別にパラメータを定義すると、要素コンポーネントやカスタマイズされたコンポーネントなどのグローバル コンポーネントに効果的です。

$--color-primary: #1ED2EB;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;

@import './node_modules/element-ui/packages/theme-chalk/src/index';

3.2 スタイルのオーバーライド

グローバル スタイルを変更して、$style によって生成されたスタイルをオーバーライドします。

まず、次のコマンドを使用して、Element テーマ パッケージをローカルにダウンロードする必要があります:

npm i element-theme -S

ダウンロードが完了したら、Element テーマ パッケージを選択して、独自のテーマのコンパイルを開始できます。たとえば、Element のデフォルトのテーマを選択します。

次のコンテンツを main.js に追加します。

import ET from 'element-theme'

ET.theme('default', {
  // your styles here
})

ET.theme メソッドは、カスタム テーマをコンパイルして出力するために使用されます。ここで、default はテーマの名前を表します。変更したいテーマの場合は、ここで名前をカスタマイズできます。 ET.theme を使用してテーマを作成する場合は、Less 構文に従う必要があることに注意することが重要です。

異なるページで異なるカスタム テーマを使用する場合は、スタイル ファイルを追加して、ページごとに個別のテーマを定義できます。たとえば、login.vue でピンクのテーマを起動したい場合は、次のコードを記述できます:

// login.vue
<style lang="scss">
  @import '/element-variables.scss';

  $--color-primary: #ff54a9;
  $--color-success: #67C23A;
  $--color-warning: #E6A23C;
  $--color-danger: #F56C6C;

  @import './node_modules/element-ui/packages/theme-chalk/src/index';
</style>

上記は、Vue ページで Element コンポーネントを使用する基本的な内容です。もちろん、Element コンポーネント ライブラリには、テーブル、ページング、メッセージ、ダイアログ ボックスなど、他にも多くのコンポーネントがあります。これらのコンポーネントの使用方法については、Element のドキュメントを参照してください。コンポーネントを挿入して使用する方法が完了したら、カスタム テーマを使用して色とスタイルを変更し、ページにさらなる美しさとインタラクティブ性を追加できます。この記事が Vue と Element の学習に役立つことを願っています。

以上がvueページで要素コンポーネントを使用する方法（手順）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。