Übersetzung von Schema- und Dateiverteilungsproblemen in VueJS-Projekten

Question

Ich habe angefangen, VueJS zu lernen, und mir ist das Typische aufgefallen .vue文件由三个不同的部分组成，分别是<template>、<script>和<style>.

Meine Frage ist, wie man diese drei Teile in einem echten professionellen Projekt mit VueJs handhabt. Nach meinem Verständnis sollten sie in drei verschiedene Teile unterteilt werden.

Zum Beispiel würde ich dazu neigen, sie in die folgenden Ordner aufzuteilen:

Unter dem Ordner src werde ich die folgenden Unterordner erstellen:

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

Wird dies in echten mittelgroßen bis großen VueJS-Projekten gehandhabt? Wenn nicht, warum? Was sind die Vor- und Nachteile dieses Ansatzes?

Vielen Dank im Voraus für Ihre Antworten!

Mit freundlichen Grüßen

Paul

Answer 1

好的提示，关于阅读文档。我没有找到它。根据https://vuejs.org/guide/scaling-up/sfc.html#what-about-separation-of-concerns：

一些来自传统网页开发背景的用户可能担心，SFC在同一个地方混合了不同的关注点 - 这是HTML/CSS/JS本应该分离的！

为了回答这个问题，我们需要达成一致的观点，关注点的分离并不等同于文件类型的分离。工程原则的最终目标是提高代码库的可维护性。将关注点的分离死板地应用为文件类型的分离，并不能帮助我们在日益复杂的前端应用环境中实现这个目标。

在现代UI开发中，我们发现，将代码库划分为三个相互交织的巨大层级，与其相比，将其划分为松耦合的组件并进行组合更加合理。在一个组件内部，其模板、逻辑和样式是内在耦合的，而将它们放在一起实际上使得组件更加内聚和可维护。

即使你不喜欢单文件组件的想法，你仍然可以通过将JavaScript和CSS分开使用Src Imports将其热重载和预编译功能应用到你的项目中。