Installation
Découvrez ci-dessous comment créer un projet Nuxt fonctionnel en 4 étapes.
Essayer Nuxt
Vous pouvez essayer Nuxt en ligne sur CodeSandbox ou StackBlitz:
Play on CodeSandbox Play on StackBlitzPrérequis
- node - au moins v10.13 Nous vous recommandons d'installer la dernière version LTS.
- Un éditeur de texte, nous recommandons VSCode avec l'extension Vetur ou WebStorm
- Un terminal, nous vous recommandons d'utiliser le terminal intégré de VSCode ou le terminal de Webstorm .
Utiliser create-nuxt-app
Pour créer rapidement un nouveau projet, nous pouvons utiliser create-nuxt-app .
Vérifiez que npx
est installé (npx est livré par défaut depuis npm v5.2.0) ou npm v6.1 ou yarn.
yarn create nuxt-app <project-name>
npx create-nuxt-app <project-name>
npm init nuxt-app <project-name>
Quelques questions nous seront posées (nom, options Nuxt, framework UI, TypeScript, linter, framework de test, etc.). Pour en savoir plus sur toutes les options voir Create Nuxt App .
Une fois les questions répondues, toutes les dépendances seront installées. La prochaine étape est de naviguer dans le répertoire et de démarrer notre application:
cd <project-name>
yarn dev
cd <project-name>
npm run dev
Notre application est maintenant en cours d'exécution sur http://localhost:3000 .
Commencer de zéro
Créer un projet Nuxt de zéro demande seulement un répertoire et un fichier.
Dans cet exemple, nous allons utiliser le terminal pour créer les répertoires et fichiers mais nous pouvons utiliser votre éditeur pour les créer.
Première étape : configurer votre projet
Pour commencer, il faut créer un répertoire vide avec le nom du projet et naviguer à l'intérieur de celui-ci :
mkdir <nom-du-projet>
cd <nom-du-projet>
Remplacer <nom-du-projet>
avec le nom du projet.
Puis créer un fichier nommé package.json
:
touch package.json
Ouvrir le fichier package.json
avec notre éditeur préféré et ajouter ce contenu JSON :
{
"name": "my-app",
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"generate": "nuxt generate",
"start": "nuxt start"
}
}
scripts
définit les commandes Nuxt que nous allons lancer avec la commande npm run <commande>
.
À quoi sert le fichier package.json ?
Le fichier package.json
est comme une carte d'identité pour notre projet. Si on ne sait pas ce qu'est le fichier package.json
, nous vous recommandons grandement de lire la documentation de npm .
Deuxième étape : installer nuxt
Une fois le fichier package.json
créé, nous devons ajouter nuxt
à votre projet avec la commande npm
ou yarn
comme ci-dessous :
yarn add nuxt
npm install nuxt
Cette commande va ajouter nuxt
comme une dépendance du projet et va automatiquement l'ajouter à notre package.json
. Le répertoire node_modules
va aussi être créé, c'est l'endroit où sont installés tous les packages et leurs dépendances.
yarn.lock
ou package-lock.json
est aussi créé, ce qui assure une consistance et une compatibilité dans les dépendances installées par votre projet.Troisième étape : créer notre première page
Nuxt transforme tous les fichiers *.vue
dans le répertoire pages
comme une route pour l'application.
Créer le répertoire pages
dans notre projet :
mkdir pages
Puis, créer un fichier index.vue
dans le répertoire pages
:
touch pages/index.vue
Il est important que cette page soit appelée index.vue
car elle sera la page par défaut quand notre application sera ouverte. C'est la page d'accueil et elle doit être appelée index.
Il faut ouvrir le fichier index.vue
dans notre éditeur et ajouter le contenu suivant :
<template>
<h1>Hello world!</h1>
</template>
Étape finale : lancer le projet
On peut lancer notre projet en tapant la commande ci-dessous dans le terminal :
yarn dev
npm run dev
dev
est utilisée lorsque l'application est lancée en mode développement.L'application est maintenant en cours d'exécution sur http://localhost:3000 .
On peut l'ouvrir dans notre navigateur en cliquant sur le lien dans le terminal et nous devrions voir le texte "Hello World" que nous avons ajouté dans l'étape précédente.
dev
, un répertoire .nuxt
est créé. Ce répertoire devrait être ignoré par Git (ou tout autre système de gestion de versions). On peut faire ceci en créant un fichier .gitignore
à la racine de votre projet et en y ajoutant .nuxt
.Étape bonus
Créer une page nommée fun.vue
dans le répertoire pages
.
Ajouter un <template></template>
et insérer un titre avec une phrase drôle à l'intérieur.
On peut ensuite aller sur le navigateur et regarder la nouvelle page sur http://localhost:3000/fun .
more-fun
et ajoutons un fichier index.vue
à l'intérieur, cela donnera le même résultat que de créer un fichier more-fun.vue
.