Utilisez les bases de Vue pour créer des ajouts, des suppressions, des modifications et des requêtes

Cet article présente principalement l'exemple de code pour créer un simple ajout, suppression, modification et requête à partir des bases de Vue. Les amis qui en ont besoin peuvent s'y référer

1 Installationvue-cli    cnpm install vue-cli -g --. Effectuer une installation globale

2. Créez un projet Webpack de base : vue init webpack myproject;

Voici la structure des répertoires et la description de le projet

build C'est la configuration du webpack

build.js // Code de build de l'environnement de production

check-versions.js // Vérifier node&npm et autres versions

utils.js // Outil utilitaire de configuration de build

　vue-loader.conf.js // chargeur de vue

　webpack.base.conf.js // Configuration de l'environnement de base du Webpack

　webpack.dev.conf.js // Configuration de l'environnement de développement du webpack

webpack.prod.conf.js // Configuration de l'environnement de production du webpack

config——configuration du projet vue

dev.env.js // Variables d'environnement de développement (voir le sens du mot)

index.js // Quelques variables de configuration du projet

prod.env.js/ / Variables d'environnement de production

node_modules——[ Package de dépendances]

src——[Fichier principal du projet]

App.vue——Composant racine

main.js——Fichier d'entrée

routeur ——Configuration du routage

static// Fichiers statiques, tels que certaines images, données json, etc.

Editorconfig// Définir format de code

gitignore// Fichiers qui doivent être ignorés lorsqu'ils sont téléchargés par git Format

Index.html//Page d'accueil

Package.json// Informations de base sur le projet

README.md// Description du projet

3. Installer la commande element -ui : npm i element-ui -S

Main.js doit être configuré

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

4. Installez la commande axios : npm i axios -S

Nouveau Un fichier api.js est utilisé pour configurer l'interface d'accès axios La configuration est la suivante

Main.js doit être configuré

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

5. Créer une nouvelle page Test/ Ajouter, supprimer, modifier et vérifier List.vue

Créer un dossier Test , créez un nouveau fichier List.vue, configurez dans le routeur :

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

7. Démarrez l'accès : npm run dev, accédez à l'adresse #/List

　Ajouter des conditions de recherche

Ajouter un affichage de tableau

Définir les paramètres et la méthode correspondants

Ce qui précède est ce que j'ai compilé pour vous, j'espère que cela vous sera utile. à vous à l'avenir.

Articles associés :

Solution à la requête locale 404 en utilisant axios + express sous Vue 2.5.2

Utiliser vue et réagir Pour réaliser effets tels que l'expansion et l'effondrement

Comment implémenter l'optimisation du packaging Webpack dans vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!