NuxtアプリでANTデザインシステムのセットアップとカスタマイズ

UIライブラリは、面倒でカスタマイズが難しいと感じることがありますが、Ant Designはユーザーフレンドリーで柔軟なデフォルト、エレガントなデザインで際立っています。これにより、私のツールキットに歓迎されています。

Nuxt.JSとANTのデザインは強力な組み合わせであり、特にNUXTの静的サイト生成機能を備えた最適化されたパフォーマンスのために、NUXTのコードスプリッティングとツリーシェーキを活用します。これにより、ANTデザインなどのリッチUIライブラリを使用する場合でも、高性能アプリケーションが可能になります。

包括的なドキュメントは現在制限されているため、それらを統合するにはいくつかのステップが必要です。プロセスを歩きましょう。

ANTデザインをNUXTアプリに統合します

まず、必要なパッケージをインストールします。

 Yarnは、Ant-Design-Vueを少ないローダーを追加します
＃ または
NPMインストールAnt-Design-Vueが少ないローダーが少なくなります

次に、ANTデザインをグローバルに登録するためのプラグイン（ antd-ui.js ）を作成します。

 「Vue」からVueを輸入する
'ant-design-vue/lib」からantdをインポートする

vue.use（antd）

注：標準のANTデザインのセットアップとは異なり、グローバルCSSをインポートしていません。代わりに、カスタマイズを容易にするために、より少ない変数を介してスタイルを管理します。

次に、nuxt（ nuxt.config.js ）を構成します：

1. プラグインを登録します：

   プラグイン：["@/プラグイン/antd-ui"]、

2. コンパイルを減らすことを可能にします：

   建てる： {
     ローダー：{
       少ない： {
         Lessoptions：{
           JavaScriptEnabled：true、
         }、
       }、
     }、
   }、

3. より少ない変数のためにグローバルスタイルシートを指定します。

    CSS：[
     「〜/assets/variables.less」
   ]、、

ANT Designのデフォルトをインポートしてオーバーライドを適用するには、 variables.less作成しません/assets

 @import'〜ant-design-vue/dist/antd.less ';

@Primary-Color：＃1890ff;
@link-color：＃1890ff;
@success-color：＃52c41a;
@Warning-Color：＃faad14;
@error-color：＃f522d;
@font-size-base：14px;
@Heading-Color：RGBA（0、0、0、0.85）;
@Text-Color：RGBA（0、0、0、0.65）;
@text-color-secondary：rgba（0、0、0、0.45）;
@Disabled-Color：RGBA（0、0、0、0.25）;
@Border-Radius-Base：4px;
@border-color-base：＃d9d9d9;
@box-shadow-base：0 2px 8px rgba（0、0、0、0.15）;

それでおしまい！ nuxtはコンポーネントのインポートを自動的に処理します。変数でカバーされていない非常に具体的なスタイルのオーバーライドについては、 layouts/default.vueファイル内のスタイルを調整します。

Ant DesignとNuxtは、迅速なアプリケーション開発のための合理化された効率的なフレームワークを提供します。楽しむ！

以上がNuxtアプリでANTデザインシステムのセットアップとカスタマイズの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。