elementUI を使用して Vue でカスタム テーマ メソッドを実装する方法

以下に、Vue の elementUI を使用してカスタム テーマを実装する方法に関する記事を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

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

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

vue-cliを使用してプロジェクトをインストールし、要素-uiを導入します（詳細は2番目の方法の導入を参照してください）

1. インストールツール

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

npm i element-theme -g

2. Chalk テーマをインストールします。npm からインストールするか、GitHub コードから最新のものをプルします

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

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

このとき、element-variables.scss (またはカスタマイズされたファイル) は次のようになります。

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

3. 変数を変更します

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;
...

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

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

$--color-primary: purple;

5. カスタムテーマの導入

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

et
> ✔ build theme font
> ✔ build element theme

を導入します

エントリ ファイル main.js に変更し、プロジェクトにいくつかのスタイルを書き込み、テーマの色が変わるかどうかを確認します: (テーマの色が紫に変わります)

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

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

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

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

1、vue をインストールします:

<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、インストールプロジェクト ディレクトリ内の vue-cli:

npm i -g vue

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

npm i -g vue-cli

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

vue init webpack vue-project

を実行します 2. elementUI、sass-loader、node-sass (プロジェクトに依存するプラグインを記述するには scss を使用します)

1、element-ui をインストールします

cd vue-project
npm i
npm run dev

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

npm i element-ui -S

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

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

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

npm i sass-loader node-sass -D

2. 上記のファイルをエントリファイル main.js

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

にインポートし、ボタンなどのいくつかのスタイルをファイルに導入して効果を確認してください

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

デフォルトの色がカスタマイズされた色に変更されました。その他の変更については、element-variable.scss ファイル内の変数を変更するだけです。これは、将来すべての人に役立つことを願っています。

関連記事:

ngrok+express を使用して WeChat インターフェースのデバッグ問題を解決する方法

vue-cli を使用して vue プラグインを作成する方法

vue-cli での vuex の使用 (詳細なチュートリアル)

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