Que signifie exécuter la commande sur la ligne de commande pour initialiser le projet vue ?

Exécuter la commande "vue init webpack vue-project" sur la ligne de commande signifie initialiser le projet vue. Cette commande signifie initialiser le projet "vue-project" basé sur webpack où "vue-project" fait référence au projet défini par l'utilisateur ; nom du projet , le nom du projet ne peut pas utiliser de majuscules.

L'environnement d'exploitation de ce tutoriel : système windows10, version vue3, ordinateur DELL G3.

Commande de l'étape d'initialisation du projet VUE

1, installez Node.js;

Package d'installation de Windows Package d'installation Mac
Vérifiez si l'installation est réussie node -v
Affichez la version et elle est réussie , comme le montre la figure :

2, installez l'échafaudage vue-cli ;

Ouvrez la fenêtre de ligne de commande cmd (fenêtre + R, entrez cmd et Entrée)

Exécutez la commande cnpm installez vue-cli -g dans le code cmd><code>cnpm install vue-cli -g

安装成功如图

3，初始化项目文件夹；

在你准备建项目的文件夹打开cmd 执行命令 vue init webpack vue-project

Installation réussie comme indiqué sur l'image

3, initialisez le dossier du projet ;

Ouvrez cmd dans le dossier où vous prévoyez de construire le projet et exécutez la commande vue init webpack vue-project(Remarque : vue-project consiste à personnaliser le nom du projet, le nom du projet ne peut pas utiliser de majuscules)

Comme le montre l'image :

Une fois l'initialisation terminée, comme indiqué dans l'image :

Le démarrage réussi du projet est comme indiqué sur l'image :

L'effet de page après un démarrage réussi est le suivant Image :

Autres détails ajoutés :

1. L'outil de ligne de commande que j'utilise est Git Voici le dernier lien du package d'installation

Package d'installation de Windows

2. http dans la barre d'adresse : //localhost:8081/#/ Comment supprimer le #. signez derrière

Ouvrez le projet dans l'éditeur, trouvez le répertoire src sous router et ouvrez index.js, changez le mode en mode:'history' comme indiqué dans l'image :

3, ce n'est pas nécessaire pour copier et coller l'adresse après avoir démarré le projet, c'est-à-dire que la page s'ouvrira automatiquement dans le navigateur après avoir exécuté npm run dev

L'éditeur ouvre le projet et trouve index.js sous config, puis trouve autoOpenBrowser : false, line 18 ou plus. Changez simplement faux en vrai. Comme le montre l'image :

Lors de la création d'une nouvelle branche et de la configuration du routage, faites attention au chemin :

4 Style

• less_loader dépend de less, les deux doivent être installés. , et peut être installé dans les dépendances du projet (vue ui) ou dans l'installation du terminal

  Si l'erreur suivante se produit, cela signifie que la dépendance de style n'est pas installée ;

• Dépendances du style d'installation du terminal :

• 
  Si c'est normal, exécutez npm install stylus-loader css-loader style-loader --save-dev pour installer les dépendances

Si c'est moins, exécutez npm install less less-loader --save-dev installe simplement les dépendances.

Si c'est sass, exécutez simplement npm install sass sass-loader --save-dev pour installer les dépendances. Ou ($npm intall sass-loader --save; $npm install node-sass --save)

Installez la dernière version du projet less-loader vue Le projet génère une erreur : échec de la compilation avec 1 erreur.

ERROR  Failed to compile with 1 errors                                 14:20:44
 error  in ./src/components/HelloWorld.vue
Module build failed: TypeError: loaderContext.getResolve is not a function
    at createWebpackLessPlugin (D:\work\vue3.0\gcmmobile\node_modules\less-loader\dist\utils.js:31:33)
    at getLessOptions (D:\work\vue3.0\gcmmobile\node_modules\less-loader\dist\utils.js:148:31)
    at Object.lessLoader (D:\work\vue3.0\gcmmobile\node_modules\less-loader\dist\index.js:27:49)
 @ ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!./node_modules/less-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/HelloWorld.vue 4:14-378 14:3-18:5 15:22-386
 @ ./src/components/HelloWorld.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js1234567891011121314

Ensuite, c'est un problème de version. La solution est de réduire la version less-loader. Ma version vue est 2.5.2

Désinstallez d'abord la dernière version

yarn remove less-loader
npm uninstall less-loader123

Installez la version less-loader 5.0.0

yarn add less-loader@5.0.0
npm install less-loader@5.0.0 -D123

5.npm ERR !

at Lorsque j'exécute npm install, j'obtiens une erreur :

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: operatingsystem@0.1.0
npm ERR! Found: vue@3.1.5
npm ERR! node_modules/vue
npm ERR!   vue@"^3.0.0" from the root project
npm ERR!12345678

Entrez npm -V dans la console et constatez que ma version npm est 7.x. Parce que la version npm7.x est plus stricte sur certaines commandes que npm6.x, je. j'ai obtenu cette erreur de manière inexplicable

Il existe deux solutions :

🎜1) Ajoutez --legacy-peer-deps après la commande 🎜🎜2) Utilisez npm6.x 🎜🎜 Astuce : il n'est pas nécessaire de désinstaller npm@7 lorsque vous utilisez npm @6. Vous pouvez utiliser npx pour spécifier la version de npm. Par exemple : npx -p npm@6 npm i --legacy-peer-deps🎜🎜Si cela ne fonctionne pas immédiatement, vous pouvez d'abord supprimer node_modules et package-lock.json🎜

Recommandations associées : Tutoriel vidéo vue.js

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!