[Vue] Construire un environnement de développement

 

Lors de l'apprentissage d'une nouvelle chose, nous devons d'abord créer l'environnement de développement. Récemment, je veux apprendre la technologie front-end. L'environnement de développement de Vue est encore relativement simple.

 

Environnement de construction

1. Outils de développement

---

• VSCode
• VSCode plugin-vue (coloration syntaxique)

2. Environnement d'exploitation

---

• Installez Node.js
• Afficher le noeud d'informations sur la version -v

3. Outils de gestion des packages

---

 

• npm (source étrangère) est
  installé avec node.js, afficher les informations de version npm -v

• cnpm (source Taobao)

npm install -g cnpm --registry = https: // registry.npm.taobao.org

• Pack d'installation

npm install -g @ vue / cli

 

• Désinstaller le package

npm désinstaller vue-cli -g

 

4. Outils d'emballage

---

 

• Installer le webpack

npm install webpack -g

 

5. Installer vue-cli (échafaudage)

---

 

vue-cli 4.0+ a été remplacé par @ vue / cli, si l'ancienne version est installée, désinstallez-la d'abord

• Installer

npm install -g @ vue / cli

• Désinstallez l'ancienne version de vue-cli

npm désinstaller vue-cli -g

•  Voir les informations de version
  vue -V (notez qu'elle est en majuscule)
• Pour utiliser

1. Créez un projet: vue create projectName
2. Compiler et mettre à jour à chaud:npm run serve
3. Compiler et compresser: npm run build

 

Pratique

Créer un projet

---

 

cmd dans le dossier où le projet doit être créé

1. Projet de création d'échafaudages

1.1. Création d'échafaudage  vue create my-project Remarque: Le nom du projet ne peut pas être mis en majuscule
. 1.2. Sélectionnez la configuration (par défaut / manuelle), sélectionnez-la avec les touches haut et bas, et sélectionnez la valeur par défaut ici
. 1.3. Sélectionnez l'achèvement et appuyez sur Entrée pour attendre la fin de la création.
1.4 La création générera un fichier avec le même nom Clip

 

2. Créer via ui

vue ui

Une page de création s'ouvrira, où vous pourrez créer des projets, démarrer le débogage, compiler et générer, etc. L'interface utilisateur est très simple et ne sera pas introduite.

 

Débogage et exécution

---

cmd dans le dossier du projet (pas le dossier créé ci-dessus, mais le dossier du nom du projet créé par scaffolding / ui), exécutez

npm run serve

 

Vous devez localiser le dossier correspondant chaque fois que vous l'exécutez. C'est plus lourd. Voici quelques conseils pour l'utiliser

Si développé par VSCode, exécutez directement sur le terminal

2. Exécutez via Powershell, ouvrez le dossier correspondant, Maj + bouton droit de la souris, puis choisissez d'ouvrir Powershell ici

3. Ajoutez un espace cmd avant le chemin du dossier pour localiser directement le dossier correspondant

 

 

Compiler et générer

---

exécution de cmd

npm run build

Générer un dossier dist dans le fichier de projet

 

Déployer des fichiers frontaux

---

1. Publier avec un serveur d'arrière-plan (IIS, tomcat)

Copiez le fichier de ressources généré dans le dossier de ressources statique du serveur d'arrière-plan et le serveur d'arrière-plan définit la page de démarrage

• Avantage
  1. Simple, pas besoin de déployer plusieurs serveurs
• Inconvénients
  1. Le personnel frontal doit coopérer avec le personnel principal
  2. Après la publication, il y a des problèmes de débogage ou doit être basé sur le serveur principal

2. Déploiement frontal indépendant

nginx agit comme un serveur Web pour les ressources frontales et les requêtes inverses pour les serveurs principaux

• Avantage

1. Les extrémités avant et arrière sont déployées séparément pour faciliter l'inspection des documents
2. Le personnel frontal et principal réduit les coûts de communication
3. Peut résoudre les problèmes inter-domaines dans nginx, aucun traitement de serveur en arrière-plan

• Inconvénients

1. Ajoutez de la complexité, mais ce n'est pas beaucoup dans nginx

fichier de configuration nginx

    serveur { 
        écouter        80 ; 
        nom_serveur localhost; 

       
        location / { 
            root F: \ Codes \ Vue \ my - project \ dist; 
            index index.html index.htm; 
        } 

        location / api { 
            proxy_pass http: // 127.0.0.1:8080; 
        } 
}

 

Veuillez indiquer la source du transfert: https://www.cnblogs.com/WilsonPan/p/12719082.html