Le framework front-end Vue.js est devenu le premier choix de nombreux développeurs. Dans les projets Vue.js, il est très important d'utiliser un bon échafaudage, qui non seulement permet de gagner du temps de développement, mais améliore également la maintenabilité et l'évolutivité du code. Cependant, lors de l'utilisation de l'échafaudage Vue.js, une question courante est la suivante : où placer les fichiers JS ?
La première chose que vous devez comprendre est la suivante : dans le projet Vue.js, il existe deux principaux types de fichiers JavaScript : les composants Vue (fichiers .vue) et les fichiers JavaScript indépendants (fichiers .js).
Le composant Vue est une unité autonome qui contient du code HTML, CSS et JavaScript. L'échafaudage Vue.js gère les composants sous la forme de fichiers .vue, composés de modèles, de scripts et de styles pour les composants Vue. Ce fichier se trouve généralement dans le dossier src/components. Chaque dossier de composant Vue doit contenir :
[name].vue
où [nom] peut être remplacé par le nom du composant. Par exemple, Header.vue, Footer.vue, etc. Chaque fichier .vue doit contenir le contenu suivant :
<template> <!-- HTML代码 --> </template> <script> export default{ // JavaScript代码 }; </script> <style> /* CSS代码 */ </style>
Dans les composants Vue, la manipulation du DOM doit être évitée autant que possible et tout le code JavaScript doit être limité à la portée du composant actuel.
Le composant Vue définit le contenu HTML via la balise , la balise