Créez votre première application avec Vue.js

Si vous n'avez jamais créé d'application Vue.js, je vais vous guider dans la tâche de création d'une application et de comprendre son fonctionnement. L'application que nous allons créer est déjà terminée, et c'est l'application par défaut de Vue CLI


Si vous n'avez jamais créé d'application Vue.js, je vais vous guider dans la tâche de création d'une application et de comprendre son fonctionnement.

Premier exemple

Je vais d'abord utiliser l'exemple le plus basique d'utilisation de Vue.

Vous créez un fichier HTML qui contient

<html>
  <body>
    <div id="example">
      <p>{{ hello }}</p>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
        new Vue({
            el: '#example',
            data: { hello: 'Hello World!' }
        })
    </script>
  </body>
</html>

et vous l'ouvrez dans le navigateur. C'est votre première application Vue! La page doit afficher un "Hello World!" un message.

J'ai mis les balises de script à la fin du corps pour qu'elles soient exécutées dans l'ordre après le chargement du DOM.

Ce que fait ce code, c'est que nous instancions une nouvelle application Vue, liée au#exampleélément comme modèle (il est généralement défini à l'aide d'un sélecteur CSS, mais vous pouvez également passer un HTMLElement).

Ensuite, il associe ce modèle audataobjet. C'est un objet spécial qui héberge les données que nous voulons que Vue rende.

Dans le modèle, le spécial{{ }}La balise indique qu'une partie du modèle est dynamique et que son contenu doit être recherché dans les données de l'application Vue.

Voir sur Codepen

Vous pouvez voir cet exemple sur Codepen:https://codepen.io/flaviocopes/pen/YLoLOp

Codepen

Codepen est un peu différent de l'utilisation d'un fichier HTML simple, et vous devez le configurer pour qu'il pointe vers l'emplacement de la bibliothèque Vue dans les paramètres du stylet:

Pen settings

Deuxième exemple: l'application par défaut de Vue CLI

Améliorons un peu le jeu. La prochaine application que nous allons créer est déjà terminée, et c'estl'application par défaut de Vue CLI.

Qu'est-ce que la CLI Vue? C'est un utilitaire de ligne de commande qui permet d'accélérer le développement en développant pour vous un squelette d'application, avec un exemple d'application en place.

Vous pouvez obtenir cette application de deux manières.

Utilisez la CLI Vue localement

La première consiste à installer leVue CLIsur votre ordinateur et exécutez la commande

vue create <enter the app name>

Utilisez CodeSandbox

Un moyen plus simple, sans avoir à installer quoi que ce soit, est d'aller àhttps://codesandbox.io/s/vue.

CodeSandbox est un éditeur de code sympa qui vous permet de créer des applications dans le cloud, ce qui vous permet d'utiliser n'importe quel package npm et de s'intégrer facilement à Zeit Now pour un déploiement facile et à GitHub pour gérer le versionnage.

Ce lien que j'ai mis ci-dessus ouvre l'application par défaut de Vue CLI.

Que vous choisissiez d'utiliser la CLI Vue localement ou via CodeSandbox, inspectons cette application Vue en détail.

La structure des fichiers

À côté depackage.json, qui contient la configuration, ce sont les fichiers contenus dans la structure initiale du projet:

  • index.html
  • src/App.vue
  • src/main.js
  • src/assets/logo.png
  • src/components/HelloWorld.vue

index.html

Leindex.htmlfile est le fichier principal de l'application.

Dans le corps, il comprend un seul élément simple:<div id="app"></div>. C'est l'élément que l'application Vue utilisera pour s'attacher au DOM.

<!DOCTYPE html>
<html>

<head> <meta charset=“utf-8”> <meta name=“viewport” content=“width=device-width,initial-scale=1.0”> <title>CodeSandbox Vue</title> </head>

<body> <div id=“app”></div> <!-- built files will be auto injected --> </body>

</html>

src/main.js

Ce sont les principaux fichiers JavaScript qui pilotent notre application.

Nous importons d'abord la bibliothèque Vue et le composant App à partir deApp.vue.

Nous définissons productionTip sur false, juste pour éviter que Vue ne génère un "vous êtes en mode développement”Pointe dans la console.

Ensuite, nous créons l'instance Vue, en l'attribuant à l'élément DOM identifié par#app, que nous avons défini dansindex.html, et nous lui disons d'utiliser le composant App.

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

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

src/App.vue

App.vueest un composant de fichier unique. Il contient 3 morceaux de code: HTML, CSS et JavaScript.

Cela peut sembler étrange au début, mais les composants à fichier unique sont un excellent moyen de créer des composants autonomes qui ont tout ce dont ils ont besoin dans un seul fichier.

Nous avons le balisage, le JavaScript qui va interagir avec lui et le style qui lui est appliqué, qui peut être défini ou non. Dans ce cas, il n'est pas défini, et il ne fait que générer ce CSS qui est appliqué comme un CSS normal à la page.

La partie intéressante réside dans lescriptétiqueter.

Nous importons uncomposantducomponents/HelloWorld.vuefichier, que nous décrirons plus tard.

Ce composant va être référencé dans notre composant. C'est une dépendance. Nous allons sortir ce code:

<div id="app">
  <img width="25%" src="./assets/logo.png">
  <HelloWorld/>
</div>

à partir de ce composant, que vous voyez fait référence au composant HelloWorld. Vue insérera automatiquement ce composant dans cet espace réservé.

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script> import HelloWorld from ‘./components/HelloWorld’

export default { name: ‘App’, components: { HelloWorld } } </script>

<style> #app { font-family: ‘Avenir’, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

src/components/HelloWorld.vue

Voici le composant HelloWorld, qui est inclus par le composant App.

Ce composant génère un ensemble de liens, ainsi qu'un message.

Rappelez-vous ci-dessus, nous avons parlé de CSS dans App.vue, qui n'était pas limité? Le composant HelloWorld a une portée CSS.

Vous pouvez facilement le déterminer en regardant lestyleétiqueter. S'il a lescopedattribut, alors il est défini:<style scoped>

Cela signifie que le CSS généré ciblera le composant de manière unique, via une classe appliquée par Vue de manière transparente. Vous n'avez pas à vous en soucier et vous savez que le CSS ne le fera pasfuirvers d'autres parties de la page.

Le message émis par le composant est stocké dans ledatapropriété de l'instance Vue, et sortie dans le modèle{{ msg }}.

Tout ce qui est stocké dansdataest accessible directement dans le modèle via son propre nom. Nous n'avons pas besoin de diredata.msg, seulementmsg.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script> export default { name: ‘HelloWorld’, data() { return { msg: ‘Welcome to Your Vue.js App’ } } } </script>

<!-- Add “scoped” attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>

Lancez l'appli

CodeSandbox a une fonctionnalité de prévisualisation intéressante. Vous pouvez exécuter l'application et modifier tout ce qui se trouve dans la source pour qu'il soit immédiatement reflété dans l'aperçu.

The Vue App

Téléchargez mon gratuitManuel de Vue


Plus de tutoriels vue: