Vue3-Installation

1. Standalone-Version

Wir können die neueste Version direkt von der offiziellen Vue.js-Website herunterladen und sie mit dem<script>-Tag importieren.

Vue.js herunterladen

2. Verwendung der CDN-Methode

Im Folgenden werden zwei relativ stabile CDNs aus dem Ausland empfohlen. Wir haben in China noch keine guten gefunden, daher wird weiterhin empfohlen, sie lokal herunterzuladen.

Staticfile CDN (China)

<div id="app"> <p>{{ message }}</p> </div>

Ausprobieren »

ByteDance CDN (China)

<div id="app"> <p>{{ message }}</p> </div>

Ausprobieren »

unpkg (in China instabil)

<div id="app"> <p>{{ message }}</p> </div>

Ausprobieren »

cdnjs

<div id="app"> <p>{{ message }}</p> </div>

Ausprobieren »

Wir können die ES-Modul-Build-Version verwenden, um eine modernere und modularere Entwicklungsumgebung zu erstellen:

Beispiel

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
 
  createApp({
    data() {
      return {
        message: 'Hello EXAMPLE!'
      }
    }
  }).mount('#app')
</script>

Ausprobieren »

3. NPM-Methode

Da die npm-Installation langsam ist, verwendet dieses Tutorial den Taobao-Spiegel und dessen Befehl cnpm. Für Installations- und Nutzungsanweisungen siehe:Verwendung des Taobao-NPM-Spiegels。

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

Beim Erstellen großer Anwendungen mit Vue.js wird empfohlen, mit cnpm zu installieren. cnpm funktioniert gut mit den Modul-Bundlern Webpack oder Browserify. Führen Sie dann den folgenden Befehl in der Kommandozeile aus:

# 最新稳定版
$ npm init vue@latest

Dieser Befehl installiert und führt create-vue aus, das offizielle Projekt-Scaffolding-Tool von Vue.

<hr> <h2>Kommandozeilen-Tool</h2> <p>Vue.js bietet ein offizielles Kommandozeilen-Tool, mit dem schnell große Single-Page-Anwendungen erstellt werden können.</p> <p>Für Vue 3 sollten Sie die Vue CLI v4.5 verwenden, die auf npm als @vue/cli verfügbar ist. Zum Aktualisieren müssen Sie die neueste Version von @vue/cli global neu installieren:</p> <pre># Install vue-cli globally yarn global add @vue/cli # or cnpm install -g @vue/cli</pre> <p>Überprüfen Sie nach der Installation die Version:</p> <pre> $ vue --version @vue/cli 4.5.11 </pre><p>Führen Sie dann in einem Vue-Projekt Folgendes aus:</p><pre>vue upgrade --next</pre> <p><strong>Hinweis:</strong> vue-cli 3.x und vue-cli 2.x verwenden denselben vue-Befehl. Wenn Sie zuvor vue-cli 2.x installiert haben, wird es durch Vue-cli 3.x ersetzt.</p> <p>Wenn Sie noch die alte Version der Funktion vue init verwenden müssen, können Sie global ein Brückentool installieren:</p> <pre>npm install -g @vue/cli-init # The effect of running vue init will be the same as [email protected] vue init webpack my-project</pre> <h3>Projekt erstellen</h3> <p>Im folgenden Beispiel verwenden wir den Befehl vue init, um ein Projekt zu erstellen. Sie sehen Eingabeaufforderungen für optionale Funktionen wie TypeScript- und Testunterstützung:</p> 
$ npm init vue@latest
Need to install the following packages:
  [email protected]
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework
# 这里需要进行一些配置，项目名输入 example-vue3-test，其他默认回车即可
-> Project name: … example-vue3-test
-> Add TypeScript? … No / Yes
-> Add JSX Support? … No / Yes
-> Add Vue Router for Single Page Application development? … No / Yes
-> Add Pinia for state management? … No / Yes
-> Add Vitest for Unit Testing? … No / Yes
-> Add an End-to-End Testing Solution? › No
-> Add ESLint for code quality? … No / Yes

Scaffolding project in /Users/example/example-test/example-vue3/example-vue3-test...

Done. Now run:

  cd example-vue3-test
  npm install
  npm run dev

Wenn Sie sich nicht sicher sind, ob Sie eine Funktion aktivieren sollen, können Sie einfach die Eingabetaste drücken, um Nein auszuwählen.

Nachdem das Projekt erstellt wurde, installieren Sie die Abhängigkeiten und starten den Entwicklungsserver mit den folgenden Schritten:

$ cd example-vue3-test
$ npm install
$ npm run dev
  VITE v4.3.4  ready in 543 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Nach erfolgreicher Ausführung der oben genannten Befehle besuchen Siehttp://localhost:5173/, das Ausgabeergebnis ist wie unten dargestellt:

Hinweis:Vue.js unterstützt IE8 und frühere IE-Versionen nicht.

Verwendung der grafischen Benutzeroberfläche

Wir können denvue uiBefehl verwenden, um die grafische Oberfläche zum Erstellen und Verwalten von Projekten zu öffnen:

vue ui

Die Ausführung des oben genannten Befehls öffnet eine grafische Oberfläche im Browser, die Sie durch die Projekterstellung führt:

Vite

Vite ist ein Build-Tool für die Webentwicklung. Dank seines nativen ES-Modul-Importansatzes kann es einen blitzschnellen Kaltstart des Servers erreichen.

Durch Ausführen des folgenden Befehls im Terminal können Sie Vite verwenden, um schnell ein Vue-Projekt zu erstellen. Das Syntaxformat ist wie folgt:

npm init vite-app <project-name>

Projekt example-vue3-test2 erstellen:

$  npm init vite-app example-vue3-test2

Projekt ausführen:

$ cd example-vue3-test2
$ cnpm install
$ cnpm run dev
> [email protected] dev /Users/example/example-test/vue3/example-vue3-test2
> vite

[vite] Optimizable dependencies detected:
vue

  Dev server running at:
  > Local:    http://localhost:3000/

Öffnen Siehttp://localhost:3000/, die Anzeige ist wie folgt:

Andere Erweiterungen