Einrichtung und Anpassung des Ant Design Systems in einer Nuxt App

Ich arbeite normalerweise nicht mit UI-Bibliotheken, da diese umständlich und schwer zu überschreiben sein können, was zu einer überladenen Anwendung führen kann. Allerdings hat Ant Design kürzlich meine Zuneigung gewonnen, da es einfach zu bedienen ist, erweiterbare Standardeinstellungen hat und ein dezentes Design aufweist.

Nuxt und Ant Design funktionieren gut zusammen, teilweise dank der Code-Splitting- und Tree-Shaking-Fähigkeiten von Nuxt, ganz zu schweigen von der neuen statischen Ziel-Deployment-Option von Nuxt. Ich kann eine App mit Ant Design mit hervorragenden Leistungswerten bereitstellen.

Die Kombination der beiden war etwas knifflig und es gibt nicht viele Dokumentationen dazu, wie man es macht. Daher folgen nun die Schritte, die Sie benötigen, um es einzurichten. Lassen Sie uns loslegen!

Ant.design installieren

Der erste Schritt ist die Installation des Pakets ant-design-vue, zusammen mit Less.js und less-loader, die wir benötigen, um unsere Less-Variablen zu erstellen.

yarn add ant-design-vue less less-loader
# or
npm i ant-design-vue less less-loader

Nun teilen wir Nuxt mit, es über ein Plugin global zu verwenden. Wir erstellen eine Datei namens antd-ui.js.

import Vue from 'vue'
import Antd from 'ant-design-vue/lib'

Vue.use(Antd)

Sie werden feststellen, dass wir, im Gegensatz zum im Ant Design Getting Started Guide beschriebenen Prozess, die dort erwähnte globale CSS-Datei nicht importieren. Das liegt daran, dass wir stattdessen die Basisvariablen-Less-Datei manuell importieren werden, um sie überschreiben zu können.

In unserer Datei nuxt.config.js haben wir ein paar Dinge zu tun. Zuerst registrieren wir das soeben erstellte Plugin.

plugins: ["@/plugins/antd-ui"],

Als nächstes lassen wir webpack wissen, dass wir Less bauen möchten.

build: {
   loaders: {
     less: {
       lessOptions: {
         javascriptEnabled: true,
       },
    },
  },
}

Zuletzt müssen wir ein globales Stylesheet für unsere Variablen erstellen, das Ant Designs Standardwerte sowie unsere Überschreibungen importiert.

css: [
  "~/assets/variables.less"
],

Wir sehen, dass diese Datei in einem /assets-Ordner liegt, also erstellen wir diesen. Wir erstellen darin eine Datei namens variables.less und importieren die Less-Variablen von Ant Design.

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

Unterhalb dieser Zeile gibt es unzählige Variablen, die Sie überschreiben können. Dies ist nur eine Stichprobe. Die restlichen Variablen finden Sie hier, und Sie müssen sie mit ihrem @-Präfix einfügen und können sie nach Belieben ändern.

@primary-color: #1890ff; // primary color for all components
@link-color: #1890ff; // link color
@success-color: #52c41a; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(0, 0, 0, 0.85); // heading text color
@text-color: rgba(0, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 4px; // major border radius
@border-color-base: #d9d9d9; // major border color
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // major shadow for layers

Wir sind fertig! Es ist nicht nötig, das Benötigte in jede Komponente zu importieren, da Nuxt sich jetzt darum kümmert. Wenn Sie sehr spezifische Stile überschreiben möchten, die nicht in den Variablen enthalten sind, können Sie die entsprechenden Klassen finden und sie auch in Ihrer Datei layouts/default.vue überschreiben.

Ant.design und Nuxt bieten Ihnen ein großartiges Framework, um Apps sehr schnell und einfach zu erstellen. Viel Spaß!

Ant.design installieren

Kommentare