Vue の elementUI はカスタム テーマを実装します

vue を使用してプロジェクトと elementUI を開発します。公式 Web サイトの記述方法に従って、プロジェクトの要件に合わせてテーマをカスタマイズできます。2 つの方法を実装するための具体的な手順は次のとおりです (公式ドキュメントを参照してください)。テーマの公式ドキュメントをカスタマイズするため)、最初に言っておきますが、プロジェクトは書き込みに scss を使用せず、テーマ ツールの方法 (より一般的に使用されます) を使用します

最初の方法: コマンド ライン テーマ ツールを使用します

vue を使用します-cli でプロジェクトをインストールし、element-ui を導入します (具体的には 2 番目の方法の導入を参照してください)

1. テーマツールをインストールします

npm i element-theme -g

2. からチョークテーマをインストールします。 npm または GitHub から最新のコードをプルします

# 从 npm
npm i element-theme-chalk -D
# 从 GitHub
npm i https://github.com/ElementUI/theme-chalk -D

2. 変数ファイルを初期化します

et -i [可以自定义变量文件，默认为element-variables.scss]
> ✔ Generator variables file

このとき、ルートディレクトリに element-variables.scss (またはカスタマイズされたファイル) が生成されます。これは、おおよそ次のとおりです:

$--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
$--color-success: #67c23a !default;
$--color-warning: #eb9e05 !default;
$--color-danger: #fa5555 !default;
$--color-info: #878d99 !default;
...

3. 変数を変更します

element-variables.scss ファイルを直接編集します。たとえば、テーマの色を必要な色 (紫など) に変更します

$--color-primary: purple;

4. テーマをコンパイルします

変数を変更した後、コンパイルします。テーマ (コンパイル後に変数が再度変更された場合は、再コンパイルする必要があります)

et
> ✔ build theme font
> ✔ build element theme

5. はじめにテーマをカスタマイズします

最後のステップは、コンパイルされたテーマ ファイルをプロジェクトに導入することです (コンパイルされたファイルはテーマ ファイルの下にあります)デフォルトではルート ディレクトリにありますが、-o パラメータでパッケージ ディレクトリを指定することもできます)、それをエントリ ファイル main.js に導入します

import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
Vue.use(ElementUI)

プロジェクトにスタイルをいくつか書いて、テーマの色が変わるかどうかを確認してください: (テーマ色が紫に変わります)

<p>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
 </p>

2 番目の方法: 要素のスタイル変数を直接変更します

プロジェクト内の要素のスタイル変数を直接変更します (前提条件 ドキュメントも scss を使用して記述されています)

1. まず、vue で新しいプロジェクトをインストールします-cli:

1、vue のインストール:

npm i -g vue

2、プロジェクト ディレクトリに vue-cli をインストール:

npm i -g vue-cli

3、Webpack に基づいて新しいプロジェクト (vue-project) を作成します

vue init webpack vue-project

4 次のコマンドを入力します。行を順番に実行し、vue-project

cd vue-project
npm i
npm run dev

2を実行します。 elementUIとsass-loader、node-sassをインストールします（プロジェクトに依存するプラグインを書き込むにはscssを使用します）

1、element-ui

npm i element-ui -S

をインストールします。 sass-loader、node-sass

npm i sass-loader node-sass -D

ここでお話しさせていただきますが、webpack.base.conf.js ファイルを設定する必要はありません。vue-loader はさまざまな種類のファイルに基づいて、対応するローダーを設定してパッケージ化します。スタイル ファイル (興味がある場合は、vue-loader のコア コードを参照してください)

3. 要素のスタイル変数を変更します

1. src の下に element-variables.scss ファイルを作成します (名前はカスタマイズ済み)、次のコードを記述します:

/* 改变主题色变量 */
$--color-primary: teal;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts';
@import "../node_modules/element-ui/packages/theme-chalk/src/index";

2. 上記のファイルを main.js のエントリ ファイルに導入するだけです

import Vue from 'vue'
import Element from 'element-ui'
import './element-variables.scss'
Vue.use(Element)

ボタンのデフォルトの色など、いくつかのスタイルをファイルに導入して見てみましょう。

<p>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
 </p>

これはカスタムのものになっています。その他の変更については、element-variable.scss ファイル内の変数を変更するだけです

関連する推奨事項:

elementui のデフォルトのスタイル変更メソッドの共有

vue 2.0 と elementUI の実装ブレッドクラム ナビゲーション バー メソッド コード

は、vue+elementUI 部分を使用してコンポーネント

の実装メソッドを導入します

以上がVue の elementUI はカスタム テーマを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。