Vue 프로젝트에서보기와 구성 요소 폴더의 차이점은 무엇입니까?
방금 명령 줄 ( CLI
)을 사용하여 Vue.js 프로젝트를 초기화했습니다. 는 CLI
생성 된 src/components
및 src/views
폴더를.
Vue 프로젝트로 작업 한 지 몇 달이 지났고 폴더 구조가 새로운 것 같습니다.
로 생성 된 Vue 프로젝트에서 views
와 components
폴더 의 차이점은 무엇입니까 vue-cli
?
우선, 두 폴더 src/components
및 src/views
에는 Vue 구성 요소가 포함되어 있습니다.
주요 차이점은 일부 Vue 구성 요소 가 라우팅을위한 뷰 역할을한다는 것 입니다.
일반적으로 Vue Router를 사용 하여 Vue 에서 라우팅을 처리 할 때 구성 요소 에서 사용되는 현재 보기 를 전환하기 위해 경로가 정의됩니다 <router-view>
. 이러한 경로는 일반적으로에 있으며 src/router/routes.js
다음과 같은 내용을 볼 수 있습니다.
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
export default [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/about',
name: 'about',
component: About,
},
]
아래 src/components
에있는 구성 요소는 경로에서 사용되지 않는 반면 아래에있는 구성 요소 src/views
는 하나 이상의 경로에서 사용됩니다.
Vue CLI는 Vue 에코 시스템의 표준 도구 기준이되는 것을 목표로합니다. 다양한 빌드 도구가 합리적인 기본값과 함께 원활하게 작동하도록 보장하므로 구성을 다루는 데 며칠을 소비하는 대신 앱 작성에 집중할 수 있습니다. 동시에 꺼내지 않고도 각 도구의 구성을 조정할 수있는 유연성을 제공합니다.
Vue CLI는 신속한 Vue.js 개발을 목표로하며 단순하게 유지하고 유연성을 제공합니다. 목표는 다양한 기술 수준의 팀이 새 프로젝트를 설정하고 시작할 수 있도록하는 것입니다.
결국에는 편의성과 애플리케이션 구조의 문제입니다 .
- 어떤 사람들은 이 엔터프라이즈 상용구
src/router
와 같은 아래에 뷰 폴더를 갖고 싶어 합니다 . - 어떤 사람들 은 뷰 대신 페이지 라고 부릅니다 .
- 어떤 사람들은 같은 폴더에 모든 구성 요소를 가지고 있습니다.
작업중인 프로젝트에 가장 적합한 애플리케이션 구조를 선택하십시오.
보너스 : Dan Abramov 는 React 및 Vue 프로젝트 에이 파일 구조를 권장 합니다 .
나는 그것이 더 많은 컨벤션이라고 생각합니다. 재사용 가능한 것은 src / components 폴더에 보관할 수 있습니다. 라우터에 연결된 것은 src / views에 보관할 수 있습니다.
일반적으로 재사용 가능한 뷰는 src/components
디렉토리에 배치하는 것이 좋습니다 . 머리글, 바닥 글, 광고, 그리드 또는 모든 사용자 지정 컨트롤과 같은 예는 스타일이 지정된 텍스트 상자 나 버튼입니다. 뷰 내에서 하나 이상의 구성 요소에 액세스 할 수 있습니다.
보기에는 구성 요소가있을 수 있으며보기는 실제로 탐색 URL을 통해 액세스하도록되어 있습니다. 일반적으로 src/views
.
URL을 통해 구성 요소에 액세스 할 수 없습니다. 구성 요소를에 자유롭게 추가 router.js
하고 액세스 할 수도 있습니다. 그러나 그렇게하려는 src/views
경우 .NET에 배치하지 않고 로 이동할 수 있습니다 src/components
.
구성 요소는 asp.net 웹 양식과 유사한 사용자 컨트롤입니다.
더 나은 유지 관리와 가독성을 위해 코드를 구조화하는 것입니다.
'Development Tip' 카테고리의 다른 글
코드에서 topLayoutGuide 및 bottomLayoutGuide에 대한 자동 레이아웃 제약 조건 만들기 (0) | 2020.11.21 |
---|---|
SQL에서 날짜를 비교하는 쿼리 (0) | 2020.11.21 |
모두 없음보다 큰가요? (0) | 2020.11.21 |
자바 스크립트 : indexOf 대 일치 문자열 검색? (0) | 2020.11.21 |
사용 가능한 모든 matplotlib 백엔드 목록 (0) | 2020.11.21 |