Nouvelles fonctionnalités Nuxxt passées v2.10

Nuxt offre une expérience de développeur incroyable, avec beaucoup de performances et les meilleures pratiques de configuration d'applications cuites. Dans les versions récentes, ils ont travaillé sur cette expérience de développeur au niveau supérieur, avec des fonctionnalités plus récentes qui accélèrent et simplifient les processus de développeur. Explorons quelques-uns aujourd'hui.

J'ai mis en place un repo et un site pour que vous puissiez explorer certaines de ces fonctionnalités! Vous pouvez les consulter ici:

Site en direct

Contenu nuxt

Vous n'avez plus à associer Nuxx avec un CMS sans tête externe et à faire toute la configuration, surtout si vous ne cherchez pas quelque chose à grande échelle, mais quelque chose de plus petit comme un blog. Nuxt Content offre un CMS sans tête basé sur GIT où vous pouvez écrire la configuration dans Markdown, CSV, YAML ou XML, en fonction de vos préférences. Il existe certains paramètres de configuration hors boîte à votre disposition, et l'écriture de configurations personnalisées est aussi simple que de créer une propriété.

Ce que cela signifie pour le développement: vous pouvez écrire des fichiers de marque statique dans un répertoire, et cela peut être votre blog! Nous utilisons la même API Dynamic Pages que vous utiliseriez généralement dans Nuxt pour générer ce contenu.

Il propose également une recherche en texte intégral hors de la boîte, qui est une belle fonctionnalité à ajouter si rapidement à un blog sans avoir à intégrer un service tiers.

Ce tutoriel de Debbie O'Brien est un guide incroyable, il vous guide à travers chaque pièce de la configuration, fortement recommandée.

Composants nuxt

Une chose que j'ai remarquée que je faisais encore et encore et encore était de taper du code d'importation dans tous mes composants. J'ai des extraits pour rendre cela un peu plus rapidement, mais les ajouter chacun dans chaque fichier interrompait un peu le flux de mon travail.

Nuxt Component Module SCANS, IMPORTS ET INSCRIPTION COMPOSANTS, afin que nous n'ayons plus besoin de le faire. Les composants doivent être dans le répertoire des composants, mais nous pouvons les utiliser dans les dispositions, les pages et les composants eux-mêmes.

L'ajout de ce module est un petit changement à notre nuxt.config.js:

 Exporter par défaut {
  Composants: vrai
}

Sérieusement, c'est tout!

Si vous souhaitez une plongée profonde, ce guide incroyablement complet de Krruite Patel vous a couvert.

Si vous utilisez le composant à plusieurs reprises, Nuxt fera de belles optimisations telles que la création automatique d'un morceau partagé pour le composant. Soyez conscient lorsque vous utilisez cela sur d'énormes projets, car cela peut avoir un impact sur les temps de construction.

Image Nuxt

Nuxt Image est un module plus récent qui offre des redimensions et transformations transparentes et rapides pour des images réactives optimisées. Vous pouvez utiliser leur optimiseur intégré ou travailler avec 10 fournisseurs populaires prêts à l'emploi tels que cloudinary ou rapidement.

La sortie de code de l'utilisation de leur API est des balises standard et , il n'y a donc pas d'obscurcissement lors de l'intégration dans votre flux de travail.

Après avoir ajouté le module, vous pourrez ajouter de la configuration aux images via une propriété d'images dans le nuxt.config.js, et désigner des points d'arrêt, des fournisseurs et d'autres configurations:

 Exporter par défaut {
  image: {
    // les tailles d'écran prédéfinies par `@ nuxt / image`:
    Écrans: {
      XS: 320,
      SM: 640,
      MD: 768,
      LG: 1024,
      XL: 1280,
      xxl: 1536,
      '2xl': 1536
    },
    // générer des images pour `/ _nuxt / image / file.png`
     staticFileName: '[publicPath] / images / [name] - [hash] [ext]',
     domaines: [
        'images.unsplash.com'
    ],
    alias: {
      UNSPLASH: 'https://images.unsplash.com'
    }
  }
}

Ce n'est qu'un échantillon de certaines des options qui vous sont disponibles, fournies à titre d'exemple. La documentation complète est là.

Et puis l'utilisation est similaire à n'importe quel composant VUE:

 <nuxt-img src="/%20nuxt-icon.png"></nuxt-img>

ou

 <nuxt-picture src="/%20nuxt-icon.png"></nuxt-picture>

De plus amples informations et toutes les options sont documentées ici. Astuce du chapeau à Ben Hong pour m'avoir fait savoir que c'était disponible. Il a quelques ressources Nuxxt qui méritent d'être explorées aussi!

Échantillon de repo

J'ai créé un exemple de dépôt à explorer qui utilise toutes ces fonctionnalités. C'est un petit blog de recettes avec Nuxt-Content pour les entrées de recette, les composants Nuxt afin que je n'aie pas besoin de définir les importations et de l'image nuxt pour les transformations d'image.

Site en direct

Vous pouvez le visiter ici pour tout voir en action, le fourrer, jouer avec lui et en faire le vôtre.

Vous pouvez y voir comment j'ai également utilisé l'API $ IMG dans l'image Nuxt pour les images d'arrière-plan ici, qui n'est pas encore entièrement documentée.

Nuxt offre une expérience de développeur incroyable. Nuxt réalise même une nouvelle version avec plus de mises à jour, toujours implémentée de manière experte. C'est pourquoi l'utilisation de Nuxt est continuellement une telle joie et se révèle être un excellent cadre pour les équipes et les développeurs célibataires.

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!