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 :locale="locale">
      <a-layout style="min-height: 100vh">
        <a-layout-content style="margin: 16px">
          <router-view />
        </a-layout-content>
      </a-layout>
    </a-config-provider>
  </div>
</template>

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

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

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

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