Was beinhaltet der vue.js-Familien-Bucket?

Der Familien-Bucket von Vue.js umfasst Scaffolding Vue-Cli, Routing Vue-Router, State Management Mode Vuex, Axios und UI Framework. Vue ist ein JavaScript-Framework zum Erstellen von Benutzeroberflächen. Es basiert auf Standard-HTML, CSS und JavaScript und bietet eine Reihe deklarativer und komponentenbasierter Programmiermodelle, um Entwickler bei der effizienten Entwicklung von Benutzeroberflächen zu unterstützen.

Das Betriebssystem dieses Tutorials: Windows 10-System, Vue Version 3.0, Dell G3-Computer.

Der Familien-Bucket von Vue.js besteht aus Gerüst-Vue-Cli, Routing-Vue-Router, Zustandsverwaltungsmodus Vuex, Axios und UI-Framework. Vue (ausgesprochen /vjuː/, ähnlich wie view) ist ein JavaScript-Framework zum Erstellen von Benutzeroberflächen. Es basiert auf Standard-HTML, CSS und JavaScript und bietet eine Reihe deklarativer und komponentenbasierter Programmiermodelle, um Entwickler bei der effizienten Entwicklung von Benutzeroberflächen zu unterstützen.

1. Projektkonstruktionstool: vue-cli

vue-cli wird auch Scaffolding genannt und ist offiziell als Standardtool für die Vue.js-Entwicklung definiert. Vue-cli ist ein komplettes System für die schnelle Entwicklung basierend auf Vue.js, das automatisch Vue.js+Webpack-Projektvorlagen generieren kann. Vue CLI bietet leistungsstarke Funktionen zum Anpassen neuer Projekte, zum Konfigurieren von Prototypen, zum Hinzufügen von Plugins und zum Überprüfen von Webpack-Konfigurationen. Die Version @vue/cli 3.x kann mit dem Befehl vue create schnell das Gerüst eines neuen Projekts erstellen. Zum Erstellen des Projekts muss man sich nicht auf Webpack verlassen, wie es bei Vue 2.x der Fall ist.

Im Vergleich zur Einführung von Scirpt-Tags weist das Vue-Cli-Gerüst die folgenden Merkmale auf:

1) Umfangreiche Funktionen

Bietet sofort einsatzbereite Unterstützung für Babel, TypeScript, ESLint, PostCSS, PWA, Unit-Tests und End-to-End-Testunterstützung.

2) Einfach zu erweitern

Das Plug-in-System ermöglicht es der Community, wiederverwendbare Lösungen basierend auf gemeinsamen Bedürfnissen zu erstellen und zu teilen.

3) Kein Auswerfen erforderlich

Vue CLI ist vollständig konfigurierbar, kein Auswerfen erforderlich. So bleibt Ihr Projekt lange auf dem neuesten Stand.

4) Grafische Oberfläche auf CLI

Erstellen, entwickeln und verwalten Sie Ihre Projekte über die unterstützende grafische Oberfläche.

5) Erstellen Sie sofort Prototypen

Verwenden Sie eine einzige Vue-Datei, um neue Inspirationen sofort umzusetzen.

6) Zukunftssicher

Generieren Sie ganz einfach nativen ES2015-Code für moderne Browser oder erstellen Sie Ihre Vue-Komponenten als native Webkomponenten.

Installation

npm install -g @vue/cli
# OR
yarn global add @vue/cli

//安装完成后创建一个项目，vue ui为图形化构建，相对简单（推荐）
vue create my-project
# OR
vue ui

2. Routing-Manager: vue-router

vue-router ist der offiziell von Vue eingeführte Routing-Manager, der hauptsächlich zum Verwalten von URLs, zum Realisieren der Korrespondenz zwischen URLs und Komponenten und zum Erstellen von Komponenten verwendet wird über URLs wechseln, was die Erstellung von Single-Page-Anwendungen erleichtert. Es verfügt hauptsächlich über die folgenden Funktionen:

1) Verschachtelte Routing-/Ansichtstabelle

2) Modulare, komponentenbasierte Routing-Konfiguration

3) Routing-Parameter, Abfragen, Platzhalter

4) Basierend auf dem Vue.js-Übergangssystem Ansichtsübergang Effekte

5) Feinkörnige Navigationssteuerung

6) Links mit automatisch aktivierten CSS-Klassen

7) HTML5-Verlaufsmodus oder Hash-Modus, automatisch herabgestuft in IE9

8) Benutzerdefiniertes Verhalten der Bildlaufleisten

vue Router-Installationscode

npm install vue-router
//安装后在mainjs引入
import VueRouter from 'vue-router'

Vue.use(VueRouter)

3. Statusverwaltungsmodus: vuex

In einigen großen Projekten stoßen wir manchmal auf eine einzelne Seite, die eine große Anzahl von Komponenten und komplexen Datenstrukturen enthält, und möglicherweise auch verschiedene Komponenten, die sich gegenseitig auf den Status auswirken In diesem Fall kann der Ereignisfluss im Komponentenbaum schnell sehr komplex werden, was das Debuggen extrem erschwert. Um dieses Problem zu lösen, wurde das Zustandsverwaltungsmodell von Vuex eingeführt, eine Implementierungsbibliothek des Zustandsverwaltungsmodells, die hauptsächlich in Form eines Plug-Ins verwendet wird Verwalten Sie komplexe Aufgaben im Vue.js-Komponenten-Ereignisfluss.

vuex-Installationsmethode

npm install vuex --save

4. axios

Axios ist eine Promise-basierte HTTP-Bibliothek, die Get- und Post-Anfragen senden kann.

Axios-Funktionen

1) XMLHttpRequests über den Browser erstellen

2) HTTP-Anfragen von node.js erstellen

3) Support Promise API

4) Anfragen und Antworten abfangen

5) Anfragedaten und Antwortdaten konvertieren

6) Kann die Anfrage abbrechen

7) JSON-Daten automatisch konvertieren

8) Der Client unterstützt die Verteidigung gegen XSRF

Installationsmethode

npm install axios

oder direkt einführen

e958a0a737432fd26085b2cc637aa116npm install axiosbc5574f69a0cba105bc93bd3dc13c4ec

5. UI-Framework: iview, vant, elementUI

iview ist eine Reihe hochwertiger UI-Komponentenbibliotheken basierend auf Vue (unterteilt in verschiedene Versionen wie Applet). und PC);

vant ist eine leichte und zuverlässige mobile Vue-Komponentenbibliothek, die auf Vue 2.0 Open Source basiert. Sie soll die Entwicklung schneller und einfacher machen -Verwenden Sie mobile Websites, die auf Vue basieren.

Ant Design Vue ist die Vue-Implementierung von Ant Design, das Backend-Produkte auf Unternehmensebene entwickelt und bereitstellt.

elementUI basiert auf der Desktop-Middle- und Backend-Komponentenbibliothek Vue 2.0.

Das obige ist der detaillierte Inhalt vonWas beinhaltet der vue.js-Familien-Bucket?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!