Introduction à Vue CLI et aux composants personnalisés

  • 1 minute

Bien qu’il soit possible de créer une application Vue.js entière dans un seul fichier JavaScript, elle devient ingérable dans toutes les applications sauf les plus petites. Pour vous aider à décomposer votre application en unités plus petites, Vue vous permet de créer des composants. Les composants sont des modules réutilisables à partir desquels vous pouvez créer votre application.

Les composants peuvent être créés en tant que fichiers JavaScript ou via un composant monofichier avec une extension .vue. Les composants monofichiers utilisent une syntaxe spécialisée que les navigateurs ne peuvent pas lire. Cette syntaxe doit être convertie en un code JavaScript, HTML et CSS approprié. Le processus de conversion d’une syntaxe spécialisée en quelque chose de lisible par un navigateur est appelé bundling et nécessite des outils supplémentaires comme webpack.

Heureusement, Vue fournit également une interface de ligne de commande (CLI) que vous pouvez utiliser pour commencer une application. L’interface CLI configure tous les outils nécessaires, notamment un bundler et un serveur de développement.

Dans ce module, nous allons découvrir comment :

  • Utiliser Vue CLI pour créer une application.
  • Créer des composants monofichiers.
  • Utiliser des propriétés pour passer des valeurs aux composants.

Configuration requise :

  • Comprendre les bases de Vue.js
  • Connaître HTML et CSS
  • Connaître JavaScript
  • Connaître les directives de Vue.js
  • Visual Studio Code
  • Node.JS

Notes

Pour obtenir le code de la solution de ce module, vous pouvez cloner le dépôt en exécutant la commande suivante dans une fenêtre de commande ou de terminal :

git clone https://github.com/MicrosoftDocs/mslearn-vue-components
cd mslearn-vue-components/end
code .