Explication détaillée de l'utilisation du framework d'application universel Vue.js Nuxt.js

Cette fois, je vous apporte une explication détaillée de l'utilisation du framework d'application universel Vue.js Nuxt.js Quelles sont les précautions lors de l'utilisation du framework d'application universel Vue.js Nuxt.js. Voici les pratiques. cas, jetons un coup d'oeil ensemble.

1. Introduction

Site officiel : https://nuxtjs.org/

GitHub : https://github.com/nuxt/nuxt.js

Qu'est-ce que Nuxt.js ?

Nuxt.js est un framework d'application général basé sur Vue.js.

En organisant de manière abstraite l'infrastructure client/serveur, Nuxt.js se concentre principalement sur le rendu de l'interface utilisateur des applications.

Notre objectif est de créer un cadre d'application flexible que vous pouvez utiliser pour initialiser le code d'infrastructure de nouveaux projets, ou utiliser Nuxt.js dans des projets Node.js existants.

Nuxt.js prédéfinit diverses configurations requises pour développer des applications de rendu côté serveur à l'aide de Vue.js.

De plus, nous fournissons également une commande appelée : nuxt generate, qui fournit la fonction de générer des sites statiques correspondants pour les applications basées sur Vue.js.

Nous pensons que la fonctionnalité fournie par cette commande constitue une nouvelle étape vers le développement d'applications Web intégrant divers microservices.

En tant que framework, Nuxt.js fournit de nombreuses fonctionnalités utiles pour le modèle d'architecture d'application typique du client/serveur, telles que le chargement de données asynchrones, la prise en charge du middleware, la prise en charge de la mise en page, etc.

2. Construisez le premier projet Nuxt.js

Il est recommandé d'utiliser le modèle fourni par Nuxt. Il est supposé que vous avez installé vue-cli. Sinon, veuillez d'abord exécuter npm install vue-cli -g pour installer vue-cli.

$ vue init nuxt-community/starter-template <project-name>

Accédez au dossier du projet pour installer les packages dépendants.

cd <project-name>
npm install

Démarrez le projet.

npm run dev

Ouvrez le navigateur et visitez http://localhost:3000. Vous pouvez voir la page rendue par Next.

3. Ajouter une page

La structure du projet nouvellement achevé est la suivante :

Structure du projet

Nuxt accepte que toutes les pages soient placées dans le dossier pages, et Nuxt générera automatiquement l'itinéraire correspondant en fonction de la structure des répertoires.

Créez maintenant un nouveau fichier Vue test.vue sous pages et visitez http://localhost:3000/test pour voir la page que vous venez d'ajouter.

4. Introduire des plug-ins tiers

Habituellement, nous devons introduire des plug-ins tiers, tels que des composants frontaux, des journaux, etc.
La première étape consiste bien sûr à installer le plug-in. Ici, nous prenons element-UI comme exemple.

npm install element-ui

Bien que j'aie téléchargé le package element-ui, il ne peut pas être importé et utilisé directement dans l'instance Vue comme un projet normal. Les projets du noyau de Nuxt se trouvent tous dans le répertoire .nuxt. La modification des fichiers ci-dessous ne prendra pas effet. Étant donné que le fichier sera régénéré à chaque compilation, la modification directe du fichier projet n'est pas valide.

Structure du projet du noyau

Bien qu'il ne puisse pas être modifié directement, Nuxt propose un moyen spécial d'introduire des plug-ins tiers.

La première étape consiste à créer un nouveau fichier js element-ui.js dans le dossier pulgin. Le contenu du fichier est le suivant.

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)

La deuxième étape consiste à modifier nuxt.config.js. Ajouter un attribut de plugins.

/**
   * include third-party plugin
   */
  plugins: ['~plugins/element-ui'] // element-ui.js文件地址

Après la recompilation, Nuxt compilera le plug-in tiers et l'utilisera. À l’heure actuelle, le plug-in tiers peut être utilisé dans n’importe quel fichier Vue.

5. Fichiers de ressources statiques

Vous pouvez placer les fichiers de ressources statiques dans le dossier statique, puis utiliser http://localhost:3000/ pour accéder aux fichiers de ressources statiques.

Nuxt fournit de nombreuses autres fonctions, telles que le routage dynamique et la détection de code ESLint. C'est tout pour aujourd'hui. Pour des informations plus détaillées, veuillez vous référer au site officiel.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment faire flotter l'image au centre en JS

Comment Webpack crée des applications Electron

Solution au problème de chemin d'aperçu du téléchargement d'images angulaires 

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!