Exploration du rendu côté serveur Nuxt.js Vue

Cet article présente principalement l'explication détaillée du rendu côté serveur Nuxt.js Vue. Maintenant, je le partage avec vous et vous donne une référence.

Cet article utilise nuxt pour le rendu côté serveur https://zh.nuxtjs.org/

Nuxt.js est très simple et facile à utiliser. Un projet simple doit simplement ajouter nuxt en tant que composant dépendant.

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é. Installez nuxt.js

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

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

Exécuter

npm run dev

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

Remarque : Nuxt.js écoutera Les fichiers du répertoire des pages sont modifiés et automatiquement redémarrés, il n'est donc pas nécessaire de redémarrer manuellement l'application lors de l'ajout de nouvelles pages.

Routage

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

Données asynchrones asyncData

Notez que le composant de page doit être utilisé pour l'appeler asyncData (c'est-à-dire qu'il ne peut pas être appelé sous les composants et doit être routé)

Données asynchrones avant de créer, créées

Remarque : dans le cycle de vie de tout composant vue, il il n'y en a que deux avantCreate etcreated. Ce hook sera appelé à la fois côté navigateur et côté serveur ; les autres hooks ne seront appelés que côté navigateur.

Utilisez le 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);

dans nuxt Configurez le champ des plugins dans .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 passer la mise en page La mise en page facilite la commutation entre plusieurs mises en page de la 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 une 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 mise en page 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.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment utiliser jQuery pour implémenter l'effet d'animation de dégradé de transparence réactif à la souris

Effet d'animation du tampon de réponse de la souris implémenté avec jQuery

Comment implémenter l'effet d'animation Taobao réactif à la souris dans jQuery

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!