Un fichier .vue est une sorte de fichier HTML ayant à sa racine obligatoirement les trois balises suivantes: <template>, <script> et <style>, dans lesquels vous pouvez mettre les differentes partie de votre composant.
Pas grand chose a dire a propos de l’element <template>, mais il existe des petites choses a noter sur les deux autres elements.
La balise <script> pour commencer, possede une structure particuliere qu’il vous faudra respecter.
<script> module.exports = { props: [], data: function () { }, computed: { }, methods: { } } </script>
Comme vous pouvez le remarquer, nous avons perdu le nom du composant, au profit de « module.exports ». Cela est dû au fait que le nom du composant lui sera donné dans la page où vous l’importez, et pas dans ce fichier. Pour le reste, c’est comme d’habitude.
Enfin, la partie <style> est semblable à ce que vous pourriez trouver n’importe ou a l’exception d’un point d’importance : l’attribut « scoped ». Si vous l’insérez dans votre balise (qui devient donc <style scoped></style>), tout le style que vous mettrez dedans ne s’appliquera qu’à votre composant et aux balises qu’il contient.
Vous pouvez donc coder en toute sérénité, sans « trop » vous préoccuper du nom des classes autour.
