Comment créer un environnement Webpack avec vue et node

Cette fois, je vais vous montrer comment construire un environnement webpack avec vue et node Quelles sont les précautions pour construire un environnement webpack avec vue et node. Voici des cas pratiques, prenons. un regard.

1. Configuration de l'environnement

Allez sur le site officielinstallernode.js(http://www. runoob.com /nodejs/nodejs-install-setup.html )

Faites attention à la version du nœud. Seul le nœud qui prend en charge le mode harmonie prendra en charge es6, et aucune erreur ne sera signalée lors de la construction du nom du projet basé sur webpack. Recommander la dernière version.

Après avoir téléchargé le package d'installation, cliquez simplement sur Installer.

L'instruction de ligne de commande pour installer webpack à l'aide de npm est npm install webpack -g. L'interface pour une installation de test réussie est la suivante :

L'étape suivante consiste à installer vue-cli globalement. A noter que l'installation de vue-cli à l'aide de npm prend beaucoup de temps, qui peut dépasser deux heures

L'instruction d'installation est : npminstall--globalvue-cli

Créer un nouveau projet basé sur le modèle Webpack

L'instruction de ligne de commande est vue init webpack my-project (où mon-projet est le nom du fichier et le nom du fichier ne peut être composé que de lettres minuscules). Lors de la création d'un nouveau projet de modèle, vous devez accéder au dossier spécifié.

Entrez vue init webpack my-project (nom du dossier du projet) dans cmd, appuyez sur Entrée, attendez un court instant, les éléments sous 'git' apparaîtront dans l'ordre,

est créé lors du travail sur un nouveau projet, si l'erreur suivante est signalée, cela signifie que la version du nœud est trop basse et ne prend pas en charge le mode harmonieux (cela signifie probablement qu'il prend en charge es6, f sinon il ne le prend pas en charge. Vous avez besoin des conseils d'un expert pour plus de détails) et doit être remplacé par une version supérieure de node. L'erreur est la suivante :

Dans cmd 1). Entrez : cd my-project (nom du projet), appuyez sur Entrée, entrez le dossier spécifique du projet

Entrez : cnpm install, appuyez sur Entrée, attendez un moment

Revenez au dossier du projet et vous constaterez qu'il existe un dossier node_modules supplémentaire dans la structure du projet (le contenu de ce fichier est les dépendances précédemment installées)

installation webstorm, introduction du projet

Accédez au site officiel pour télécharger le package d'installation de webstrom et installez-le.

Continuez ensuite. En fonction de votre système informatique, choisissez d'installer un système 64 bits ou un système 32 bits. Sélectionnez js, css, html àjetbrainsà puis installez

. Sélectionnez ouvrir sous fichier dans webstorm (sélectionnez votre dossier de projet)

Cela semble très simple, mais j'ai peur de me tromper dans quelques jours.

Si l'environnement de test est configuré avec succès

Méthode 1 : Saisie dans cmd : cnpm rundev

(Évidemment, chaque fois que vous modifiez le code, accéder à cmd et saisir des commandes à chaque fois est un processus très fastidieux, alors affichez le menu npm dans webstorm.

Faites un clic droit sur le fichier package.json -> cliquez sur Afficher les scripts npm pour afficher le menu. Pour l'exécuter à l'avenir, double-cliquez simplement sur dev.

dans le menu npm. Notez que le projet en cours d'exécution en ligne de commande et le projet de développement en cours d'exécution ne peuvent pas être exécutés ensemble. Lors de l'exécution de l'un, vous devez fermer l'autre, sinon une erreur indiquant que le port est occupé sera signalée.

)

Méthode 2 : Entrez dans le navigateur : localhost:8080 (le port par défaut est 8080)

Si vous entrez la commande d'exécution, une erreur sera signalée. Il existe deux situations, comme le montre la figure ci-dessous :

La première situation : problème d'occupation portuaire

Alors la solution est :

Option 1 : Fermez le port pendant le processus.

a. Ouvrez cmd et entrez la commande netstat –ano. Tous les numéros de port apparaîtront,

. b. Sous l'adresse locale se trouve le numéro de port, et le PID est le numéro de processus d'un programme qui occupe le numéro de port (rappelez-vous le numéro de processus)

c. Ouvrez le gestionnaire de tâches (ctrl + alt + supprimer), cliquez sur Processus, puis cliquez sur Afficher, sélectionnez "Sélectionner la colonne", cliquez sur OK et vous trouverez le programme de processus occupant le port

d. Recherchez le numéro de processus mémorisé et fermez

Option 2 : Dans le fichier config/index.js, modifiez le numéro de port. Port : Nouveau numéro de port.

Deuxième type : La version npm est trop basse et doit être mise à niveau :

Solution :

a. Entrez la commande : npm install -g npm

b. Copiez les fichiers sous C:Users{votre nom d'utilisateur Windows}AppDataRoamingnpmnode_modulesnpm vers node_modulesnpm dans votre répertoire d'installation NodeJS, en écrasant tous les fichiers d'origine

(Ou utilisez la méthode de comparaison du benzène et refaites les étapes précédentes)

2. Modifications en fonction des besoins personnels

1. vue.js remplace le numéro de port par défaut 8080 par le port spécifié :

L'exécution de npm run dev appelle en fait package.json

dans le répertoire racine Après avoir ouvert package.json, vous pouvez trouver ce morceau de code

"scripts":{
"dev":"nodebuild/dev-server.js",
"build":"nodebuild/build.js",
"lint":"eslint--ext.js,.vuesrc"
}

De cela, nous pouvons voir que nous devrions vérifier le fichier dev-server.js dans le répertoire build

Trouvé dans le fichier dev-server.js

varuri='http://localhost:'+port

Le port ici est ce que nous recherchons au début de dev-server.js que nous pouvons trouver

. varpath=require('chemin')

Et d'où vient le chemin ?

Il y a un dossier de configuration dans le répertoire racine. Vous pouvez dire par son nom qu'il est lié à la configuration. Ouvrez index.js

dev:{
env:require('./dev.env'),
port:8080,
autoOpenBrowser:true,
assetsSubDirectory:'static',
assetsPublicPath:'/',
proxyTable:{},
cssSourceMap:false
}

dans le répertoire de configuration. Non seulement le port peut être modifié ici, mais d'autres informations de configuration peuvent également être modifiées selon les besoins.

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 utiliser la minuterie pour implémenter la fonction de compte à rebours dans js

Comment invalider la balise sélectionnée= Traitement de l'attribut "sélectionné"

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!