Heim  >  Artikel  >  Web-Frontend  >  So installieren Sie vue.js

So installieren Sie vue.js

藏色散人
藏色散人Original
2020-12-21 09:26:572114Durchsuche

So installieren Sie vue.js: 1. Laden Sie vue.js direkt von der offiziellen Website von Vue.js herunter und importieren Sie es mit dem <script>-Tag. 2. Verwenden Sie die CDN-Methode, um vue.js zu installieren . Verwenden Sie Taobaos Spiegel und seinen Befehl cnpm, um vue.js zu installieren. </script>

So installieren Sie vue.js

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue Version 2.0. Diese Methode ist für alle Computermarken geeignet.

Verwandte Empfehlungen: „vue.js Tutorial

Vue.js-Installation

1. Unabhängige Version

Wir können vue.min.js direkt von der offiziellen Website von Vue.js herunterladen und Tag-Einführung.

Download-Adresse: https://vuejs.org/js/vue.min.js

2. Verwenden Sie die CDN-Methode. Die folgenden zwei relativ stabilen CDNs werden im Ausland empfohlen. Ich habe kein besseres gefunden In China wird derzeit noch empfohlen, es lokal herunterzuladen.

Staticfile CDN (inländisch): https://cdn.staticfile.org/vue/2.2.2/vue.min.js

unpkg: https://unpkg.com/vue/dist/vue.js, ja Achten Sie darauf, dass es mit der neuesten von npm veröffentlichten Version konsistent ist.

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

Staticfile CDN (inländisch)

<!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. NPM-Methode

Aufgrund der langsamen Installation Geschwindigkeit von npm, dieses Tutorial verwendet das Image von Taobao und seinen Befehl cnpm. Anweisungen zur Installation und Verwendung finden Sie unter: Verwenden des Taobao NPM-Image.

Die NPM-Version muss größer als 3.0 sein. Wenn sie niedriger als diese Version ist, müssen Sie sie aktualisieren:

# 查看版本
$ npm -v
2.3.0
#升级 npm
cnpm install npm -g
# 升级或安装 cnpm
npm install cnpm -g

Es wird empfohlen, die NPM-Installation zu verwenden, wenn Sie große Anwendungen mit Vue.js erstellen:

# 最新稳定版
$ cnpm install vue

Befehlszeile Tool

Vue.js bietet ein offizielles Befehlszeilentool, mit dem schnell große Einzelseitenanwendungen erstellt werden können.

# 全局安装 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

Geben Sie das Projekt ein, installieren Sie es und führen Sie es aus:

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms
 > Listening at http://localhost:8080

Nachdem Sie den obigen Befehl erfolgreich ausgeführt haben, greifen Sie auf http://localhost:8080/ zu. Das Ausgabeergebnis lautet wie folgt:

So installieren Sie vue.jsHinweis: Vue.js funktioniert nicht Unterstützt IE8 und niedrigere IE-Versionen.

Das obige ist der detaillierte Inhalt vonSo installieren Sie vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn