Vue.js 프로젝트를 구조화하는 방법

스마트하고 멍청한 구성 요소를 갖춘 완벽한 Vue.js 폴더 구조 및 구성 요소 아키텍처

Vue.js는 단순한 광고 그 이상이며 훌륭한 프론트 엔드 프레임 워크입니다. 시작하고 웹앱을 만드는 것은 매우 쉽습니다. Vue.js는 종종 작은 앱을위한 프레임 워크로, 때로는 작은 크기 때문에 jQuery의 대안으로 묘사되기도합니다! 개인적으로 더 큰 프로젝트에도 적합 할 수 있다고 생각합니다.이 경우 구성 요소 아키텍처 측면에서 잘 구성하는 것이 중요합니다.

첫 번째 큰 Vue.js 프로젝트를 시작하기 전에 완벽한 폴더 구조, 구성 요소 아키텍처 및 명명 규칙을 찾기 위해 몇 가지 조사를 수행했습니다. Vue.js 문서, 몇 가지 기사 및 많은 GitHub 오픈 소스 프로젝트를 살펴 보았습니다.

내가 가진 몇 가지 질문에 대한 답을 찾아야했습니다. 이것이이 게시물에서 찾을 수있는 내용입니다.

  • Vue.js 프로젝트 내에서 파일과 폴더를 어떻게 구성합니까?
  • Smart 및 Dumb 구성 요소를 어떻게 작성하고 어디에 배치합니까? React에서 나오는 개념입니다.
  • Vue.js 코딩 스타일과 모범 사례는 무엇입니까?

또한 내가 영감을 얻은 출처와 더 나은 이해를 위해 다른 링크를 문서화 할 것입니다.

Vue.js 폴더 구조

다음은 src 폴더의 내용입니다. Vue CLI를 사용하여 프로젝트를 시작하는 것이 좋습니다. 개인적으로 기본 웹팩 템플릿을 사용했습니다.

.
├── app.css
├── App.vue
├── 자산
│ └── ...
├── 컴포넌트
│ └── ...
├── main.js
├── 믹스 인
│ └── ...
├── 라우터
│ └── index.js
├── 점포
│ ├── index.js
│ ├── 모듈
│ │ └── ...
│ └── mutation-types.js
├── 번역
│ └── index.js
├── 유틸리티
│ └── ...
└── 레이아웃
    └── ...

이러한 각 폴더에 대한 몇 가지 세부 사항 :

  • 자산 — 구성 요소로 가져온 자산을 넣는 위치
  • 구성 요소 — 기본보기가 아닌 프로젝트의 모든 구성 요소
  • mixins — 믹스 인은 다른 구성 요소에서 재사용되는 자바 스크립트 코드의 일부입니다. 믹스 인에서는 Vue.js의 구성 요소 메소드를 사용하는 구성 요소의 메소드와 병합 할 수 있습니다.
  • 라우터-프로젝트의 모든 경로 (내 경우에는 index.js에 있음). 기본적으로 Vue.js에서는 모든 것이 구성 요소입니다. 그러나 모든 것이 페이지는 아닙니다. 페이지에는“/ dashboard”,“/ settings”또는“/ search”와 같은 경로가 있습니다. 구성 요소에 경로가 있으면 라우팅됩니다.
  • store (선택 사항) — mutation-type.js의 Vuex 상수, 하위 폴더 모듈의 Vuex 모듈 (index.js에로드 됨).
  • 번역 (선택 사항) — 로케일 파일이며 Vue-i18n을 사용하며 꽤 잘 작동합니다.
  • utils (선택 사항) — 정규식 값 테스트, 상수 또는 필터와 같은 일부 구성 요소에서 사용하는 함수입니다.
  • views — 프로젝트를 더 빨리 읽을 수 있도록 라우팅 된 구성 요소를 분리하여이 폴더에 넣습니다. 나를 위해 라우팅 된 구성 요소는 페이지를 나타 내기 때문에 구성 요소 이상이며 경로가 있으므로 페이지를 확인하면이 폴더로 이동합니다.

필요에 따라 필터 또는 상수 API와 같은 다른 폴더를 추가 할 수 있습니다.

내가 영감을 얻은 일부 리소스

  • https://vuex.vuejs.org/en/structure.html
  • https://github.com/vuejs/vue-hackernews-2.0/tree/master/src
  • https://github.com/mchandleraz/realworld-vue/tree/master/src

Vue.js를 사용한 스마트 및 벙어리 구성 요소

똑똑하고 멍청한 구성 요소는 React에서 배운 개념입니다. 스마트 구성 요소는 컨테이너라고도하며 상태 변경을 처리하는 구성 요소이며 작동 방식을 책임집니다. 반대로, 프레젠테이션이라고도하는 바보 같은 구성 요소는 모양과 느낌 만 처리합니다.

MVC 패턴에 익숙하면 덤프 구성 요소를 View와 스마트 구성 요소 및 Controller와 비교할 수 있습니다!

React에서 smart 및 dumb 구성 요소는 일반적으로 다른 폴더에 저장되는 반면 Vue.js에서는 구성 요소라는 동일한 폴더에 모두 저장합니다. Vue.js를 차별화하기 위해 명명 규칙을 사용합니다. 바보 카드 구성 요소가 있다고 가정하면 다음 이름 중 하나를 사용해야합니다.

  • 베이스 카드
  • 앱 카드
  • VCard

BaseCard를 사용하고 몇 가지 방법을 추가하는 스마트 구성 요소가있는 경우 프로젝트에 따라 예를 들어 이름을 지정할 수 있습니다.

  • 프로필 카드
  • 아이템 카드
  • 뉴스 카드

스마트 컴포넌트가 메소드가있는 "스마트 한"베이스 카드가 아니라면베이스 (또는 App 또는 V)로 시작하지 않고 컴포넌트에 맞는 이름 만 사용하십시오.

  • 대시 보드 통계
  • 검색 결과
  • 유저 프로필

이 명명 규칙은 Vue.js 공식 스타일 가이드에서 제공되며 명명 규칙도 포함되어 있습니다!

명명 규칙

다음은 Vue.js 공식 스타일 가이드에서 프로젝트를 잘 구성하는 데 필요한 몇 가지 규칙입니다.

  • 루트“App”구성 요소를 제외하고 구성 요소 이름은 항상 여러 단어 여야합니다. 예를 들어 "Card"대신 "UserCard"또는 "ProfileCard"를 사용하십시오.
  • 각 구성 요소는 자체 파일에 있어야합니다.
  • 단일 파일 구성 요소의 파일 이름은 항상 PascalCase이거나 항상 케밥 케이스 여야합니다. "UserCard.vue"또는 "user-card.vue"를 사용하십시오.
  • 페이지 당 한 번만 사용되는 구성 요소는 접두사“The”로 시작하여 하나만있을 수 있음을 나타냅니다. 예를 들어 탐색 모음 또는 바닥 글의 경우“TheNavbar.vue”또는“TheFooter.vue”를 사용해야합니다.
  • 자식 구성 요소는 부모 이름을 접두사로 포함해야합니다. 예를 들어“UserCard”에 사용 된“Photo”구성 요소를 원한다면 이름을“UserCardPhoto”로 지정하십시오. 폴더의 파일은 일반적으로 알파벳 순서로 정렬되므로 가독성이 향상됩니다.
  • 항상 구성 요소 이름에 약어 대신 이름을 사용하십시오. 예를 들어 "UDSettings"를 사용하지 말고 "UserDashboardSettings"를 대신 사용하십시오.

Vue.js 공식 스타일 가이드

Vue.js의 초보자이든 초보자이든이 Vue.js 스타일 가이드를 읽어야합니다. 여기에는 많은 팁과 명명 규칙이 포함되어 있습니다. 여기에는해야 할 것과하지 말아야 할 것들이 많이 있습니다.

이 게시물이 마음에 들면 아래의 박수 버튼을 몇 번 클릭하여 지원을 표시하십시오! 또한 의견을 말하고 의견을 보내십시오. 나를 따라 오는 것을 잊지 마세요!

이와 같은 기사를 더보고 싶습니까? Patreon 에서 나를 지원하십시오