Maison >interface Web >Voir.js >Comment installer vue.js

Comment installer vue.js

藏色散人
藏色散人original
2020-12-21 09:26:572181parcourir

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>

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

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

# 最新稳定版
$ cnpm install vue

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

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

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:
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