Wie vue.js große Single-Page-Anwendungen erstellt

In diesem Artikel wird ausführlich beschrieben, wie Sie mit dem Gerüsttool vue-cli eine große einseitige Anwendung erstellen können. Dies ist sehr praktisch :

Vertraut mit Javascript + HTML5 + CSS3.

Verstehen Sie die Module des ES2015-Moduls (Export, Import, Export-Standard).

Verstehen Sie die Grundkenntnisse von NodeJS, allgemeinen NPM-Befehlen und der Verwendung von NPM-Skripten (NPM wird für die Paketverwaltung im Vue-Projekt verwendet). Verstehen Sie das Webpack-Paketierungstool (allgemeine Konfigurationsoptionen und Loader-Konzepte). (Webpack webpack.github.io/ ist ein Tool zum Packen von Modulen. Es behandelt jede Datei in einer Reihe von Dateien als Modul, ermittelt ihre Abhängigkeiten und packt sie in bereitstellbare statische Ressourcen. Die Verwendung von Webpack erfordert auch die npm-Installationsmethode ).


Starten Sie die Installation:

Erstellen Sie eine große Einzelseitenanwendung mit vue-cli: dem Gerüsttool von vue.js.

Führen Sie den folgenden Code aus, um den grundlegenden Aufbau des Projekts abzuschließen (Webpack, Installation abhängiger Pakete und Generierung grundlegender Verzeichnisse wurden konfiguriert).

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

Hauptverzeichnis:

├── build // Grundkonfiguration des Webpacks, Konfiguration der Entwicklungsumgebung, Konfiguration der Produktionsumgebung

├── config // Pfad-, Port- und Reverse-Proxy-Konfiguration

├── dist // Von Webpack gepackte statische Ressourcen

├── node_modules // Von npm installierte Abhängigkeitspakete
├── src // Front-End-Hauptdatei
│ ├── Assets // Statische Ressourcen
│ │ ├── Schriftart
│ │ ├── img
│ │ └── scss
│ ├── Komponenten // Einzelne Komponente
│ │ ├─ ─ xxx.vue // Einzelne Dateikomponente
│ ├── Router // Routing-Konfiguration
│ ├── Store // Globale Variable
│ ├── App.vue // App-Komponente
│ ├── main.js Haupteintragsdatei
├── statische // statische Datei
├── .babelrc // Babel-Konfigurationselemente
├── .editorconfig // Editor-Konfigurationselemente
├── .gitignore // Verzeichnisse, die Syntaxprüfungen ignorieren
├── index.html // Einstiegsseite
├── package.json // Projektbeschreibung und Abhängigkeiten
Paketbeschreibung: Projektbeschreibung und Abhängigkeiten

1. Skripte: einige Befehle zum Kompilieren des Projekts

Beispiel: Führen Sie npm run dev aus, dh führen Sie den entsprechenden Knoten-Build/Dev-Server in Skripten aus.

2. Abhängigkeiten: Abhängigkeiten, wenn das Projekt veröffentlicht wird

Beispiel: Führen Sie npm install wx --save aus, dh installieren Sie das abhängige Modul wx.

3. Abhängigkeiten während der Projektentwicklung

Beispiel: Führen Sie npm install sass --save-dev aus, dh installieren Sie das abhängige Modul sass.

Anhang: npm-bezogene Anweisungen:

npm ist ein Node.js-Versionsverwaltungs- und Abhängigkeitspaketverwaltungstool, das die Knotenumgebung verwendet, um die für Front erforderlichen Abhängigkeitspakete zu installieren -Endbauprojekte.

Die Download-Geschwindigkeit der NPM-Installation ist zu langsam. Verwenden Sie die Taobao Mirror-CNPM-Installation für eine schnelle Installation. Einstellungsmethode:

Projektladevorgang: $ npm install -g cnpm --registry=https://registry.npm.taobao.org

1. index.html-Seite

aktuell Das Konstruktionsprojekt ist SPA (Single Page Application), und die Seite index.html ist die Einstiegsseite, und Meta- und andere verwandte Seitenkonfigurationen werden durchgeführt.

Der 4c766faa15dbdc3e0301dfaffd03c28d94b3e26ee717c64999d7867364b1b4a3 der Seite stellt die Hauptkomponente bereit.

2. main.js: Haupteintragsdatei

Hinweis: In webpack.base.config festgelegt -> Eintrag: { app: './src/main.js' 🎜 >

Diese Datei initialisiert die Vue-Instanz und führt das entsprechende Modul ein (Sie müssen die Konfiguration und Installation in package.json vor dem Import bestätigen). Im Anhang finden Sie die Einführung und Beschreibung von main.js:

Vue importieren from 'vue' //Vue vorstellen

App aus './App' importieren //Hauptkomponente App.vue vorstellen

Router aus './router' importieren //Routing-Konfiguration einführen Datei

Axios aus „Axios“ importieren // Einführung des Netzwerkanforderungstools Axios

3: Die Hauptkomponente

mountet die Hauptkomponente im Index. HTML-Eintragsseite, und in Die Hauptkomponente wird in die Haupteintragsdatei main.js eingeführt.

Nachdem andere Komponenten erstellt wurden (z. B. /src/components/xxx.vue), können diese über die Routing-Konfiguration in der aktuellen Hauptkomponente gerendert werden.

4. Routing-Konfiguration vue-router

Routing-Konfiguration: Ordnen Sie Komponenten Routen (Routen) zu und teilen Sie Vue-Router dann mit, wo sie gerendert werden sollen

npm install vue- Router

Vue aus „vue“ importieren

Router aus „vue-router“ importieren

Vue.use(Router)

// 1. (Routing-)Komponente definieren: Import (einzelne Dateikomponente in der aktuellen Anwendung).
Home aus „../components/Home.vue“ importieren

// 2. Routen definieren und Router-Instanzen erstellen, dann „Routen“-Konfiguration übergeben
// Jede Route sollte einzeln zugeordnet werden Komponenten.
var router = {}

export default router = new Router({
routes: [
{
path: '/',
name: 'home',
Komponente: Home
}
]
})

// 3. Erstellen und mounten Sie die Root-Instanz in der Haupteintragsdatei main.js.
// Denken Sie daran, Routen über Router-Konfigurationsparameter einzufügen,
// damit die gesamte Anwendung über Routing-Funktionalität verfügt

new Vue({
el: '#app',
Router,
Vorlage: '578d07aa9e36ca6b43806c9706879c6d',
Komponenten: { App }
})

// Jetzt wurde die Anwendung gestartet!

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie Vue-Router-Muster und -Hooks (ausführliches Tutorial)

Vue- in vue-cli verwenden Router erstellt die untere Navigationsleiste (ausführliches Tutorial)

Wie verwende ich „select“, um Daten zu laden und den Standardwert in AngularJS auszuwählen?

Das obige ist der detaillierte Inhalt vonWie vue.js große Single-Page-Anwendungen erstellt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!