Maison > Article > interface Web > Pratique de développement Vue : création d'applications frontales hautement disponibles

Pratique de développement Vue : création d'applications frontales hautement disponibles

WBOYoriginal: 2023-11-03 18:40:521333parcourir

Pratique de développement Vue : création dapplications frontales hautement disponibles

Avec le développement rapide de la technologie Internet, le développement front-end a attiré de plus en plus d'attention. En tant que l'un des frameworks front-end les plus populaires à l'heure actuelle, Vue présente les avantages d'être facile à apprendre, efficace, flexible et basé sur des composants, et est largement utilisé dans des projets réels. Cet article explique comment utiliser Vue pour créer une application frontale hautement disponible.

1. Pré-connaissances

Avant d'utiliser Vue pour le développement, vous devez maîtriser les technologies suivantes :

HTML/CSS/JavaScript

HTML est un langage de balisage de page Web, CSS est un langage de feuille de style et JavaScript est un langage de script. HTML est responsable de la structure de la page, CSS est responsable du style de la page et JavaScript est responsable de la logique de la page.

ES6 est le standard de nouvelle génération pour JavaScript, ajoutant de nouvelles syntaxes et fonctionnalités, notamment des fonctions fléchées, des classes, Promise, let et const, etc.

Node.js

Node.js est un environnement d'exécution pour la programmation côté serveur utilisant JavaScript. Vous pouvez utiliser le gestionnaire de packages npm pour installer et gérer les packages de dépendances.

Webpack

Webpack est l'outil de packaging frontal le plus populaire. Il peut regrouper plusieurs fichiers JavaScript dans un seul fichier et l'optimiser, et vous pouvez utiliser des plug-ins pour étendre les fonctionnalités.

Vue.js

Vue est un framework JavaScript progressif qui facilite la création d'interfaces Web interactives. Il fournit des fonctions telles que la liaison de données et la création de composants, et est facile à utiliser et flexible.

2. Créer l'application Vue

Installer Vue

Utilisez le gestionnaire de packages npm Vous pouvez utiliser la commande suivante pour installer Vue :

npm install vue

Créer une instance Vue

Après avoir introduit le fichier Vue.js dans. le fichier HTML, il est temps de créer une instance Vue. L'instance Vue est responsable du maintien de l'état de la page et de sa liaison bidirectionnelle à la page. Voici un exemple de code pour créer une instance Vue :

<!DOCTYPE html>
<html>
  <head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello, Vue!'
        }
      })
    </script>
  </body>
</html>

Dans l'exemple de code ci-dessus, Vue est utilisé pour construire une instance Vue contenant le message variable, et la syntaxe des doubles accolades est utilisée pour interpoler dans la balise div.

Utiliser les composants Vue

Les composants Vue contiennent des modèles, des styles et du code JavaScript, qui peuvent être réutilisés dans plusieurs instances Vue. Voici un exemple de code pour définir un composant Vue :

<!DOCTYPE html>
<html>
  <head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <my-component></my-component>
    </div>
    <script>
      Vue.component('my-component', {
        template: '<div>{{ message }}</div>',
        data: function () {
          return {
            message: 'Hello, Vue Component!'
          }
        }
      })
      var app = new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>

Dans l'exemple de code ci-dessus, un composant nommé my-component est défini et utilisé dans le modèle de l'instance Vue.

Gestion de routage

Vue Router est le gestionnaire de routage officiel de Vue, qui peut réaliser le contrôle de routage des applications à page unique (SPA). Voici un exemple de code pour utiliser Vue Router pour le contrôle du routage :

<!DOCTYPE html>
<html>
  <head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
    </div>
    <script>
      var Home = {
        template: '<div>Home</div>'
      }
      var About = {
        template: '<div>About</div>'
      }
      var router = new VueRouter({
        routes: [
          {
            path: '/',
            component: Home
          },
          {
            path: '/about',
            component: About
          }
        ]
      })
      var app = new Vue({
        router: router
      }).$mount('#app')
    </script>
  </body>
</html>

Dans l'exemple de code ci-dessus, deux composants de routage Home et About sont définis, et Vue Router est utilisé pour la gestion du routage. Dans l'instance Vue, transmettez l'instance Vue Router à l'instance Vue à l'aide de l'option router.

Interaction de données

L'interaction de données fait généralement référence à l'échange de données entre le front-end et le back-end. Vue fournit un ensemble d'API pour l'interaction des données, notamment axios, fetch, etc. Voici un exemple de code pour l'interaction de données à l'aide d'axios :

<!DOCTYPE html>
<html>
  <head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="item in items">{{ item }}</li>
      </ul>
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          items: []
        },
        created: function () {
          axios.get('/api/items')
            .then(function (response) {
              this.items = response.data
            }.bind(this))
            .catch(function (error) {
              console.log(error)
            })
        }
      })
    </script>
  </body>
</html>

Dans l'exemple de code ci-dessus, une requête GET est effectuée à l'aide d'axios, les données renvoyées par le backend sont obtenues et un modèle d'affichage des données est lié à Vue. exemple.

Gestion de l'état

La gestion de l'état peut nous aider à gérer plus efficacement les données d'état de l'application et à rendre les données plus faciles à maintenir et à développer. Vuex est la bibliothèque de gestion d'état Vue officiellement fournie, fournissant une solution pour le stockage et la gestion centralisés de l'état et du comportement de tous les composants d'une application. Voici un exemple de code pour utiliser Vuex pour la gestion de l'état :

<!DOCTYPE html>
<html>
  <head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuex/dist/vuex.js"></script>
  </head>
  <body>
    <div id="app">
      <div>{{ count }}</div>
      <button v-on:click="increment">+</button>
      <button v-on:click="decrement">-</button>
    </div>
    <script>
      var store = new Vuex.Store({
        state: {
          count: 0
        },
        mutations: {
          increment: function (state) {
            state.count++
          },
          decrement: function (state) {
            state.count--
          }
        }
      })
      var app = new Vue({
        el: '#app',
        store: store,
        computed: {
          count: function () {
            return this.$store.state.count
          }
        },
        methods: {
          increment: function () {
            this.$store.commit('increment')
          },
          decrement: function () {
            this.$store.commit('decrement')
          }
        }
      })
    </script>
  </body>
</html>

Dans l'exemple de code ci-dessus, Vuex est utilisé pour une gestion simple de l'état du compteur. Deux mutations sont définies pour augmenter et diminuer la valeur du compteur, et sont utilisées dans le. Instance Vue. L'objet $store implémente la liaison des données d'état et déclenche des mutations.

3. Résumé

Grâce à l'introduction de cet article, nous avons appris à utiliser Vue pour créer des applications frontales hautement disponibles. Dans les projets réels, un développement et une optimisation plus détaillés doivent être effectués en fonction des besoins spécifiques de l'entreprise. Dans le même temps, la collaboration avec les développeurs back-end est également cruciale. Une division raisonnable du travail et une coopération collaborative peuvent améliorer dans une certaine mesure l'efficacité du développement des projets.

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!

JavaScript css html npm 前端框架 const JS 对象 promise 样式表 vuex router axios

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Conseils de développement Vue : améliorez la maintenabilité et la lisibilité du codeArticle suivant：Conseils de développement Vue : améliorez la maintenabilité et la lisibilité du code

Articles Liés

Voir plus