Es gibt verschiedene Installationsmethoden für vue.js

Es gibt drei gängige Installationsmethoden für vue.js: 1. Laden Sie die Datei vue.js direkt von der offiziellen Website von Vue.js herunter und verweisen Sie im Skript-Tag in HTML darauf. 2. Verwenden Sie die CDN-Methode und verwenden Sie sie im Skript-Tag von HTML. Verwenden Sie direkt den CDN-Link, um zu verweisen. 3. Verwenden Sie zum Installieren das NPM-Tool.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue2.9-Version. Diese Methode ist für alle Computermarken geeignet.

Verwandte Empfehlungen: „vue.js Tutorial“

Vue.js (ausgesprochen /vjuː/, ähnlich wie view) ist ein fortschrittliches Framework zum Erstellen datengesteuerter Webschnittstellen. Das Ziel von Vue.js besteht darin, eine reaktionsfähige Datenbindung und zusammengesetzte Ansichtskomponenten mit einer möglichst einfachen API zu ermöglichen. Der Einstieg ist nicht nur einfach, sondern auch die Integration in Bibliotheken von Drittanbietern oder bestehende Projekte ist einfach.

Im Folgenden werden drei Installationsmethoden von Vue.js vorgestellt:

Unabhängige Version

Wir können vue.js direkt von der offiziellen Website von Vue.js herunterladen und <script> in HTML übergeben code>-Tag. <code><script src = ../vue.js> </script> Verwenden Sie nicht die minimal komprimierte Version in der Entwicklungsumgebung, da es sonst keine Fehlermeldungen und Warnungen gibt! (Wird direkt auf der Seite verwendet) <script></script>标签中引用。<script src="../vue.js"> </script> 开发环境不要使用最小压缩版，不然会没有错误提示和警告！（页面中直接使用）

使用vue多页面开发：

引入vue.js
创建一个vue根实例 new Vue({选项})

使用CDN方法

BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js ， （国内不稳定）          

unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。（推荐使用）

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js，如（<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>）

NPM方法（推荐使用）

在用Vue.js构建大型应用的时候推荐使用NPM安装方法，NPM能很好的和诸如Webpack或者Browserify模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。

首先，先列出我们接下来需要的东西：

• node.js环境（npm包管理器）

• vue-cli 脚手架构建工具

• cnpm npm的淘宝镜像

安装node.js

从node.js官网下载并安装node，安装过程很简单，一直点下一步就ok了，安装完之后，我们通过打开命令行工具（win+R）,输入node -v 命令，查看node的版本，若出现相应的版本号，则说明你安装成功了。

npm包管理器，是集成在node中的，所以安装了node也就有了npm,直接输入 npm -v 命令，显示npm的版本信息。

到目前为止，node的环境已经安装完成，npm 包管理器也有了，由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像----cnpm.

安装cnpm

在命令行中输入  npm install -g cnpm --registry=http://registry.npm.taobao.org ，然后等待，没报错表示安装成功，（我的已经安装过了，显示更新成功的信息），如下图：

完成之后，我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的，查看淘宝npm镜像官网。

 安装vue-cli 脚手架构建工具（必须在全局中进行安装）

在命令行中运行命令 npm install -g vue-cli

Verwenden Sie die mehrseitige Vue-Entwicklung:

• Führen Sie vue.js ein

  Erstellen Sie eine neue Vue-Root-Instanz ({Option})

use CDN method

• BootCDN (Inland): https://cdn.bootcss.com/vue/2.2.2/vue.min.js, (Inland instabil)

unpkg: https://unpkg.com/vue/dist/ vue .js bleibt mit der neuesten von npm veröffentlichten Version konsistent. (Empfohlen)

cdnjs: https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js, wie zum Beispiel (<script src="https://cdnjs%20.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>)

NPM-Methode (empfohlene Verwendung). )

🎜Es wird empfohlen, die NPM-Installationsmethode zu verwenden, wenn Sie umfangreiche Anwendungen mit Vue.js erstellen. NPM kann gut mit Modulpaketierern wie Webpack oder Browserifyverwendet werden > . Vue.js bietet außerdem unterstützende Tools zum Entwickeln einzelner Dateikomponenten. 🎜🎜Lassen Sie uns zunächst auflisten, was wir als Nächstes benötigen: 🎜

🎜🎜node.js-Umgebung (npm-Paketmanager) 🎜🎜🎜🎜vue-cli scaffolding Build-Tool🎜🎜 🎜🎜cnpm Taobao Mirror von npm🎜🎜🎜🎜🎜Node.js herunterladen und installieren Der Installationsprozess ist sehr einfach Die Installation ist abgeschlossen. Wir öffnen das Befehlszeilentool (Win + R) und geben den Befehl node -v ein, um die Knotenversion zu überprüfen. Wenn die entsprechende Versionsnummer angezeigt wird, bedeutet dies, dass Ihre Installation erfolgreich war. 🎜🎜🎜🎜npm Der Paketmanager ist in den Knoten integriert. Wenn Sie also den Knoten installieren, müssen Sie npm direkt den Befehl npm -v eingeben, um die npm-Versionsinformationen anzuzeigen. 🎜🎜🎜🎜An Bisher wurde die Knotenumgebung installiert und der npm-Paketmanager ist ebenfalls verfügbar. Da einige npm-Ressourcen blockiert sind oder Fremdressourcen sind, kann npm häufig keine abhängigen Pakete installieren, sodass wir auch den inländischen Spiegel von npm benötigen. -cnpm.🎜🎜🎜Installieren Sie cnpm🎜🎜🎜Geben Sie in der Befehlszeile npm install -g cnpm --registry=http://registry.npm.taobao.org ein und warten Sie, nichts Ein Fehler zeigt an, dass die Installation erfolgreich war (meine wurde bereits installiert und die Update-Erfolgsmeldung wird angezeigt), wie unten gezeigt: 🎜🎜🎜🎜Nach Abschluss können wir cnpm anstelle von npm verwenden, um abhängige Pakete zu installieren. Wenn Sie mehr über cnpm erfahren möchten, besuchen Sie die offizielle Website des Taobao npm Mirror. 🎜🎜🎜Installieren Sie das Gerüstbau-Tool vue-cli (muss global installiert werden)🎜🎜🎜Führen Sie den Befehl npm install -g vue-cli in der Befehlszeile aus und warten Sie, bis die Installation abgeschlossen ist . 🎜🎜🎜🎜Ob die Installation erfolgreich ist: vue -V🎜🎜🎜🎜Webpack-Versionsabfrage: webpack -v🎜🎜🎜🎜Durch die oben genannten drei Schritte sind die Umgebung und die Tools, die wir vorbereiten müssen, bereit, und dann können wir beginnen Verwenden Sie vue -cli, um das Projekt zu erstellen. 🎜Zuerst müssen wir den Speicherort für das Projekt auswählen und dann über die Befehlszeile in das Projektverzeichnis wechseln. Hier wähle ich, ein neues Verzeichnis (NodeTest-Verzeichnis) unter dem Laufwerk C zu erstellen und es mit cd zu ändern Verzeichnis in dieses Verzeichnis. Wie unten gezeigt: 🎜🎜🎜🎜

Führen Sie im NodeTest-Verzeichnis den Befehl in der Befehlszeile aus vue init webpack firstApp (initialisieren Sie eine Vollversion des Projekts) . Erklären Sie diesen Befehl. Dieser Befehl bedeutet, ein Projekt zu initialisieren, wobei Webpack das Build-Tool ist, das heißt, das gesamte Projekt basiert auf Webpack. Dabei ist firstApp der Name des gesamten Projektordners. Dieser Ordner wird automatisch in dem von Ihnen angegebenen Verzeichnis generiert (in meinem Beispiel befindet er sich in NodeTest). Verzeichnis zum Generieren des Ordners), wie unten gezeigt:

Wenn wir den Ordner, in dem dieses Projekt gespeichert ist, manuell im Editor erstellt haben, cd in das Projekt: vue init webpack; initialisieren Sie es einfach, und Webpack wird ebenfalls erstellt Abhängige Pakete:

Ob es in diesem Verzeichnis erstellt wird

Nach der Eingabe des Befehls werden wir nach einigen einfachen Optionen gefragt, die wir entsprechend unseren Anforderungen ausfüllen können.

• Projektname: Projektname. Wenn Sie ihn nicht ändern müssen, drücken Sie einfach die Eingabetaste. Hinweis: Großbuchstaben können hier nicht verwendet werden, daher habe ich den Namen in vueclitest geändert
• Projektbeschreibung: Projektbeschreibung, der Standardwert ist ein Vue.js-Projekt, drücken Sie einfach die Eingabetaste, Sie müssen nichts schreiben.
• Autor: Autor, wenn Sie Git-Autor konfiguriert haben, wird er es lesen.
• Vue-Router installieren? Ob das Vue-Routing-Plugin installiert werden soll, wir müssen es hier installieren, also wählen Sie Y
• Verwenden Sie ESLint, um Ihren Code zu begrenzen? Wir müssen hier kein n eingeben (Empfehlung). Wenn Sie in einem großen Team entwickeln, ist es am besten, es zu konfigurieren.
• Unit-Tests mit Karma + Mocha einrichten? Müssen Sie das Unit-Test-Tool Karma+Mocha installieren? Wir brauchen es hier nicht, also geben Sie n ein.
• E2e-Tests mit Nightwatch einrichten? Möchten Sie e2e für Benutzerverhaltenssimulationstests installieren? Wenn Sie also n

eingeben, um den Initialisierungsbefehl auszuführen, gibt der Benutzer mehrere grundlegende Konfigurationsoptionen ein B. Projektname, Projektbeschreibung, Autoreninformationen. Für einige Informationen, die Sie nicht verstehen oder nicht ausfüllen möchten, können Sie einfach die Eingabetaste drücken, um sie einzugeben. Nach einer Weile wird das Projekt angezeigt wurde erfolgreich erstellt, wie unten gezeigt:

Als nächstes gehen wir zum NoteTest-Verzeichnis, um zu sehen, ob die Datei erstellt wurde:

Öffnen Sie das firstApp-Projekt. Die Verzeichnisse im Projekt sind wie folgt :

Stellen Sie die Verzeichnisse und ihre Funktionen vor:

• build: Hier wird der endgültig veröffentlichte Code gespeichert.
• config: Konfigurieren Sie den Pfad, die Portnummer und andere Informationen. Als wir mit dem Lernen begannen, wählten wir die Standardkonfiguration.
• node_modules: Verschiedene abhängige Module, die für das von npm geladene Projekt erforderlich sind.
• src: Dies ist das Hauptverzeichnis (Quellcode) für unsere Entwicklung. Im Grunde befindet sich alles, was wir tun müssen, in diesem Verzeichnis, das mehrere Verzeichnisse und Dateien enthält:
  • assets: Platzieren Sie einige Bilder, z. B. Logos usw.
  • components: Das Verzeichnis enthält Komponentendateien nacheinander.
  • router/index.js: Hier wird das Routing konfiguriert.
  • App.vue: Projekteintragskomponente (mit Komponenten). Wir können hier auch Komponenten schreiben, anstatt das Komponentenverzeichnis zu verwenden. Die Hauptfunktion besteht darin, unsere eigenen definierten Komponenten zum Rendern mit der Seite zu verbinden, was unerlässlich ist.
  • main.js: Die Kerndatei des Projekts (die Eintrags-JS des gesamten Projekts) führt Abhängigkeitspakete, Standardseitenstile usw. ein (nach der Ausführung des Projekts wird in index.html eine app.js-Datei erstellt). .
  • statisch: Statisches Ressourcenverzeichnis, z. B. Bilder, Schriftarten usw.
  • test: anfängliches Testverzeichnis, kann gelöscht werden
• .XXXX-Datei: Konfigurationsdatei.
• index.html: Die Einstiegsseite einer einzelnen HTML-Seite. Sie können einige Metainformationen oder statistischen Code hinzufügen oder den Seitenstil zurücksetzen.
• package.json: Projektkonfigurationsinformationsdatei/Versionsinformationen abhängiger Entwicklungspakete und abhängige Plug-in-Informationen.
• README.md: Projektbeschreibungsdatei.
• webpack.config.js: Webpack-Konfigurationsdatei, die .vue-Dateien in Dateien packt, die der Browser lesen kann.
• .babelrc: Es ist die Konfiguration der Datei, die die ES6-Syntax erkennt.
• .getignore: Ignoriert die Konfiguration der Datei (z. B. Simulation lokaler Datensimulation, um zu verhindern, dass sie ignoriert wird, wenn sie online übermittelt/verpackt wird). hier konfiguriert werden)
• postcssrc.js: Präfixkonfiguration
• .eslintrc.js: Eslint-Grammatikregeln konfigurieren (konfigurieren Sie, welche Grammatikregeln im Regelattribut ungültig sind)
• .eslintignore: Ignorieren Sie die Eslint-Prüfung der Grammatikregeln bestimmter Dateien im Projekt

Dies ist die Verzeichnisstruktur des gesamten Projekts. Darunter nehmen wir hauptsächlich Änderungen im src-Verzeichnis vor (modulare Entwicklung). Dieses Projekt ist immer noch nur ein struktureller Rahmen und alle für das gesamte Projekt erforderlichen abhängigen Ressourcen wurden noch nicht installiert.

cd-Projektname; geben Sie das Projekt ein

Installieren Sie die für das Projekt erforderlichen Abhängigkeitspakete/Plug-Ins (kann in package.json angezeigt werden): Führen Sie cnpm install aus (npm hat möglicherweise Warnungen Sie können hier cnpm verwenden. Anstelle von npm müssen Sie Abhängigkeiten installieren, bevor Sie den Code anderer Personen ausführen.)Wenn beim Erstellen des Projekts kein Fehler gemeldet wird, führen Sie diesen Schritt aus kann weggelassen werden. Wenn ein Fehler gemeldet wird, cd zum Projekt und führen Sie cnpm install / npm installcnpm install (npm可能会有警告，这里可以用cnpm代替npm了，运行别人的代码需要先安装依赖)如果创建项目的时候没有报错，这一步可以省略。如果报错了 cd到项目里面运行 cnpm install   /  npm install

若拿到别人的项目或从gethub上下载的项目第一步就是要在项目中cnpm install;下载项目所依赖的插件，然后npm run dev 运行项目

 安装完成之后，我们到自己的项目中去看，会多一个node_modules文件夹，这里面就是我们所需要的依赖包资源。

安装完依赖包资源后，我们就可以运行整个项目了。

运行项目

在项目目录中，运行命令 npm run dev （npm run start），会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

  项目启动后，在浏览器中输入项目启动后的地址：

 在浏览器中会出现vue的logo：

至此，vue的三种安装方式已介绍完毕。

项目完成后输入打包命令:cnpm run build;会生成一个dist文件，就是我们的打包文件，点击.html文件能运行则成功。

搭建vue的开发环境（大纲）

• 必须安装node.js

• 搭建vue的开发环境，安装vue的脚手架工具 官方命令行工具npm install - -global vue-cli

• 创建项目 必须cd到对应的一个项目里面

  vue init webpack vue-demo01

  cd  vue-demo01

  If aus Der erste Schritt für ein Projekt oder ein von gethub heruntergeladenes Projekt besteht darin, die Plug-Ins herunterzuladen, von denen das Projekt abhängt, und dann npm run dev um das Projekt auszuführen 🎜🎜🎜🎜 Installation Nach Abschluss gehen wir zu unserem Projekt und sehen, dass es einen zusätzlichen Ordner node_modules gibt, der die benötigten Abhängigkeitspaketressourcen enthält. 🎜🎜🎜🎜Installieren Nachdem wir die Ressourcen des Abhängigkeitspakets fertiggestellt haben, können wir das gesamte Projekt ausführen. 🎜🎜Führen Sie das Projekt aus🎜🎜Führen Sie im Projektverzeichnis den Befehl npm run dev (npm run start) aus, der unsere Anwendung mit Hot Loading ausführt und es uns ermöglicht, den Code nach Ihnen zu ändern Sie können die geänderten Effekte in Echtzeit sehen, ohne den Browser manuell aktualisieren zu müssen. 🎜🎜🎜🎜 Projekt Geben Sie nach dem Start die Startadresse des Projekts in den Browser ein: 🎜🎜🎜🎜 Das Vue-Logo erscheint im Browser: 🎜🎜🎜🎜Zu diesem Zeitpunkt wurden die drei Installationsmethoden von Vue vorgestellt. 🎜🎜Nachdem das Projekt abgeschlossen ist, geben Sie den Verpackungsbefehl ein: cnpm run build. Es wird eine dist-Datei generiert, bei der es sich um unsere Verpackungsdatei handelt. Wenn Sie auf die HTML-Datei klicken, wird sie ausgeführt. 🎜

  Aufbau einer Entwicklungsumgebung für Vue (Überblick)

  🎜🎜🎜Node.js muss installiert sein🎜🎜🎜🎜Building Eine Entwicklungsumgebung für Vue. Installieren Sie das offizielle Befehlszeilentool npm install - -global vue-cli von vue. Um ein Projekt zu erstellen, müssen Sie mit cd in das entsprechende Projekt wechseln🎜🎜 vue init webpack vue-demo01 🎜🎜cd vue-demo01🎜

• cnpm install / npm install Wenn beim Erstellen des Projekts kein Fehler gemeldet wird, kann dieser Schritt weggelassen werden. Wenn ein Fehler gemeldet wird, cd zum Projekt und führen Sie cnpm install / npm installcnpm install   /  npm install 如果创建项目的时候没有报错，这一步可以省略。如果报错了 cd到项目里面运行cnpm install   /  npm install

• npm run dev/npm run start

另一种创建项目的方式中小型项目（推荐）

vue init webpack-simple vuedemo02

cd vuedemo02

cnpm install / npm install

npm run dev

拿到别人的项目不能正常运行后看有没有node_modules这个文件（项目所有的依赖），若没有cd到项目中安装项目的依赖：cnpm install/npm install

npm run dev/npm run start

Noch einer So erstellen Sie ein Projekt Der Weg für kleine und mittlere Projekte (empfohlen)

vue init webpack-simple vuedemo02cd vuedemo02

cnpm install / npm install

npm run dev
Sehen Sie nach, ob dort Gibt es ein Problem, nachdem die Projekte anderer Personen nicht normal ausgeführt werden können? Die Datei „node_modules“ (alle Abhängigkeiten des Projekts), wenn keine CD zum Projekt vorhanden ist, um die Projektabhängigkeiten zu installieren: cnpm install/npm install

🎜🎜Verwandte Empfehlungen: 🎜🎜🎜🎜Zusammenfassung der Front-End-Vue-Interviewfragen 2020 (mit Antworten) 🎜🎜🎜🎜Vue-Tutorial-Empfehlung: Die neuesten 5 vue.js-Video-Tutorial-Auswahlen im Jahr 2020🎜🎜🎜🎜Für weitere Informationen zum Thema Programmierung Kenntnisse finden Sie unter: 🎜Programmierunterricht🎜! ! 🎜🎜

Das obige ist der detaillierte Inhalt vonEs gibt verschiedene Installationsmethoden für vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!