Vue3 : création de projet

Dans le chapitre précédentInstallation de Vue3nous avons utilisé la commandenpm initpour créer un projet. Ce chapitre présente principalementnpm createla commande pour créer des projets, ainsi que l'utilisation de la commandevue uipour ouvrir l'interface graphique d'installation.

La configuration IDE recommandée pour le développement Vue estVisual Studio Code + l'extension Vue - Official：

D'autres IDE sont pris en charge comme suit :

commande npm create

Utilisez la commande npm create pour créer un projet Vue, généralement via Vite (l'outil de build officiellement recommandé par Vue) pour créer une application Vue.

Dans Vite, npm create est utilisé pour exécuter des outils de scaffolding (comme vite@latest) afin de générer rapidement un nouveau modèle de projet.

Pour plus de détails sur Vite, veuillez consulter :Tutoriel Vite。

npm createLa syntaxe pour créer un projet avec la commande est la suivante :

npm create vite@latest <project-name> --template vue

Explication :

  • npm create: La commande utilisée pour exécuter un modèle de projet. Elle crée un nouveau projet et l'initialise à partir du modèle donné.

  • vite@latest: vite est l'outil pour créer des projets Vue 3,@latestspécifie l'utilisation de la dernière version de Vite, garantissant que le projet que vous créez est basé sur la dernière version de Vite. Sans@latest，npmil essaiera d'utiliser la version actuellement installée.

  • <project-name>: Le nom du dossier du projet nouvellement créé. La commande créera un dossier et y placera le code du modèle. Par exemple, exécuternpm create vite@latest my-vue-app --template vuecréera un dossier nommémy-vue-appdans le répertoire courant et placez-y les fichiers de modèle du projet Vue.

  • --template vue：--template vueSpécifie le type de modèle à utiliser. Vite prend en charge plusieurs modèles,vueest le modèle spécifiquement fourni pour Vue 3. Il existe également d'autres modèles, tels quevanilla、react、svelteetc.

Ensuite, créons le projet example-vue3-app :

npm create vite@latest

L'exécution de la commande ci-dessus vous demandera d'abord de saisir un nom de projet et de sélectionner un framework :

> Project name: … example-vue3-app
? Select a framework: › - Use arrow-keys. Return to submit.
❯   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Angular
    Others

Vite prend en charge plusieurs modèles. Les plus courants incluent :

  • vue: projet Vue 3 (utilise Vue 3 par défaut)
  • vanilla: modèle de base sans framework
  • react: projet React
  • svelte: projet Svelte
  • preact: projet Preact
  • Vous pouvez également choisir d'autres modèles en fonction de vos besoins spécifiques.

Vous pouvez utiliser les touches fléchées pour sélectionner. Nous sélectionnons Vue, puis un écran de sélection de variante apparaît, et nous pouvons choisir JavaScript pour démarrer rapidement :

> Project name: … example-vue3-app
> Select a framework: › Vue
> Select a variant: › JavaScript

Scaffolding project in /Users/example/example-test/example-vue3-app...

Done. Now run:

  cd example-vue3-app
  npm install
  npm run dev

Une fois l'installation terminée, nous entrons dans le répertoire du projet :

cd example-vue3-app

La structure complète du répertoire est présentée dans la figure ci-dessous :

Installez les dépendances et démarrez l'application :

npm install
npm run dev

Ensuite, ouvrezhttp://localhost:5173/, et vous verrez l'interface de l'application :

De plus, nous pouvons, dans le fichiervite.config.js, définir notre propre port. Par exemple, ce qui suit définit le port sur 3000 :

Exemple

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],

  server: {
    port: 3000, // Numéro de port personnalisé
  },
})

commande vue ui

Outre l'utilisation de la commandevue createpour créer des projets, nous pouvons également utiliser l'outil de création visuel pour créer des projets.

Exécutez la commande :

$ vue ui
->  Starting GUI...
->  Ready on http://localhost:8000
...

L'exécution de la commande ci-dessus fera apparaître une interface de gestion de projet dans le navigateur :

Nous pouvons cliquer sur l'option"Create"pour créer un projet. Sélectionnez "Create project here" en bas. Vous pouvez également choisir un chemin en haut de la page :

Ensuite, saisissez le nom de notre projet, sélectionnez npm comme gestionnaire de paquets, puis cliquez sur Next :

Choisissez simplement la configuration par défaut :

Ensuite, attendez que l'installation soit terminée. Une fois l'installation terminée, l'interface de gestion est la suivante :

Autres extensions