installation et configuration de vue.js

Dans l'apprentissage front-end, après avoir appris HTML, CSS et JS, nous choisissons généralement d'apprendre certains frameworks, tels que Jquery, AngularJs, etc. Cette série d'articles de blog s'adresse aux étudiants qui apprennent Vue.js.

1. Comment utiliser Vue.js simplement

Tout comme le Jquery que nous avons appris auparavant, nous pouvons également utiliser des références directes lors de l'utilisation de Vue.js dans la méthode du programme. , téléchargez-le directement et introduisez-le avec la balise , Vue.js sera enregistré comme variable globale. Voici un conseil important : il existe deux versions sur le site officiel de Vue.js, la version de développement et la version de production. Nous utilisons la version de développement pendant le développement, et elle donnera des avertissements correspondants lorsque nous rencontrerons des erreurs courantes.

Bien entendu, comme Jquery, Vue.js peut également être référencé dans le code à l'aide de CDN. Copiez et collez simplement le code directement sur le site bootcdn, c'est simple et pratique.

Construction de l'environnement 2.vue

Nous vous recommandons d'utiliser l'installation de NPM lorsque la création d'applications à grande échelle avec Vue.js peut être bien empaquetée 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.

L'environnement de développement recommandé pour Vue.js est Nodejs. npm : est le gestionnaire de packages sous Nodejs. Étant donné que l'utilisation de npm en Chine sera très lente, il est recommandé d'utiliser le miroir Taobao NPM (son URL est http://npm.taobao.org/). Nous utilisons webpack pour fusionner et empaqueter des ressources et vue-cli pour générer des modèles de projet Vue générés par l'utilisateur.

Alors concentrons-nous sur la façon de construire un environnement adapté.

(1) Comment installer Nodejs

Ouvrez le site officiel de Nodejs (https://nodejs.org/en/), on peut voir Télécharger dans le milieu de page Pour ce mot, sélectionnez simplement la version correspondante à télécharger. Il est recommandé de télécharger la version ultérieure. Vous pouvez également choisir Autres téléchargements ci-dessous pour télécharger d'autres versions et versions Mac.

Une fois le téléchargement terminé, utilisez simplement l'installation infaillible. Une fois l'installation terminée, vous pouvez d'abord simplement tester si l'installation a réussi, puis configurer l'environnement. Appuyez sur les touches [win+R] du clavier, entrez cmd, puis appuyez sur Entrée pour ouvrir la fenêtre cmd. Entrez node -v et npm -v pour afficher le numéro de version actuellement installé, ce qui signifie que l'installation est réussie. La nouvelle version de Node.js a son propre npm. La fonction de npm est de gérer les packages dont dépend Node.js. Cela peut également être compris comme les éléments qui doivent être installés et désinstallés par Node.js.

(2) Installer cnpm

Étant donné que certaines ressources npm sont bloquées ou sont des ressources étrangères, cela arrive souvent lorsque npm est utilisé pour installer des packages dépendants. , donc soit FQ, soit utilisez le miroir domestique cnpm. En ouvrant https://npm.taobao.org/, on peut apprendre qu'il s'agit d'un miroir npmjs.org complet, qui peut être utilisé à la place de la version officielle (lecture seule). La fréquence de synchronisation est actuellement d'une fois toutes les 10 minutes. veillez à ce qu'il soit synchronisé autant que possible avec le service officiel.

Entrez également npm install -g cnpm --registry=http://registry.npm.taobao.org sur la ligne de commande et attendez.

Une fois l'installation terminée, nous entrons cnpm -v pour vérifier Lorsque l'image suivante s'affiche, l'installation est réussie.

(3) Installer vue-cli

vue-cli est Un échafaudage global est utilisé pour aider à créer le cadre de modèle requis. De même, entrez la commande dans cmd : npm install -g vue-cli. Dans ce morceau de code, -g signifie pour une utilisation globale. Comme cnpm, une longue liste de fichiers s'affichera une fois l'installation terminée. Entrez vue -v pour afficher la version de vue. À ce stade, l’environnement a été mis en place avec succès.

(4) Testez, créez le premier projet Vue.js

Saisissez dans la ligne de commande : vue init webpack my-first-demo (nom du dossier du projet).

Les paramètres ici et plus tard peuvent être saisis, ou vous pouvez directement appuyer sur Entrée et N.

De cette manière, le premier projet Vue.js est créé. Ouvrez l'adresse de stockage correspondante et vous verrez ce fichier le mien est placé sous user/Lunlun/.

En tapant cd my-first-demo, vous pouvez entrer dans le dossier spécifique du répertoire et saisir sur la ligne de commande : cnmp install ou npm install pour installer les packages de dépendances. Rouvrez le dossier sous le chemin, nous pouvons voir qu'il y a un dossier node_modules de plus dans le dossier que le précédent et l'installation de l'échafaudage est terminée.

(5) Entrez : npm run dev dans la ligne de commande.

Cette commande exécutera notre application en utilisant le chargement à chaud nous permet de voir l'effet modifié en temps réel sans actualiser manuellement le navigateur après avoir modifié le code.

Voici une brève introduction à la commande npm run dev. Le "run" correspond au dev dans le champ scripts du fichier package.json, qui est un raccourci vers le nœud build/dev-server. js commande. Une fois le projet exécuté avec succès, le navigateur ouvrira automatiquement localhost:8080 (si le navigateur ne s'ouvre pas automatiquement, vous pouvez le saisir manuellement). Après une exécution réussie, vous verrez l'interface ci-dessous. À ce stade, la tâche est terminée.

Cet article présente l'installation et la configuration de vue.js Pour plus de contenu connexe, veuillez faire attention au site Web chinois php.

Recommandations associées :

JS implémente l'impression et l'aperçu avant impression du navigateur

Instance de fonction de rappel JS

Implémentation de l'héritage JS