Maison interface Web Voir.js Comment installer vue.js

Comment installer vue.js

Dec 21, 2020 am 09:26 AM
vue.js

Comment installer vue.js : 1. Téléchargez vue.min.js directement depuis le site officiel de Vue.js et importez-le avec la balise <script> .js; 3. Utilisez l'image de Taobao et sa commande cnpm pour installer vue.js. </script>

Comment installer vue.js

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

Recommandations associées : "Tutoriel vue.js"

Installation de Vue.js

Version indépendante

Nous pouvons télécharger directement vue.min.js depuis le site officiel de Vue.js et l'importer en utilisant la balise <script> </script>

Adresse de téléchargement : https://vuejs.org/js/vue.min.js

2 Utilisez la méthode CDN

Voici deux CDN étrangers relativement stables recommandés. , je n'en ai trouvé aucun de meilleur en Chine, et il est toujours recommandé de le télécharger localement.

Staticfile CDN (national) : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

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

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

Staticfile CDN (domestique)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>
<script>
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  }
})
</script>
</body>
</html>
unpkg(推荐)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>
<script>
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  }
})
</script>
</body>
</html>
cdnjs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>
<script>
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  }
})
</script>
</body>
</html>
Copier après la connexion

3. Méthode NPM

En raison de la vitesse d'installation lente de npm, ce tutoriel utilise l'image de Taobao et sa commande cnpm. Pour une introduction à l'installation et à l'utilisation, veuillez vous référer à : Utilisation de l'image Taobao NPM.

La version de npm doit être supérieure à 3.0. Si elle est inférieure à cette version, vous devez la mettre à niveau :

# 查看版本
$ npm -v
2.3.0
#升级 npm
cnpm install npm -g
# 升级或安装 cnpm
npm install cnpm -g
Copier après la connexion

Il est recommandé d'utiliser l'installation de NPM lors de la création de grandes applications avec Vue. .js :

# 最新稳定版
$ cnpm install vue
Copier après la connexion

outil de ligne de commande

Vue.js fournit un outil de ligne de commande officiel qui peut être utilisé pour créer rapidement des applications d'une seule page à grande échelle.

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置,默认回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
   vue-cli · Generated "my-project".
   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack
Copier après la connexion

Entrez dans le projet, installez et exécutez :

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms
 > Listening at http://localhost:8080
Copier après la connexion

Après avoir exécuté avec succès la commande ci-dessus, accédez à http://localhost:8080/, le résultat de sortie est le suivant :

Comment installer vue.js

Remarque : Vue.js ne prend pas en charge les versions IE8 et inférieures d'IE.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Discussion approfondie sur la façon dont vite analyse les fichiers .env Discussion approfondie sur la façon dont vite analyse les fichiers .env Jan 24, 2023 am 05:30 AM

Lorsque nous utilisons le framework Vue pour développer des projets front-end, nous déploierons plusieurs environnements lors du déploiement. Souvent, les noms de domaine d'interface appelés par les environnements de développement, de test et en ligne sont différents. Comment peut-on faire la distinction ? Cela utilise des variables et des modèles d'environnement.

Explication graphique détaillée de la façon d'intégrer l'éditeur de code Ace dans un projet Vue Explication graphique détaillée de la façon d'intégrer l'éditeur de code Ace dans un projet Vue Apr 24, 2023 am 10:52 AM

Ace est un éditeur de code intégrable écrit en JavaScript. Il correspond aux fonctionnalités et aux performances des éditeurs natifs comme Sublime, Vim et TextMate. Il peut être facilement intégré à n’importe quelle page Web et application JavaScript. Ace est maintenu en tant qu'éditeur principal de l'IDE Cloud9 et est le successeur du projet Mozilla Skywriter (Bespin).

Quelle est la différence entre la composantisation et la modularisation dans Vue Quelle est la différence entre la composantisation et la modularisation dans Vue Dec 15, 2022 pm 12:54 PM

La différence entre la modularisation et la modularisation : la modularisation est divisée du point de vue de la logique du code ; elle facilite le développement en couches de code et garantit la cohérence des fonctions de chaque module fonctionnel. La composantisation est planifiée du point de vue de l'interface utilisateur ; la composantisation du frontal facilite la réutilisation des composants de l'interface utilisateur.

Parlons en profondeur de reactive() dans vue3 Parlons en profondeur de reactive() dans vue3 Jan 06, 2023 pm 09:21 PM

Avant-propos : Dans le développement de vue3, réactif fournit une méthode pour implémenter des données réactives. Il s'agit d'une API fréquemment utilisée dans le développement quotidien. Dans cet article, l’auteur explorera son mécanisme de fonctionnement interne.

Découvrez comment écrire des tests unitaires dans Vue3 Découvrez comment écrire des tests unitaires dans Vue3 Apr 25, 2023 pm 07:41 PM

Vue.js est devenu aujourd'hui un framework très populaire dans le développement front-end. À mesure que Vue.js continue d'évoluer, les tests unitaires deviennent de plus en plus importants. Aujourd'hui, nous allons explorer comment écrire des tests unitaires dans Vue.js 3 et fournir quelques bonnes pratiques ainsi que des problèmes et solutions courants.

Une brève analyse de la façon de gérer les exceptions dans les composants dynamiques Vue3 Une brève analyse de la façon de gérer les exceptions dans les composants dynamiques Vue3 Dec 02, 2022 pm 09:11 PM

Comment gérer les exceptions dans les composants dynamiques Vue3 ? L'article suivant parlera des méthodes de gestion des exceptions des composants dynamiques Vue3. J'espère qu'il sera utile à tout le monde !

Une comparaison simple de la syntaxe JSX et de la syntaxe des modèles dans Vue (analyse des avantages et des inconvénients) Une comparaison simple de la syntaxe JSX et de la syntaxe des modèles dans Vue (analyse des avantages et des inconvénients) Mar 23, 2023 pm 07:53 PM

Dans Vue.js, les développeurs peuvent utiliser deux syntaxes différentes pour créer des interfaces utilisateur : la syntaxe JSX et la syntaxe des modèles. Les deux syntaxes ont leurs propres avantages et inconvénients. Discutons de leurs différences, avantages et inconvénients.

Une brève analyse de la façon dont vue implémente le téléchargement par découpage de fichiers Une brève analyse de la façon dont vue implémente le téléchargement par découpage de fichiers Mar 24, 2023 pm 07:40 PM

Dans le processus de développement réel du projet, il est parfois nécessaire de télécharger des fichiers relativement volumineux, puis le téléchargement sera relativement lent, de sorte que l'arrière-plan peut nécessiter que le front-end télécharge des tranches de fichiers. Par exemple, 1 A. Le flux de fichiers de gigaoctets est découpé en plusieurs petits flux de fichiers, puis l'interface est invitée à fournir respectivement les petits flux de fichiers.

See all articles