Configuración y personalización del sistema de diseño Ant en una aplicación Nuxt | Programar Plus

Por lo general, no trabajo con bibliotecas de interfaz de usuario porque pueden ser engorrosas y difíciles de anular, lo que puede contribuir a que se hinchen. Sin embargo, Ant Design se ha ganado recientemente 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 habilidades de Nuxt para dividir el código y sacudir los árboles, sin mencionar la nueva opción de implementación de objetivos estáticos de Nuxt. Puedo servir una aplicación usando Ant Design con excelentes puntajes de rendimiento.

Combinar los dos fue un poco complicado y no hay mucha documentación sobre cómo hacerlo, así que los siguientes son los pasos que necesita 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
# or
npm 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 inicio de Ant Design, no estamos importando el archivo CSS global que mencionan. Esto se debe a que vamos a importar manualmente el archivo Less de la variable base en su lugar para que podamos anularlo.

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

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

A continuación, le haremos saber a webpack que nos gustaría construir 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 un /assets carpeta, así que hagámoslo. Crearemos un archivo allí llamado variables.lesse importe las variables Less de Ant Design:

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

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

@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 irnos! No hay necesidad de importar lo que necesitamos en cada componente porque Nuxt ahora se encargará de eso. Si desea anular estilos muy específicos no incluidos en las variables, puede encontrar las clases asociativas y anularlas en su layouts/default.vue archivo también.

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

(Visited 17 times, 1 visits today)