uniappでantdを使用する方法

フロントエンド技術の継続的な発展により、さまざまな優れた UI コンポーネント ライブラリが無限に登場しますが、antd もその 1 つです。 antdはReactをベースにしたオープンソースのUIコンポーネントライブラリで、使いやすさ、見た目の美しさ、カスタマイズ性などの特徴を持ち、広く利用されています。

Uniapp は、Vue.js をベースにしたクロスプラットフォーム アプリケーション フレームワークで、複数のプラットフォーム (WeChat ミニ プログラム、H5、App など) を同時に開発でき、クロスプラットフォームと効率的な開発。では、uniapp で antd を使用するにはどうすればよいでしょうか?この記事では詳しく紹介していきます。

1. uniapp プロジェクトを作成する

まず、uniapp プロジェクトをローカルに作成する必要があります。すでに uniapp を使用している場合は、この手順を直接スキップできます。

コマンドラインで次のコマンドを実行します:

# 全局安装cli
npm install -g @vue/cli

# 创建uniapp项目
vue create -p dcloudio/uni-preset-vue my-project

# 进入项目目录
cd my-project

# 运行项目（微信小程序）
npm run dev:mp-weixin

上記のコマンドのうち、最初のコマンドはグローバル Vue CLI をインストールするもので、2 番目のコマンドは uni-preset を使用して作成するものです。 -vue preset my-project という名前の uniapp プロジェクトの場合、3 番目のコマンドはプロジェクト ディレクトリに入ることであり、最後のコマンドはプロジェクトを実行することです。

他のプラットフォーム (H5 やアプリなど) でプロジェクトを実行する場合は、実行コマンドの mp-weixin を h5 または # に置き換えることができます。 ##アプリプラス。

2. antd のインストール

uniapp プロジェクトを作成した後、antd を使用するために必要な npm パッケージをインストールする必要があります。

コマンド ラインで次のコマンドを実行します。

npm install ant-design-vue --save

このコマンドは、antd のすべてのリソース ファイルをダウンロードし、プロジェクトの

node_modules ディレクトリに保存します。

3. antd コンポーネントの登録

antd をインストールした後、コンポーネントを使用するには uniapp に登録する必要があります。

次のコードを

App.vue ファイルに追加します。

<template>
  <div>
    <!-- 添加antd样式 -->
    <a-config-provider>
      <a-layout>
        <a-layout-content>
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-config-provider>
  </div>
</template>

<script>
import { ConfigProvider, Layout } from &#39;ant-design-vue&#39;;
import &#39;ant-design-vue/dist/antd.css&#39;;

export default {
  components: {
    &#39;a-config-provider&#39;: ConfigProvider,
    &#39;a-layout&#39;: Layout,
  },
  data() {
    return {
      // 设置antd语言为中文
      locale: &#39;zh-CN&#39;,
    };
  },
};
</script>

上記のコードでは、最初に

ConfigProvider と Layout を導入しました。 2 つのコンポーネント。同時に、