Nuxt.js: un cadre minimaliste pour créer des applications Universal Vue.js

nuxt.js: rationalisation du développement vue.js avec rendu côté serveur et génération de sites statiques

plongez dans le monde de Vue.js avec la collection complète de livres Vue.js de SitePoint Premium. Déverrouiller les principes fondamentaux, les projets pratiques, les conseils et les outils essentiels, et bien plus encore pour seulement 14,99 $ / mois!

Universal JavaScript (également connu sous le nom de JavaScript isomorphe) permet l'exécution de code sur le client et le serveur. Les cadres JavaScript modernes, comme Vue.js, créent souvent des applications (spas) à une page (spas) pour une expérience utilisateur et une vitesse améliorées. Cependant, les spas peuvent souffrir de temps de chargement initiaux lents et de défis SEO en raison des faisceaux JavaScript et des limitations du robot. Les applications de préchargement de rendu côté serveur (SSR) sur un serveur, envoyant un HTML rendu directement au navigateur, résolvant ces problèmes.

La configuration de SSR peut être complexe. Nuxt.js simplifie ce processus pour Vue.js, l'automatisation du rendu, de routage et d'autres configurations.

Avantages clés de nuxt.js:

• Simplified Vue.js Development: gère automatiquement SSR, le routage et les configurations.
• Génération statique du site: Crée des sites Web statiques comparables à Jekyll, stimulant le référencement et les performances.
• Prise en charge intégrée: intègre Vue Router, Vuex (facultatif), Vue Server Renderer et Vue-Meta.
• Léger et efficace: maintient une petite taille de noyau (57Kb min gzip).
• routage dynamique et déploiement statique: Crée facilement des routes dynamiques et des sites statiques déployables sur des plates-formes comme Firebase.
• Architecture évolutive: Convient aux projets de toutes tailles.

Qu'est-ce que Nuxt.js?

nuxt.js est un framework qui simplifie la création d'applications Vue.js rendues en serveur en abstraction de configurations complexes liées aux données asynchrones, au middleware et au routage. Il est analogue à Angular Universal et Next.js pour d'autres cadres. Son objectif principal est le rendu de l'interface utilisateur, gérant la distribution des clients / serveurs dans les coulisses.

Génération de sites statique avec nuxt.js:

nuxt.js's generate La commande permet la création de sites Web statiques, offrant des fonctionnalités similaires aux générateurs de sites statiques comme Jekyll.

nuxt.js sous le capot:

Beyond Vue.js 2.0, nuxt.js inclut Vue Router, Vuex (Option Store), Vue Server Renderer et Vue-Meta, éliminant le besoin de configuration manuelle de ces bibliothèques. WebPack gère le regroupement, le coup de code et la minification.

nuxt.js Workflow:

Lorsqu'un utilisateur interagit avec une application nuxt.js:

1. nuxtServerInit (si défini) met à jour le magasin.
2. Middleware s'exécute (global, mise en page, spécifique à la page).
3. Les routes dynamiques sont validées (si validate() la méthode existe).
4. asyncData() et fetch() Charger les données pour le rendu côté serveur.
5. La page est rendue avec les données chargées.

Construire un blog statique sans serveur avec nuxt.js:

Cette section montre la création d'un blog statique simple à l'aide de nuxt.js, récupérant les données d'un fichier JSON moqué (idéalement, une API serait utilisée). Une compréhension de base de Vue.js est supposée. Le code complet est disponible sur GitHub [GitHub Link Placeholder], et une démo est disponible sur [Demo Link Placeholder].

Configuration et configuration:

1. Utilisez le vue-cli pour créer un nouveau projet: vue init nuxt/starter ssr-blog
2. Installez les dépendances: cd ssr-blog && npm install
3. Lancez l'application: npm run dev
4. Configurez nuxt.config.js pour ajouter un modèle de titre et inclure Bulma CSS:

// ./nuxt.config.js
module.exports = {
  head: {
    titleTemplate: '%s | Awesome JS SSR Blog',
    link: [
      { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css' }
    ]
  },
  // ...
};

Disposés de page:

Personnalisez le fichier layouts/default.vue pour créer une disposition de base personnalisée avec la navigation en utilisant <nuxt-link></nuxt-link> et le composant <nuxt></nuxt>.

pages et routes:

Créer des pages (pages/index.vue, pages/about.vue) en tant que composants à simple fichier. Nuxt.js gère automatiquement le routage.

Page d'accueil du blog:

Le composant pages/index.vue affiche des articles de blog récents à l'aide d'un composant personnalisé <posts></posts> (situé dans components/Posts.vue). Les données de blog sont chargées à partir de posts.json.

Routes dynamiques:

Créer des itinéraires dynamiques pour les articles de blog individuels en utilisant la structure pages/post/_id/index.vue. La méthode asyncData() récupère le post spécifique en fonction du paramètre id.

Génération de fichiers statique:

Modifier nuxt.config.js pour générer des fichiers statiques pour les routes dynamiques:

// ./nuxt.config.js
module.exports = {
  // ...
  generate: {
    routes(callback) {
      const posts = require('./posts.json');
      let routes = posts.map(post => `/post/${post.id}`);
      callback(null, routes);
    }
  }
};

Exécutez npm run generate pour générer des fichiers statiques dans le dossier dist.

Déploiement de la base de feu:

Déployez le site statique à l'hébergement de base de base à l'aide du Firebase CLI.

Conclusion:

nuxt.js simplifie le rendu côté serveur et la génération de site statique pour les applications Vue.js, l'amélioration des performances et du référencement. Ses fonctionnalités et sa facilité d'utilisation en font un outil puissant pour divers projets.

Questions fréquemment posées (FAQ): (Cette section reste largement inchangée car elle répond directement aux questions courantes sur nuxt.js)

(La section FAQ de l'entrée d'origine est collée ici)

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!