Comment démarrer un projet vue.js

Méthode : 1. Installez node.js ; 2. Installez l'outil de création d'échafaudage vue-cli ; 3. Utilisez la commande "vue init webpack project name" pour construire le projet ; " pour projeter les dépendances ; 5. Utilisez la commande "npm run dev" pour exécuter le projet.

L'environnement d'exploitation de ce tutoriel : système Windows7, version vue2.9.6, ordinateur Dell G3.

Recommandations associées : "Tutoriel vue.js"

Tout d'abord, listez ce dont nous avons besoin :

• node Environnement .js (gestionnaire de packages npm)
• outil de construction d'échafaudages vue-cli
• miroir cnpm npm Taobao

Installation node.js

Téléchargez et installez node à partir du site officiel de node.js. Le processus d'installation est très simple, il suffit de "prochaine étape" jusqu'au bout (installation stupide).

Une fois l'installation terminée, ouvrez l'outil de ligne de commande et entrez node -v, comme indiqué ci-dessous. Si le numéro de version correspondant apparaît, l'installation est réussie.

Le gestionnaire de packages npm est intégré au nœud, donc si vous entrez directement npm -v, les informations de version de npm seront affichées comme indiqué dans la figure ci-dessous.

OK ! L'environnement de nœud a été installé et le gestionnaire de packages npm est également disponible. Étant donné que certaines ressources npm sont bloquées ou sont des ressources étrangères, cela échoue souvent lors de l'utilisation de npm pour installer des packages de dépendances. Par conséquent, j'ai également besoin du miroir national de npm --- cnpm.

Installez cnpm

Entrez npm install -g cnpm --registry=http://registry.npm.taobao.org dans la ligne de commande et attendez. L'installation est terminée comme indiqué ci-dessous.

Une fois terminé, nous pouvons utiliser cnpm au lieu de npm pour installer les packages dépendants.

Installez l'outil de création d'échafaudage vue-cli

Exécutez la commande cnpm install -g vue-cli dans la ligne de commande et attendez la fin de l'installation. (Notez que cnpm est utilisé ici au lieu de npm, sinon la vitesse sera super lente et provoquera un blocage)

Grâce aux trois étapes ci-dessus, l'environnement et les outils que nous devons préparer sont prêt. Ensuite, commencez à utiliser vue-cli pour construire le projet.

Construisez le projet avec vue-cli

Pour créer le projet, nous devons d'abord sélectionner le répertoire, puis remplacer le répertoire par le répertoire sélectionné sur la ligne de commande. Ici, je choisis le bureau pour stocker le nouveau projet, puis nous devons d'abord placer le répertoire sur le bureau, comme indiqué ci-dessous.

Dans le répertoire du bureau, exécutez la commande vue init webpack firstVue dans la ligne de commande. Expliquez cette commande. Cette commande signifie initialiser un projet, où webpack est l'outil de construction, c'est-à-dire que l'ensemble du projet est basé sur webpack. Parmi eux, firstVue est le nom de l'intégralité du dossier du projet. Ce dossier sera automatiquement généré dans le répertoire que vous spécifiez (dans mon exemple, le dossier sera généré sur le bureau), comme indiqué ci-dessous.

Lors de l'exécution de la commande d'initialisation, l'utilisateur sera invité à saisir plusieurs options de base, telles que le nom du projet, la description, l'auteur et d'autres informations si vous ne le souhaitez pas. remplissez les champs, appuyez simplement sur Entrée par défaut.

Ouvrez le dossier firstVue, le fichier projet est le suivant.

Il s'agit de la structure des répertoires de l'ensemble du projet, parmi laquelle nous apportons principalement des modifications dans le répertoire src. Ce projet n'est encore qu'un cadre structurel, et les ressources dépendantes nécessaires à l'ensemble du projet n'ont pas encore été installées, comme indiqué ci-dessous.

Installez les dépendances requises pour le projet

Pour installer le package de dépendances, cd d'abord dans le dossier du projet (dossier firstVue), puis exécutez la commande cnpm install, En attente d'installation.

Une fois l'installation terminée, il y aura un dossier node_modules supplémentaire dans le dossier firstVue de notre répertoire de projet, qui contient les ressources du package de dépendances requises par notre projet.

Après avoir installé les packages de dépendances, vous pouvez exécuter l'intégralité du projet.

Exécutez le projet

Dans le répertoire du projet, exécutez la commande npm run dev, qui exécutera notre application avec un chargement à chaud nous permet de modifier le code sans actualiser manuellement le navigateur. des modifications en temps réel.

Voici une brève introduction à la commande npm run dev, où "run" correspond à dev dans le champ scripts du fichier package.json, qui est node Un raccourci pour la commande build/dev-server.js.

Une fois le projet exécuté avec succès, le navigateur ouvrira automatiquement localhost:8080 (si le navigateur ne s'ouvre pas automatiquement, vous pouvez le saisir manuellement). Après une exécution réussie, vous verrez l'interface ci-dessous.

Si vous voyez cette page, cela signifie que le projet se déroule avec succès.

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

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!