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 :
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})
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>)
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.
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 :
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. .
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)
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!
Pourquoi vue.js signale-t-il une erreur ?
Quelles sont les utilisations des slots vue.js ?
Comment sauter avec des paramètres dans vue.js
La différence entre serveur et hôte cloud
Encyclopédie d'utilisation de Printf
Trois façons de terminer un fil de discussion en Java
Comment acheter du Bitcoin
Comment fonctionne un interrupteur ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
