Configuration et personnalisation du système de conception des fourmis dans une application Nuxt

Bien que les bibliothèques d'interface utilisateur puissent parfois se sentir lourdes et difficiles à personnaliser, la conception des fourmis se distingue par son convivialité, ses valeurs par défaut flexibles et sa conception élégante. Cela en a fait un ajout bienvenu à ma boîte à outils.

Nuxt.js et la conception des fourmis sont une combinaison puissante, tirant parti de Nuxt-Spliting de Nuxt et de partage d'arbres pour des performances optimisées, en particulier avec les capacités de génération de sites statiques de Nuxt. Cela permet des applications hautement performantes, même lorsque vous utilisez une riche bibliothèque d'interface utilisateur comme la conception de fourmis.

Les intégrer nécessite quelques étapes, car la documentation complète est actuellement limitée. Profitons le processus.

Intégration de la conception des fourmis dans votre application Nuxt

Tout d'abord, installez les packages nécessaires:

 yarn ajouter ant-design-vue moins chargeur
# ou
NPM Installer Ant-Design-vue Moins moins de chargeur

Ensuite, créez un plugin ( antd-ui.js ) pour enregistrer la conception de fourmis mondialement:

 Importer Vue à partir de «Vue»
importer antd à partir de «ant-design-vue / lib»

Vue.use (antd)

Remarque: Contrairement à la configuration de la conception des fourmis standard, nous n'importons pas le CSS global. Au lieu de cela, nous gérerons les styles via moins de variables pour une personnalisation plus facile.

Maintenant, configurez Nuxt ( nuxt.config.js ):

1. Enregistrez le plugin:

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

2. Activer moins de compilation:

    construire: {
     chargeurs: {
       moins: {
         LessOptions: {
           JavascriptEabled: true,
         },
       },
     },
   },

3. Spécifiez une feuille de style globale pour moins de variables:

    CSS: [
     "~ / actifs / variables.less"
   ],

Créez les variables.less Fichier sans (In /assets ) pour importer les valeurs par défaut de la conception de fourmi et appliquer vos remplacements:

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

@ Color primaire: # 1890FF;
@ Link-Color: # 1890FF;
@ Success-Color: # 52C41A;
@ Warning-Color: # FAAD14;
@ Error-Color: # F5222D;
@ Font-Size-Base: 14px;
@ Color en tête: RGBA (0, 0, 0, 0,85);
@ Text-Color: RGBA (0, 0, 0, 0,65);
@ Text-Color-Secondary: RGBA (0, 0, 0, 0,45);
@ Disabled-Color: RGBA (0, 0, 0, 0,25);
@ Border-Radius-Base: 4px;
@ Border-Color-Base: # d9d9d9;
@ Box-Shadow-base: 0 2px 8px rgba (0, 0, 0, 0,15);

C'est ça! Nuxt gère automatiquement les composants importent automatiquement. Pour les remplacements de style hautement spécifiques non couverts par des variables, ajustez les styles dans vos layouts/default.vue .

La conception des fourmis et Nuxxt fournissent un cadre rationalisé et efficace pour le développement rapide des applications. Apprécier!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!