Explication détaillée du rendu côté serveur Nuxt.js Vue

Nuxt.js est très simple et facile à utiliser. Un projet simple doit simplement ajouter nuxt comme composant dépendant. Cet article vous présente principalement le rendu côté serveur Nuxt.js Vue et vous donne une référence. J'espère qu'il pourra vous aider.

Vue est privilégié par de nombreux développeurs front-end en raison de son API simple et facile à comprendre, de sa liaison de données efficace et de son système de composants flexible. De nombreuses entreprises nationales utilisent Vue pour le développement de projets. Le Jianshu que nous utilisons est construit sur la base de Vue.

Nous savons qu'il existe deux problèmes majeurs dans le rendu frontal SPA : (1) le référencement. Il est difficile pour les robots des moteurs de recherche d'explorer les méta-informations des pages rendues par les clients et d'autres informations liées au référencement, ce qui rend le site Web impossible à rechercher par les utilisateurs dans les moteurs de recherche. (2) Expérience utilisateur. Le js après packaging d'une grande webApp sera très volumineux, il y a donc chargement par module, comme require.js, requête asynchrone. Lorsque le webpack devient populaire, cela devient un fractionnement de code. Néanmoins, selon l'appareil de l'utilisateur, le rendu initial de la page peut encore être très lent et le temps d'attente pour un écran blanc est trop long, ce qui est inacceptable pour le groupe d'utilisateurs de plus en plus pointilleux.

Par conséquent, pour ceux qui affichent des pages promotionnelles, comme les sites Web officiels, un rendu côté serveur (SSR) doit être effectué. Installer nuxt.js

$ vue init nuxt-community/starter-template <你项目的名字>
// 后面 安装依赖你懂的

// 安装koa版本
$ vue init nuxt/koa <你的项目名字>

Exécuter

npm run dev

L'application s'exécute désormais sur http://localhost:3000

Remarque : Nuxt.js écoutera les modifications de fichiers dans le répertoire des pages et redémarrera automatiquement. Il n'est pas nécessaire de redémarrer manuellement. l'application lors de l'ajout d'une nouvelle page.

Routage

nuxt génère une configuration de routage basée sur la structure du répertoire des pages

Données asynchrones asyncData

Remarque Un composant de page est requis pour appeler asyncData (c'est-à-dire qu'il ne peut pas être appelé sous les composants, il doit s'agir d'une page acheminée)

Données asynchrones avantCreate, créées

Remarque : Dans la durée de vie de n'importe quel composant vue Au cours du cycle, seuls les deux hooks beforeCreate et create seront appelés à la fois côté navigateur et côté serveur ; les autres hooks ne seront appelés que côté navigateur ;

Utilisation du plug-in mint-ui

Nous devons d'abord ajouter le fichier du plug-in mint-ui.js dans le dossier plugins

import Vue from "vue";
import Mint from "mint-ui";

Vue.use(Mint);

Configurer le champ plugins dans nuxt.config.js

/**
  * 配置第三方插件
  */
 plugins: [{ src: "~plugins/mint-ui", ssr: true }],

//同时nuxt还支持区分只在浏览器中运行和只在服务端运行的插件

//只在浏览器运行：配置nuxt.config.js中plugins字段，将引入的插件属性设置为ssr： false
//只在服务端运行：直接在webpack打包server.bundle.js文件中，将process.SERVER_BUILD设置为true即可

mise en page

1.nuxt.js implémente un nouveau concept, la mise en page. Nous pouvons facilement basculer entre plusieurs mises en page de la page grâce à la mise en page. Trois mises en page couramment utilisées ont été implémentées dans ce projet, à savoir : 1) une mise en page à deux colonnes, avec une colonne de gauche fixe et une largeur dynamique de la colonne de droite 2. Invite de page d'erreur, un schéma de mise en page avec une boîte d'invite au milieu ; de la page ; 3. Mise en page d’un blanc pur.

Dans la page spécifiquement développée, si la mise en page par défaut est utilisée, il n'est pas nécessaire de spécifier la mise en page de la page. Le framework nuxt associera automatiquement la page sans mise en page spécifiée à la mise en page par défaut. Si vous devez spécifier la mise en page, spécifiez-la dans le champ de mise en page. Comme le montre la figure, la mise en page complète est spécifiée dans la page de connexion.

Recommandations associées :

Fonction de rendu côté serveur Vue.js et ASP.NET Core

Nuxt Pratique de rendu côté serveur Vue.js

Explication détaillée des exemples de rendu côté serveur React

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!