Explication détaillée des trois méthodes d'installation de vue.js

Explication détaillée de trois façons d'installer vue.js

Vue .js (prononcé /vjuː/, similaire à view) est un framework progressif permettant de créer des interfaces Web basées sur les données. L'objectif de Vue.js est de permettre une liaison de données réactive et des composants de vue composés avec l'API la plus simple possible. Non seulement il est facile de démarrer, mais il est également facile de l'intégrer à des bibliothèques tierces ou à des projets existants.

Voici trois façons d'installer Vue.js :

Version indépendante

Nous pouvons télécharger directement vue.js depuis le site officiel de Vue.js et le référencer en .html via la balise <script> -> <script src = ../vue.js> </script> N'utilisez pas la version compressée de manière minimale dans l'environnement de développement, sinon il n'y aura pas d'invites d'erreur ni d'avertissements ! (Utilisé directement dans la page)

2. Utilisez la méthode CDN

unpkg : https://unpkg.com/vue/dist/ vue .js, restera cohérent avec la dernière version publiée par npm. (Recommandé)

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js,

tels que ()

3. Méthode NPM (recommandée)

Il est recommandé d'utiliser la méthode d'installation NPM lors de la création d'applications à grande échelle avec Vue.js qui peut bien fonctionner avec les packagers de modules tels que Webpack. ou Browserify utilisés ensemble. Vue.js fournit également des outils de support pour développer des composants à fichier unique.

Tout d'abord, listons ce dont nous avons besoin ensuite :

environnement node.js (gestionnaire de paquets npm)

vue- Outil de construction d'échafaudages cli

cnpm npm Taobao miroir

1) Installer node.js

Téléchargez et installez node depuis le site officiel de node.js. Le processus d'installation est très simple. Continuez simplement à cliquer sur suivant et tout ira bien. Après l'installation, nous ouvrons l'outil de ligne de commande (win+R) et entrons

Utilisez la commande node -v pour vérifier la version de node. Si le numéro de version correspondant apparaît, cela signifie que votre installation est réussie.

                                                                                                                                                                                                 npm, entrez directement la commande npm -v pour afficher les informations de version de npm.

Jusqu'à présent, l'environnement Node a été installé, et le gestionnaire de packages NPM l'a également fait. les ressources sont bloquées ou sont des ressources étrangères, npm ne parvient souvent pas à installer les packages dépendants, nous avons donc également besoin du miroir national de npm ----cnpm.

2) Installez cnpm

Dans la ligne de commande, entrez npm install -g cnpm --registry=http://registry.npm.taobao.org, puis attendez. Si aucune erreur n'est signalée, l'installation est réussie, ( Le mien a été installé et le message de mise à jour s'affiche avec succès), comme indiqué ci-dessous :

                                                                                  Nous pouvons utiliser cnpm au lieu de npm pour installer les packages de dépendances. Si vous souhaitez en savoir plus sur cnpm, consultez le site officiel du miroir Taobao npm.

3) Installez l'outil de création d'échafaudages vue-cli (doit être installé globalement)

Exécutez la commande npm install dans la ligne de commande - g vue-cli et attendez la fin de l'installation. Si l'installation a réussi : vue -V

Requête de version du Webpack : webpack -v

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

Nous devons d'abord choisir l'emplacement où stocker le projet, puis utiliser la ligne de commande pour accéder au répertoire du projet. Ici, je choisis de créer un nouveau répertoire (répertoire NodeTest). sous le lecteur c, utilisez cd pour couper le répertoire dans le répertoire, comme indiqué ci-dessous : Exécutez la commande vue init webpack firstApp sur la ligne de commande (initialisez une version complète du projet). Expliquez cette commande. Cette commande signifie initialiser un projet dans lequel webpack est l'outil de construction, c'est-à-dire que l'ensemble du projet est basé sur webpack. où firstApp 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é dans le répertoire NodeTest), comme indiqué ci-dessous :

Si nous avons créé manuellement le dossier où est stocké ce projet dans l'éditeur, cd sur le projet : vue init webpack ; initialisez-le simplement, et chargez également les packages dont dépend webpack :

Qu'il soit créé dans ce répertoire

                                               Il nous suffit de renseigner quelques options simples en fonction de nos besoins.

Nom du projet : Nom du projet Si vous n'avez pas besoin de le modifier, appuyez simplement sur Entrée. Remarque : les majuscules ne peuvent pas être utilisées ici, j'ai donc changé le nom en vueclitest

Description du projet : Description du projet, la valeur par défaut est Un projet Vue.js, juste appuyez sur Entrée, pas besoin d'écrire.

Auteur : Auteur, si vous avez configuré l'auteur sur git, il le lira.
Installer vue-router ? S'il faut installer le plug-in de routage vue, nous devons l'installer ici, alors sélectionnez Y
Utiliser ESLint pour pelucher votre code ? Faut-il utiliser ESLint pour limiter les erreurs et le style de votre code ? Nous n'avons pas besoin de saisir n ici (recommandation). Si vous développez dans une grande équipe, il est préférable de le configurer.
configurer des tests unitaires avec Karma + Mocha Avez-vous besoin d'installer l'outil de tests unitaires Karma+Mocha Nous n'en avons pas besoin ici, alors entrez n ? .
Configurer les tests e2e avec Nightwatch ? Voulez-vous installer e2e pour les tests de simulation du comportement des utilisateurs ? Nous n'en avons pas besoin ici, alors entrez n
5.  ?

Lors de l'exécution de la commande d'initialisation, l'utilisateur sera invité à saisir plusieurs options de configuration de base, telles que le nom du projet, la description du projet et les informations sur l'auteur. Vous pouvez continuer à appuyer sur Entrée. pour certaines informations que vous ne comprenez pas ou que vous ne souhaitez pas remplir. Remplissez-les simplement. Après un certain temps, il montrera que le projet créé a été créé avec succès, comme indiqué ci-dessous :

7. Ensuite, on va dans le répertoire NoteTest pour voir si le fichier a été créé :

🎜>

Présenter l'annuaire et sa fonction :

Build : L'emplacement de stockage du code final publié.

config : configurez le chemin, le numéro de port et d'autres informations Lorsque nous avons commencé à apprendre, nous avons choisi la configuration par défaut.

node_modules : Divers modules dépendants requis par le projet chargé par npm.

src : C'est le répertoire principal (code source) de notre développement. En gros, tout ce que nous devons faire se trouve dans ce répertoire, qui contient plusieurs répertoires et fichiers :

actifs : placez des images, telles que des logos, etc.

composants : le répertoire contient des fichiers de composants

. La fonction principale est de connecter nos propres composants définis à la page pour le rendu. Le

main.js : Le fichier principal du projet (l'entrée js de l'ensemble du projet) introduit les packages de dépendances, les styles de page par défaut, etc. (un app.js sera formé dans index.html après l'exécution du projet).

statique : répertoire de ressources statiques, telles que des images, des polices, etc.

test : répertoire de test initial, peut être supprimé

fichier .XXXX : fichier de configuration.

index.html : page d'entrée HTML d'une seule page, vous pouvez ajouter des méta-informations ou du code de statistiques ou un style de réinitialisation de page, etc.

package.json : informations sur le fichier d'informations de configuration du projet/informations sur la version du package de développement dont il dépend et informations sur le plug-in dont il dépend.

README.md : Fichier de description du projet.

webpack.config.js : fichier de configuration webpack, qui regroupe les fichiers .vue dans des fichiers que le navigateur peut comprendre.

.babelrc : est la configuration du fichier qui détecte la syntaxe es6

.getignore : ignore la configuration de le fichier (comme Simuler une simulation de données locales et empêcher son utilisation lors de sa soumission/conditionnement en ligne. Il peut être configuré ici)

.postcssrc.js : configuration du préfixe

.eslintrc.js : configurer les règles de grammaire eslint (configurer les règles de grammaire non valides dans l'attribut Rules)

.eslintignore : ignorer certains effets eslint sur le projet Vérification des règles de syntaxe du fichier

Il s'agit de la structure des répertoires de l'ensemble du projet, parmi lesquels nous apportons principalement des modifications dans le répertoire src (développement modulaire). Ce projet n'est encore qu'un cadre structurel, et toutes les ressources dépendantes nécessaires à l'ensemble du projet n'ont pas encore été installées.

nom du projet cd ; entrez le projet

Installez les packages/plug-ins de dépendances requis pour le projet (visibles dans package.json) : exécutez cnpm install (npm peut avoir des avertissements. Vous pouvez utiliser cnpm au lieu de npm ici. Pour exécuter le code d'autres personnes, vous devez d'abord installer les dépendances)

Si aucune erreur n'est signalée lors de la création du projet , cette étape peut être omise. Si une erreur est signalée, cd dans le projet et exécutez cnpm install / npm install

Si vous téléchargez les projets d'autres personnes ou les projets téléchargés depuis gethub, la première étape consiste à cnpm dans l'installation du projet ; Téléchargez les plug-ins dont dépend le projet, puis exécutez le projet avec npm run dev

Une fois l'installation terminée, nous allons dans le nôtre. Si vous regardez le projet, il y aura un dossier node_modules supplémentaire, qui contient les ressources du package de dépendances dont nous avons besoin.

Après avoir installé les ressources du package de dépendances, nous pouvons exécuter l'intégralité du projet.

Exécutez le projet

Dans le répertoire du projet, exécutez la commande npm run dev (npm run start), vous utiliserez Exécutez notre application avec un chargement à chaud nous permet de voir l'effet modifié en temps réel sans actualiser manuellement le navigateur après avoir modifié le code.

Une fois le projet démarré, saisissez l'adresse après le démarrage du projet dans le navigateur :

Le logo vue apparaîtra dans le navigateur :

À ce stade, les trois méthodes d'installation de vue ont été présentées.

Une fois le projet terminé, entrez la commande d'empaquetage : cnpm run build ; un fichier dist sera généré, qui est notre fichier d'empaquetage si vous cliquez sur le fichier .html pour l'exécuter. ça, ça va réussir.

1. Création d'un environnement de développement vue (aperçu)

1. node.js doit être installé
2. Créez un environnement de développement de vue et installez l'outil d'échafaudage de vue Outil de ligne de commande officiel

npm install - -global vue-cli

3. Pour créer un projet, vous devez cd dans le projet correspondant

vue init webpack vue-demo01
cd  vue-demo01
cnpm install   /  npm install 
如果创建项目的时候没有报错，这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm install 
npm run dev/npm run start

4. Une autre façon de créer un project Projets de petite et moyenne taille (recommandé)

vue init webpack-simple vuedemo02
cd  vuedemo02       
cnpm install   /  npm install           
npm run dev

Lisez après avoir obtenu celui de quelqu'un d'autre projet qui ne fonctionne pas correctement Y a-t-il un fichier node_modules (toutes les dépendances du projet) ? Sinon, cd sur le projet pour installer les dépendances du projet : cnpm install/npm install

Après en lisant tant de méthodes d'installation de vue.js, résumons. Si vous avez des questions, donnez-moi quelques conseils ! J'espère que ça aide !

Cet article est reproduit à partir de : https://blog.csdn.net/muzidigbig/article/details/80490884

Tutoriel recommandé : "Tutoriel 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!