フロントエンド技術の継続的な発展により、さまざまな優れた UI コンポーネント ライブラリが無限に登場しますが、antd もその 1 つです。 antdはReactをベースにしたオープンソースのUIコンポーネントライブラリで、使いやすさ、見た目の美しさ、カスタマイズ性などの特徴を持ち、広く利用されています。
Uniapp は、Vue.js をベースにしたクロスプラットフォーム アプリケーション フレームワークで、複数のプラットフォーム (WeChat ミニ プログラム、H5、App など) を同時に開発でき、クロスプラットフォームと効率的な開発。では、uniapp で antd を使用するにはどうすればよいでしょうか?この記事では詳しく紹介していきます。
まず、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
または # に置き換えることができます。 ##アプリプラス。
npm install ant-design-vue --save
node_modules ディレクトリに保存します。
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 つのコンポーネント。同時に、
タグ内に、antd の構成コンポーネントであり、antd 言語の設定に使用される
a-config-provider タグを追加しました。テーマなど