Traduction des problèmes de distribution de schémas et de fichiers dans les projets VueJS

Question

J'ai commencé à apprendre VueJS et j'ai réalisé le typique .vue文件由三个不同的部分组成，分别是<template>、<script>和<style>.

Ma question porte sur comment gérer ces trois parties dans un vrai projet professionnel avec VueJs. D'après ma compréhension, ils devraient être séparés en trois parties différentes.

Par exemple, j'aurais tendance à les séparer dans les dossiers suivants :

Sous le dossier src, je vais créer les sous-dossiers suivants :

src
 ->script（JavaScript函数将在这里定义）
    index.js 
 ->style（样式内容将在这里定义）
    index.css
 ->pages（模板内容将在这里定义）
    index.vue

Est-ce géré dans de vrais projets VueJS de moyenne à grande échelle ? Si non, pourquoi ? Quels sont les avantages et les inconvénients de cette approche ?

Merci d'avance pour vos réponses !

Meilleures salutations,

Paul

Answer 1

Bon conseil, concernant la lecture de la documentation. Je ne l'ai pas trouvé. D'après https://vuejs.org/guide/scaling-up/sfc.html#what-about-separation-of-concerns :

Certains utilisateurs issus d'un milieu de développement Web traditionnel peuvent s'inquiéter du fait que SFC mélange différentes préoccupations au même endroit - dont HTML/CSS/JS devraient être séparés !

Pour répondre à cette question, nous devons parvenir à un consensus sur le fait que la séparation des préoccupations n'est pas la même chose que la séparation des types de fichiers. Le but ultime des principes d’ingénierie est d’améliorer la maintenabilité de votre base de code. Appliquer de manière rigide la séparation des préoccupations à la séparation des types de fichiers ne nous aide pas à atteindre cet objectif dans un environnement d'applications frontales de plus en plus complexe.

Dans le développement d'interface utilisateur moderne, nous constatons qu'au lieu de diviser la base de code en trois énormes couches entrelacées, il est plus logique de la diviser en composants faiblement couplés et de les combiner. Au sein d'un composant, ses modèles, sa logique et ses styles sont intrinsèquement couplés, et leur assemblage rend le composant plus cohérent et plus facile à maintenir.

Même si vous n'aimez pas l'idée des composants à fichier unique, vous pouvez toujours utiliser Src Imports pour appliquer ses fonctionnalités de rechargement à chaud et de pré-compilation à votre projet en séparant JavaScript et CSS.