So verwenden Sie antd in uniapp

Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie entstehen unzählige hervorragende UI-Komponentenbibliotheken, und antd ist eine davon. antd ist eine Open-Source-UI-Komponentenbibliothek, die auf React basiert. Sie zeichnet sich durch Benutzerfreundlichkeit, Ästhetik und Anpassbarkeit aus und wird häufig verwendet.

Und uniapp ist ein plattformübergreifendes Anwendungsframework auf Basis von Vue.js, das mehrere Plattformen (wie WeChat-Miniprogramme, H5, App) gleichzeitig entwickeln kann und die Vorteile einer plattformübergreifenden und effizienten Entwicklung bietet. Wie verwende ich antd in Uniapp? In diesem Artikel wird es Ihnen ausführlich vorgestellt.

1. Erstellen Sie das Uniapp-Projekt

Zuerst müssen wir lokal ein Uniapp-Projekt erstellen. Wenn Sie uniapp bereits genutzt haben, können Sie diesen Schritt direkt überspringen.

Führen Sie den folgenden Befehl in der Befehlszeile aus:

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

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

# 进入项目目录
cd my-project

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

Unter den oben genannten Befehlen besteht der erste Befehl darin, die globale Vue-CLI zu installieren, und der zweite Befehl darin, die Voreinstellung uni-preset-vue zu verwenden, um eine Uniapp mit dem Namen my zu erstellen -Projektprojekt, der dritte Befehl besteht darin, das Projektverzeichnis aufzurufen, und der letzte Befehl besteht darin, das Projekt auszuführen.

Wenn Sie das Projekt auf anderen Plattformen (wie H5 oder App) ausführen möchten, können Sie mp-weixin im Ausführungsbefehl durch h5 oder ersetzen app-plus. mp-weixin替换为h5或app-plus。

二、安装antd

创建好uniapp项目后，我们需要安装所需的npm包以便使用antd。

在命令行中执行如下命令：

npm install ant-design-vue --save

该命令会下载antd的所有资源文件，并将其保存到项目的node_modules目录中。

三、注册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两个组件。同时，在<template>标签中，我们添加了一个a-config-provider标签，这是antd的配置组件，用于设置antd语言、主题等。在<script>中，我们将ConfigProvider和Layout两个组件注册到了App.vue中，使得它们可以在整个应用中使用。

同时，我们还需要在main.js文件中全局注册antd组件以便在Vue组件中使用。在main.js文件中添加如下代码：

import Vue from 'vue';
import { Button, DatePicker } from 'ant-design-vue';
import App from './App';
import router from './router';
import store from './store';
import 'ant-design-vue/dist/antd.css';

Vue.config.productionTip = false;

// 注册antd组件
Vue.use(Button);
Vue.use(DatePicker);

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

在以上代码中，我们首先引入了Button和DatePicker组件，然后在Vue实例中使用Vue.use函数全局注册了这两个组件，以便在Vue组件中可以直接使用。

四、使用antd组件

注册好antd组件后，我们就可以在Vue组件中使用antd组件了。以下是一个简单的示例：

<template>
  <div>
    <a-button type="primary" @click="showModal">打开对话框</a-button>
    <a-modal v-model="visible" title="对话框标题">
      <p>对话框内容</p>
    </a-modal>
  </div>
</template>
<script>
import { Button, Modal } from 'ant-design-vue';
export default {
  components: {
    'a-button': Button,
    'a-modal': Modal,
  },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
  },
};
</script>

以上代码中，我们在Vue组件中使用了antd的Button和Modal组件。其中，<a-button>标签是我们在Vue组件中自定义的标签，代表着antd的Button组件；<a-modal>标签则代表着antd的Modal

2. Antd installieren

Nachdem wir das Uniapp-Projekt erstellt haben, müssen wir die erforderlichen npm-Pakete installieren, um antd verwenden zu können. 🎜🎜Führen Sie den folgenden Befehl in der Befehlszeile aus: 🎜rrreee🎜Dieser Befehl lädt alle Ressourcendateien von antd herunter und speichert sie im Verzeichnis node_modules des Projekts. 🎜🎜3. Antd-Komponente registrieren 🎜🎜Nach der Installation von antd müssen wir die Komponente in Uniapp registrieren, um sie verwenden zu können. 🎜🎜Fügen Sie den folgenden Code in die Datei App.vue ein: 🎜rrreee🎜Im obigen Code haben wir zunächst die beiden Komponenten ConfigProvider und Layouteingeführt > . Gleichzeitig haben wir im Tag <template> ein Tag a-config-provider hinzugefügt, das die Konfigurationskomponente von antd ist und zum Festlegen von antd verwendet wird Sprache, Thema usw. . In <script> haben wir die beiden Komponenten ConfigProvider und Layout in App.vue registriert und verfügbar gemacht während der gesamten Anwendung. 🎜🎜Gleichzeitig müssen wir die antd-Komponente auch global in der Datei main.js registrieren, um sie in der Vue-Komponente verwenden zu können. Fügen Sie den folgenden Code in die Datei main.js ein: 🎜rrreee🎜Im obigen Code haben wir zuerst die Komponenten Button und DatePicker eingeführt Dann verwendet die Vue-Instanz die Funktion Vue.use, um diese beiden Komponenten global zu registrieren, sodass sie direkt in der Vue-Komponente verwendet werden können. 🎜🎜4. Antd-Komponente verwenden 🎜🎜Nachdem wir die Antd-Komponente registriert haben, können wir die Antd-Komponente in der Vue-Komponente verwenden. Das Folgende ist ein einfaches Beispiel: 🎜rrreee🎜Im obigen Code verwenden wir die Komponenten Button und Modal von antd in der Vue-Komponente. Unter diesen ist das <a-button>-Tag das Tag, das wir in der Vue-Komponente angepasst haben und das die Button-Komponente von antd; darstellt. modal> Das -Tag repräsentiert die Modal-Komponente von antd. Auf diese Weise können wir die antd-Komponente direkt in der Vue-Komponente verwenden. 🎜🎜Zusammenfassend sind dies die detaillierten Schritte zur Verwendung von antd in uniapp. Durch die oben genannten Schritte können wir die antd-Komponentenbibliothek im Uniapp-Projekt genießen und die Schönheit der Benutzeroberfläche und das Benutzererlebnis der Anwendung verbessern. 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie antd in uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!