Comment construire le backend avec vue-cil

Dans le développement Web, il est très courant de créer un système de gestion backend basé sur les données. L'utilisation de Vue.js et vue-cli pour créer un système de gestion backend peut considérablement améliorer l'efficacité du développement et garantir la maintenabilité et l'évolutivité du code. Cet article présentera quelques étapes pour créer un système de gestion backend basé sur vue-cli.

Étape 1 : Installer Node.js

Tout d'abord, nous devons installer Node.js. Téléchargez et installez la dernière version de Node.js pour votre système d'exploitation sur https://nodejs.org. Une fois l'installation terminée, vous pouvez saisir la commande suivante dans l'interface de ligne de commande pour vérifier si Node.js est installé avec succès :

node -v

Si l'installation réussit, votre numéro de version de Node.js sera affiché.

Étape 2 : Créer un projet vue-cli

vue-cli est un outil de ligne de commande officiellement fourni par Vue.js pour créer rapidement des projets Vue.js. Pour installer vue-cli, vous pouvez utiliser la commande suivante :

npm install -g vue-cli

Une fois l'installation terminée, utilisez la commande suivante pour créer un projet Vue.js de base :

vue init webpack my-project

où mon-projet est le vôtre Nom du projet. Cette commande vous demandera de configurer certaines options telles que le nom du projet, la description, l'auteur, etc. Vous pouvez choisir d'utiliser les valeurs par défaut ou de les configurer en fonction de vos besoins. Après avoir exécuté cette commande, vue-cli générera automatiquement la structure de répertoires de base du projet.

Étape 3 : Installer les dépendances associées

Nous devons utiliser certaines dépendances pour nous aider à créer rapidement un système de gestion backend basé sur les données. Voici quelques dépendances de base, vous pouvez ajouter d'autres dépendances selon vos besoins :

npm install --save vue vue-router vuex
npm install --save-dev element-ui

Parmi elles, vue est la dépendance de base, vue-router et vuex sont utilisés pour créer le routage et gérer le statut, et element-ui est une bibliothèque de composants d'interface utilisateur basée sur Vue.js, qui fournit de nombreux composants et styles pratiques.

Étape 4 : Créer la page

Maintenant, nous pouvons commencer à créer la page. Créez des composants Vue à fichier unique se terminant par .vue dans le répertoire src/views. Chaque composant doit représenter une page. Par exemple, nous pouvons créer un composant appelé Tableau de bord pour afficher des informations de présentation du système. Dans le fichier Dashboard.vue, vous pouvez ajouter le code suivant :

<template>
  <div>
    <h1>Dashboard</h1>
    <p>Welcome to the Dashboard page</p>
  </div>
</template>

<script>
export default {
  name: 'Dashboard'
}
</script>

<style scoped>
h1 {
  font-size: 24px;
  font-weight: bold;
  margin-top: 20px;
}
p {
  font-size: 14px;
  color: #999;
  margin-top: 10px;
}
</style>

Le code ci-dessus définit un composant nommé Dashboard, qui contient un titre de page et du texte de description. Notez que les styles sont limités, ce qui signifie que seul le composant peut les utiliser.

Puisque nous utiliserons vue-router pour gérer le routage des pages, nous devons également ajouter le routage dans le fichier src/router/index.js :

import Vue from 'vue'
import Router from 'vue-router'
import Dashboard from '@/views/Dashboard'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Dashboard',
      component: Dashboard
    }
  ]
})

Dans le code ci-dessus , nous mappons le chemin / vers le composant Dashboard.

Étape 5 : Créer la mise en page

Les systèmes de gestion backend contiennent généralement des composants de mise en page partagés, tels que des en-têtes, des barres latérales et des pieds de page. La création de ces composants de mise en page réduit non seulement le code en double, mais permet également à plusieurs pages de partager la même mise en page. Créez un composant nommé Default.vue dans le répertoire src/layout pour représenter la mise en page par défaut.

Le composant Default.vue doit contenir le contenu suivant :

<template>
  <div>
    <header></header>
    <div class="wrapper">
      <aside></aside>
      <main>
        <router-view></router-view>
      </main>
    </div>
    <footer></footer>
  </div>
</template>

<script>
export default {
  name: 'Default'
}
</script>

<style scoped>
.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
main {
  flex-basis: 60%;
}
@media (max-width: 767px) {
  .wrapper {
    display: block;
  }
  main {
    flex-basis: 100%;
  }
}
</style>

Le composant Default.vue définit la structure HTML de la mise en page et utilise le composant router-view à l'intérieur de la balise principale afin qui charge automatiquement les composants correspondants lorsque la page change. De plus, nous avons utilisé certains styles CSS pour définir la mise en page réactive de la page.

Introduisez le composant Default.vue dans le composant App.vue, comme indiqué ci-dessous :

<template>
  <div id="app">
    <default-layout></default-layout>
  </div>
</template>

<script>
import DefaultLayout from '@/layout/Default'

export default {
  name: 'App',
  components: {
    DefaultLayout
  }
}
</script>

Ensuite, nous devons modifier le fichier src/main.js pour nous assurer que l'instance Vue.js En utilisant notre routage et notre disposition :

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

Étape 6 : Testez l'application

Enfin, exécutez la commande suivante pour démarrer le projet :

npm run dev

this La commande démarrera le serveur de développement et affichera l'application dans le navigateur. Si tout va bien, vous devriez pouvoir voir la page Tableau de bord.

Summary

Utiliser vue-cli pour créer un système de gestion backend est un moyen rapide de créer une solution basée sur les données. Une fois le projet créé, ajoutez les dépendances et les pages nécessaires pour améliorer progressivement les fonctions du système. Dans cet article, vous avez appris certaines des étapes requises pour créer un système de gestion backend de base. Bonne chance dans votre développement !

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!