VueJS 프로젝트의 스키마 번역 및 파일 배포 문제

Question

저는 VueJS를 배우기 시작했고 전형적인 .vue文件由三个不同的部分组成，分别是<template>、<script>和<style>을 깨달았습니다.

제 질문은 VueJs를 사용하는 실제 전문 프로젝트에서 이 세 부분을 어떻게 처리하는지에 관한 것입니다. 내 이해에 따르면 그것들은 세 가지 다른 부분으로 분리되어야 합니다.

예를 들어 저는 다음과 같은 폴더로 분리하는 경향이 있습니다:

src 폴더 아래에 다음 하위 폴더를 만듭니다.

으아악

실제 중대형 VueJS 프로젝트에서 처리되나요? 그렇지 않다면 왜 그렇습니까? 이 접근 방식의 장점과 단점은 무엇입니까?

답변해 주셔서 미리 감사드립니다!

안녕하세요,

폴

Answer 1

문서 읽기에 대한 좋은 팁입니다. 나는 그것을 찾지 못했습니다. https://vuejs.org/guide/scaling-up/sfc.html#what-about-separation-of-concerns에 따르면:

전통적인 웹 개발 배경을 가진 일부 사용자는 SFC가 HTML/CSS/JS와 분리되어야 하는 여러 가지 관심사를 같은 위치에 혼합하는 것을 걱정할 수 있습니다!

이 질문에 대답하려면 관심사 분리가 파일 형식 분리와 동일하지 않다는 합의에 도달해야 합니다. 엔지니어링 원칙의 궁극적인 목표는 코드 기반의 유지 관리 가능성을 향상시키는 것입니다. 파일 형식 분리에 관심사 분리를 엄격하게 적용하는 것은 점점 더 복잡해지는 프런트엔드 애플리케이션 환경에서 이 목표를 달성하는 데 도움이 되지 않습니다.

현대 UI 개발에서는 코드 베이스를 서로 얽힌 세 개의 거대한 레이어로 나누는 대신 느슨하게 결합된 구성 요소로 나누어 결합하는 것이 더 합리적이라는 것을 알게 되었습니다. 구성 요소 내에서 해당 템플릿, 논리 및 스타일은 본질적으로 결합되어 있으며 실제로 구성 요소를 더 응집력 있고 유지 관리하기 쉽게 만듭니다.

단일 파일 구성 요소 아이디어가 마음에 들지 않더라도 Src Imports를 사용하면 JavaScript와 CSS를 분리하여 핫 리로드 및 사전 컴파일 기능을 프로젝트에 적용할 수 있습니다.