Heim > Artikel > Web-Frontend > 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 werdenimport 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 ZusammenbruchSo implementieren Sie die Optimierung der Webpack-Verpackung in VueDas 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!