Configurar y personalizar el sistema Ant Design en una aplicación Nuxt

Normalmente no trabajo con bibliotecas de UI porque pueden ser engorrosas y difíciles de anular, lo que puede contribuir a una sobrecarga. Sin embargo, Ant Design recientemente se ha ganado algo de mi afecto porque es fácil de usar, tiene valores predeterminados extensibles y presenta un diseño delicado.

Nuxt y Ant Design funcionan bien juntos, en parte debido a las capacidades de división de código y agitación de árboles de Nuxt, sin mencionar la nueva opción de implementación de objetivos estáticos de Nuxt. Puedo ofrecer una aplicación usando Ant Design con excelentes puntuaciones de rendimiento.

Combinar los dos fue un poco complicado y no hay mucha documentación sobre cómo hacerlo, por lo que a continuación se detallan los pasos necesarios para configurarlo. ¡Empecemos!

Instalar Ant.design

El primer paso es instalar el paquete ant-design-vue, junto con Less.js y less-loader, que necesitaremos para crear nuestras variables Less:

yarn add ant-design-vue less less-loader# ornpm i ant-design-vue less less-loader

Ahora digamos a Nuxt que lo use globalmente a través de un complemento. Crearemos un archivo llamado antd-ui.js:

import Vue from 'vue'import Antd from 'ant-design-vue/lib'Vue.use(Antd)

Puede notar que, a diferencia del proceso descrito en la guía de introducción a Ant Design, no importamos el archivo CSS global que mencionan. Esto se debe a que, en su lugar, importaremos manualmente la variable base Less file para poder anularla.

Tenemos algunas cosas que hacer en nuestro nuxt.config.jsarchivo. Primero, registremos el complemento que acabamos de crear:

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

A continuación, le haremos saber al paquete web que nos gustaría crear Less:

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

Finalmente, necesitamos crear una hoja de estilo global para nuestras variables que importe los valores predeterminados de Ant Design así como nuestras anulaciones:

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

Podemos ver que este archivo existe en una /assetscarpeta, así que hagámoslo. Crearemos un archivo allí llamado variables.lesse importaremos las variables Less de Ant Design:

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

Debajo de esta línea, hay innumerables variables que puedes anular. Esto es sólo una muestra. El resto de las variables están aquí, deberás incluirlas por su @y puedes cambiarlas a lo que desees:

@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

¡Estamos listos para comenzar! No es necesario importar lo que necesitamos en cada componente porque Nuxt ahora se encargará de eso. Si desea anular estilos muy específicos que no están incluidos en las variables, puede buscar las clases asociativas y anularlas layouts/default.vuetambién en su archivo.

Ant.design y Nuxt le brindan un excelente marco para crear aplicaciones de manera muy rápida y sencilla. ¡Disfrutar!