Heim > Web-Frontend > js-Tutorial > Hauptteil

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

亚连
Freigeben: 2018-06-06 10:12:16
Original
6715 Leute haben es durchsucht

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);
Nach dem Login kopieren
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;
Nach dem Login kopieren

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
  }
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!