Angular와 같이 Vue.js 컴포넌트를 작성하면서 HTML, JS 및 CSS 파일을 분리하여 유지할 수 있습니까?

Angular와 같이 Vue.js 컴포넌트를 작성하면서 HTML, JS 및 CSS 파일을 분리하여 유지할 수 있습니까?

Vue.js는 HTML, JS의 CSS를 사용하고 있습니까?
'Vue.js가 템플릿을 지원하지 않는 이유'에 대해 설명했습니다.URL" 기사를 참조하십시오.기사 자체에는 이렇게 되어 있다.

"대규모로 유지보수가 가능한 것을 구축하려면 적절한 모듈화가 필요합니다.

그 를 더하고 있습니다.저는 Angular 배경에서 왔고 HTML, JS, CSS를 분리하는 것이 개발 중에 매우 도움이 된다고 생각합니다.그러나 위 기사의 저자는 다른 의견을 가지고 있다. 이 및 할 수 .HTML, JS, CSS, CSS.
모듈식과는 별도로, 분리를 실시하면, 이러한 자산을 다른 장소에서도 재사용할 수 있습니다.이 모든 것이 기존의 의견과 함께 사라진다.

그는 또한 말한다.

이제 게임을 좀 더 발전시켜 Webpack이나 Browserify와 같은 적절한 모듈 번들을 사용할 때가 된 것 같습니다.그들과 한 번도 상대해 본 적이 없다면 힘들 것 같지만, 내 말을 믿어. 한번 도약해 볼 가치가 있어.

하지만 그것은 무슨 의미인가요?Webpack이나 Browserify와 같은 모듈번들을 사용하면 이것이 가능합니까?만약 그렇다면, 어떻게?

이 모든 것을 말했지만, 이것을 성취할 수 있는 방법이 있나요?

의사들 중에서 이걸 찾았는데 당신이 찾고 있는 게 맞는지 모르겠어요

<!-- my-component.vue -->
<template>
<div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

그리고 의사 코멘트

싱글 파일 컴포넌트의 아이디어가 마음에 들지 않는 경우에도 JavaScript와 CSS를 다른 파일로 분리하여 핫 새로고침 및 사전 컴파일 기능을 활용할 수 있습니다.

IMHO는 새로운 프레임워크에 접근할 때 일반적으로 다른 프레임워크의 관례를 남겨둘 필요가 있습니다.예를 들어, Angular 스타일의 구두 주걱을 Vue 프로젝트에 삽입하려고 하면 더 큰 문제가 발생하여 새로운 프레임워크의 이점을 제한할 수 있습니다.이것은 React, Aurelia, Ember 등에 대해서도 동일합니다.그들은 모두 그들만의 방식으로 일을 하고 여러 가지 이유로 그들의 관습을 따르는 것이 최선이다.

질문에 답하려면:예를 들어, 제가 동의한 파일을 분할할 방법을 찾지 못했습니다.

- myfile.html.vue
- myfile.css.vue
- myfile.js.vue

최근 Vue를 조사한 결과 관련 요소를 단일 *.vue 파일로 결합하면 캡슐화의 이점을 얻을 수 있습니다.단, 캡슐화가 양호한 경우의 트레이드오프는 보통 반복입니다.자신에게 가장 적합한 패턴을 결정해야 합니다. 반복하지 마십시오. 아니면 단일 책임입니까?

또한 간단한 예시로 임베디드 Vue 스크립트와 인라인 코드를 사용할 수 있지만 *.vue 파일로 이동한 후에는 모듈 번들을 고려해야 했습니다.이것이 명백해지자 vue의 단순성(외관상 주요 판매 기능)은 약간 상실되었습니다.

내 생각에는 컴포넌트가 매우 길어질 수 있고 HTML, CSS, JS를 네비게이션용으로 분할하는 것이 유리하다고 생각합니다.회의론자들은 이것이 여러분의 구성 요소를 더 작은 조각으로 쪼개야 한다는 신호라고 지적할 수도 있고, 어쩌면 그것이 사실일 수도 있지만, 무엇이든.

이렇게 하면 됩니다.

Vue는 "믹신"을 지원합니다.이를 통해 거의 모든 JS를 믹스인 파일로 이동할 수 있으며 컴포넌트로 상속됩니다.이 시점에서 컴포넌트 파일에 남아 있는 실제 JS 코드는 매우 미미합니다(믹스인을 정의하는 ~4줄).

다음으로 CSS를 @import를 사용하여 풀인하는 외부 파일로 이동할 수 있습니다.하지만 "scope"를 사용할 수 없게 될 수도 있다고 생각합니다.

이 시점에서 컴포넌트 파일에는 99%의 HTML만 포함되어 있습니다.

솔직히 말해서, 단일 파일 컴포넌트를 원하는 사람들은 실제로 LOB(Line of Business) 애플리케이션의 프런트엔드를 작성한 적이 없다고 생각합니다.화면에 20-30줄로 표시되는 폼이 있어 100개 정도의 커스텀 컴포넌트로 구성된 HTML 템플릿이 생성됩니다.

이러한 컴포넌트에서는 앞뒤로 스크롤하는 것은 지옥입니다.또한 형태를 하위 구성요소로 잘라내는 합리적인 방법도 잘 모르겠습니다.

내 워크플로우는 javascript와 관련 뷰 템플릿을 한 쪽 모니터에 나란히 배치하고 브라우저 개발 패널을 다른 쪽 모니터에 배치하는 것입니다.그것은 잘 될 것 같다.나는 어떤 사람들의 고집을 이해할 수 없다.현재 구식 CanJS 구현에 대한 대안으로 Vue.js를 조사하고 있지만 이것이 주요 억제책입니다.

언급URL : https://stackoverflow.com/questions/48185655/can-we-keep-html-js-and-css-files-separate-while-creating-vue-js-components-lik