Il existe plusieurs méthodes d'installation pour vue.js

Il existe trois méthodes d'installation courantes pour vue.js : 1. Téléchargez le fichier vue.js directement depuis le site officiel de Vue.js et référencez-le dans le code HTML via la balise de script ; méthode, dans le HTML Utilisez directement le lien CDN dans la balise de script pour référence ; 3. Utilisez l'outil NPM pour installer.

L'environnement d'exploitation de ce tutoriel : Système Windows 7, vue version 2.9. Cette méthode convient à toutes les marques d'ordinateurs.

Recommandations associées : "Tutoriel vue.js"

Vue.js (prononcé /vjuː/, similaire à view) est une méthode progressive pour créer un site Web basé sur les données. cadre d'interfaces. 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 vue directement depuis le site officiel de Vue.js .js, et référencé en html via la balise <script></script>. <script src="../vue.js"> </script> N'utilisez pas la version minimalement compressée dans l'environnement de développement, sinon il n'y aura pas de messages d'erreur ni d'avertissements ! (Utilisé directement dans la page)

Utiliser vue pour le développement multipage :

Introduire vue.js
Créer une instance racine de vue new Vue({option})

Utiliser la méthode CDN

BootCDN (domestique) : https://cdn.bootcss.com/vue/2.2.2/vue.min.js, (instabilité domestique) 

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, tel que (<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>)

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 peuvent être bien empaquetées avec des modules tels que Webpack ou. Browserify utilisé conjointement avec l'appareil. 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 Mirror

Installer node.js

Télécharger et installez node à partir du 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 la commande node -v pour afficher. la version du nœud. Si le numéro de version correspondant apparaît, cela signifie que votre installation a réussi.

Le gestionnaire de packages npm est intégré dans node, donc si vous installez node, vous aurez npm Entrez directement la commande npm -v pour afficher les informations de version de npm.

Jusqu'à présent, l'environnement de nœud a été installé et le gestionnaire de packages npm est également disponible. Parce que certaines ressources npm sont bloquées ou sont des ressources étrangères, npm provoque souvent l'installation. des packages dépendants ont échoué, nous avons donc également besoin de l'image domestique de npm----cnpm.

Installez cnpm

et entrez npm install -g cnpm --registry=http://registry.npm.taobao.org dans la ligne de commande, Attendez ensuite, si aucune erreur n'est signalée, cela signifie que l'installation est réussie (la mienne a été installée, et le message de réussite de la mise à jour s'affiche), comme indiqué ci-dessous :

Après une fois terminé, nous pouvons utiliser cnpm Remplacer npm pour installer les packages de dépendances. Si vous souhaitez en savoir plus sur cnpm, consultez le site officiel du miroir Taobao npm.

Installez l'outil de construction d'échafaudage vue-cli (doit être installé globalement)

Exécutez la commande npm install -g vue-cli sur la ligne de commande 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 et d'utiliser cd pour. remplacez le répertoire par ce répertoire ci-dessous, comme indiqué ci-dessous :

Dans le répertoire NodeTest, exécutez la commande vue init webpack firstApp en ligne de commande (initialiser 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, il sera dans NodeTest. répertoire pour générer le dossier), comme indiqué ci-dessous :

Si nous avons créé manuellement le dossier où est stocké ce projet dans l'éditeur, cd vers 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

Après avoir entré la commande, il le fera demander Nous avons quelques options simples que nous pouvons remplir 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, appuyez simplement sur Entrée sans écrire.
• Auteur : Auteur, si vous avez configuré git comme auteur, il le lira.
• Installer vue-router ? Si nous devons installer le plug-in de routage vue, nous devons l'installer ici, alors choisissez Y
• Utiliser ESLint pour lint votre code ? vos erreurs de code et votre style. 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

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

Ensuite, nous allons dans le répertoire NoteTest pour voir si le fichier a été créé :

Ouvrir le projet firstApp, dans le projet Le répertoire est le suivant :

Présenter le répertoire 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 :
  • assets : Placez quelques images. , tels que des logos, etc.
  • composants : Le répertoire contient les fichiers de composants un par un
  • router/index.js : où le routage est configuré
  • App.vue : projet Pour les composants d'entrée (avec composants), nous pouvons également écrire des composants ici au lieu d'utiliser le répertoire des composants. La fonction principale est de connecter nos propres composants définis à la page pour le rendu, ce qui est essentiel.
  • main.js : Le fichier core 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 fichier app.js sera formé dans index.html après le le projet est exécuté).
  • 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 : La page d'entrée d'une seule page HTML. 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 des packages de développement dépendants et informations sur les plug-ins dépendants.
• README.md : Fichier de description du projet.
• webpack.config.js : fichier de configuration du webpack, qui regroupe les fichiers .vue dans des fichiers que le navigateur peut comprendre.
• .babelrc : C'est la configuration du fichier pour détecter la syntaxe es6
• .getignore : Ignorer la configuration du fichier (comme simuler une simulation de données locales pour éviter qu'elle ne soit ignorée lors de l'obtention soumis/emballé en ligne) 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 la vérification par eslint des règles de syntaxe de certains fichiers du projet

Il s'agit de la structure de répertoires de l'ensemble du projet, parmi laquelle nous apportons principalement des modifications dans le src répertoire (développement de modularisation). 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 de dépendances/plug-ins requis pour le projet (visibles dans package.json) : Exécutez cnpm install (npm peut avoir des avertissements, ici vous pouvez utiliser cnpm au lieu de npm. 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 et exécutez dans le projet cnpm install   /  npm install

Si vous obtenez des projets d'autres personnes ou des projets téléchargés depuis gethub, la première étape consiste à télécharger le projet dans le projet cnpm install; Plugins dépendants, puis npm run dev exécutez le projet

Une fois l'installation terminée, nous allons sur notre projet pour voir cela là sera un dossier node_modules supplémentaire, à l'intérieur se trouvent 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), et notre application sera exécutée en utilisant le chargement à chaud. peut Nous permettre 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 une fois le projet démarré dans le navigateur :

Il sera être affiché dans le navigateur Le logo vue apparaît :

À 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, il réussira. .

Créer un environnement de développement vue (aperçu)

• Node.js doit être installé

• Créez l'environnement de développement de Vue, installez l'outil d'échafaudage officiel de vue, outil de ligne de commande npm install - -global vue-cli

• Pour créer un projet, vous devez vous connecter à un projet correspondant

  vue init webpack vue-demo01

  cd  vue-demo01

• cnpm install   /  npm install 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

• npm run dev/npm run start

Une autre façon de créer des projets pour des projets de petite et moyenne taille (recommandé)

vue init webpack-simple vuedemo02

cd vuedemo02

cnpm install / npm install

npm run dev

Après avoir obtenu le projet de quelqu'un d'autre et qu'il ne peut pas fonctionner normalement, vérifiez s'il existe le fichier node_modules (toutes les dépendances du projet). projet pour installer les dépendances du projet : cnpm install/npm install

Recommandations associées :

Résumé des questions d'entretien Vue frontale 2020 (avec réponses)

Recommandations de didacticiels Vue : les 5 dernières sélections de didacticiels vidéo vue.js en 2020

Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de 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!