Verwenden Sie die Vue-Grundlagen, um Hinzufügungen, Löschungen, Änderungen und Abfragen zu erstellen

In diesem Artikel wird hauptsächlich der Beispielcode zum Erstellen eines einfachen Hinzufügens, Löschens, Änderns und Abfragens vorgestellt, beginnend mit den Grundlagen von Vue. Freunde, die ihn benötigen, können sich darauf beziehen

1 Installationvue-cli    cnpm install vue-cli -g -- Führen Sie eine globale Installation durch

2. Erstellen Sie ein einfaches Webpack-Projekt: vue init webpack myproject; das Projekt

build Es ist die Webpack-Konfiguration build.js // Produktionsumgebungs-Build-Code

check-versions.js // Überprüfen Sie node&npm und andere Versionen

utils.js // Build-Konfigurationsdienstprogramm

　vue-loader.conf.js // Vue Loader

webpack.base.conf.js // Grundlegende Webpack-Umgebungskonfiguration

webpack.dev.conf.js // Webpack-Entwicklungsumgebungskonfiguration

webpack.prod.conf.js // Webpack-Produktionsumgebungskonfiguration

config – Vue-Projektkonfiguration

dev.env.js // Entwicklungsumgebungsvariablen (siehe Bedeutung des Wortes)

index.js // Einige Konfigurationsvariablen des Projekts

prod.env.js / / Produktionsumgebungsvariablen

node_modules——[ Abhängigkeitspaket]

src——[Projektkerndatei]

App.vue——Root-Komponente

main.js – Eintragsdatei

Router – Routing-Konfiguration

static// Statische Dateien, wie einige Bilder, JSON-Daten usw.

Editorconfig// Definieren Codeformat

gitignore// Dateien, die beim Hochladen durch git ignoriert werden müssen Format

Index.html//Homepage

Package.json// Grundlegende Projektinformationen

README.md// Projektbeschreibung

3. Befehl „Element -ui installieren“: npm i element-ui -S

Main.js muss mit

　import elementui from 'element-ui'
　　import 'element-ui/lib/theme-chalk/index.css'
　　Vue.use(elementui);

konfiguriert werden

4. Axios installieren Befehl: npm i axios -S

Neue API erstellen Die .js-Datei wird zum Konfigurieren der Axios-Zugriffsschnittstelle verwendet. Die Konfiguration ist wie folgt:

Main.js muss konfiguriert werden

import Api from './api';
　　Vue.prototype.$api=Api;

5. Erstellen Sie eine neue Seite Test/List.vue Vorgänge hinzufügen, löschen, ändern und prüfen

Erstellen Sie einen Ordner Testen, neue Datei List.vue erstellen, im Router konfigurieren:

　import List from '@/Test/List'
　　{
　　path: '/List',
　　name: 'List',
　　component: List
　　}

7. Zugriff starten: npm run dev, Zugriffsadresse #/List

Suchbedingungen hinzufügen

Tabellenanzeige hinzufügen

Entsprechende Parameter und Methoden definieren

Das Obige habe ich zusammengestellt. Für alle hoffe ich, dass es für alle hilfreich ist in der Zukunft.

Verwandte Artikel:

Lösung für 404 lokale Anfragen mit Axios + Express unter Vue 2.5.2

Verwenden von Vue und Reagieren Effekte wie Erweiterung und Zusammenbruch

So implementieren Sie die Optimierung der Webpack-Verpackung in Vue

Das obige ist der detaillierte Inhalt vonVerwenden Sie die Vue-Grundlagen, um Hinzufügungen, Löschungen, Änderungen und Abfragen zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!