Comment développer des applications Vue.js sans Vue CLI

Ces dernières années, Vue.js, en tant que bibliothèque JavaScript très populaire, a été largement utilisée pour développer des applications monopage (SPA). Les avantages de Vue.js sont son API simple, sa facilité d'utilisation et ses options flexibles. Cependant, pour construire un SPA à l'aide de Vue.js, Vue CLI semble être devenu un choix indispensable. Mais en fait, nous n’avons pas forcément besoin d’utiliser Vue CLI pour le développement. Dans cet article, je vais vous présenter comment développer des applications Vue.js sans Vue CLI.

1. Prérequis

Avant de créer une application avec Vue.js, vous devez être capable de maîtriser les éléments suivants :

1. Bases de HTML, CSS, JavaScript.
2. Bases de Vue.js.

2. Commencez à développer

1. Référence Vue.js

Dans votre application, vous pouvez utiliser CDN pour référencer Vue.js, ou vous pouvez télécharger Vue.js puis le référencer en HTML :

<script src="https://unpkg.com/vue"></script>

2. Créer une instance Vue

Pour utiliser Vue.js, vous devez d'abord créer une instance Vue. Dans cet exemple, nous allons créer une application de démonstration « hello-world ».

<div id="app">
  {{ message }}
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Hello, World!'
    }
  })
</script>

(1)el

L'option "el" est obligatoire et est utilisée pour spécifier l'élément HTML que l'instance Vue montera.

(2)data

L'option "data" est facultative et est utilisée pour spécifier les données initiales de l'instance Vue.

3. Propriétés calculées

Dans Vue.js, les propriétés calculées sont une solution de code permettant de déclarer des propriétés dont les résultats sont calculés sur la base d'autres données. L’avantage des propriétés calculées est qu’elles se mettent automatiquement à jour lorsque les données dont elles dépendent changent. Vous trouverez ci-dessous un exemple utilisant des propriétés calculées.

<div id="app">
  <p>{{ fullName }}</p>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      firstName: 'John',
      lastName: 'Doe'
    },
    computed: {
      fullName: function () {
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>

4. Écouteurs

Dans Vue.js, vous pouvez utiliser des observateurs pour surveiller une propriété spécifique et effectuer certaines tâches lorsque sa valeur change. Vous trouverez ci-dessous un exemple d'utilisation d'un écouteur.

<div id="app">
  <p>{{ count }}</p>
  <button @click="increment()">Increment</button>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      count: 0
    },
    methods: {
      increment: function () {
        this.count++
      }
    },
    watch: {
      count: function (value) {
        console.log(value)
      }
    }
  })
</script>

Dans cet exemple, nous créons un compteur et lorsque sa valeur change, nous l'imprimons sur la console via un observateur.

5. Composants

Les composants sont l'un des concepts les plus importants de Vue.js. Ils permettent aux utilisateurs de diviser les pages en parties réutilisables plus petites et de faciliter l'organisation et la maintenance du code. Dans Vue.js, les composants sont créés via la méthode Vue.extend().

<div id="app">
  <todo-item></todo-item>
</div>

<script>
  var todoItem = Vue.extend({
    template: '<p>Learn Vue.js</p>'
  })

  new Vue({
    el: '#app',
    components: {
      'todo-item': todoItem
    }
  })
</script>

Dans cet exemple, nous créons un composant appelé "todo-item", puis l'enregistrons dans l'instance Vue et l'utilisons dans le modèle.

3. Résumé

Dans cet article, nous avons présenté comment utiliser Vue.js pour créer un SPA sans utiliser Vue CLI. Afin d'atteindre cet objectif, nous devons disposer des connaissances suivantes : HTML, CSS, bases de JavaScript et bases de Vue.js. Ensuite, nous avons créé une application « hello-world », l'avons développée à l'aide de propriétés calculées, d'écouteurs et avons utilisé des composants pour diviser l'application en parties réutilisables plus petites. Bien que Vue CLI soit un outil très pratique, Vue.js lui-même est flexible et facile à utiliser. Nous n'avons pas besoin d'utiliser Vue CLI pour développer SPA.

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!