방금 명령 줄 ( 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와 같은 아래에 뷰 폴더를 갖고 싶어 합니다 .
• 어떤 사람들 은 뷰 대신 페이지 라고 부릅니다 .
• 어떤 사람들은 같은 폴더에 모든 구성 요소를 가지고 있습니다.

작업중인 프로젝트에 가장 적합한 애플리케이션 구조를 선택하십시오.

나는 그것이 더 많은 컨벤션이라고 생각합니다. 재사용 가능한 것은 src / components 폴더에 보관할 수 있습니다. 라우터에 연결된 것은 src / views에 보관할 수 있습니다.

일반적으로 재사용 가능한 뷰는 src/components디렉토리에 배치하는 것이 좋습니다 . 머리글, 바닥 글, 광고, 그리드 또는 스타일이 지정된 텍스트 상자 또는 버튼과 같은 사용자 지정 컨트롤과 같은 예. 뷰 내에서 하나 이상의 구성 요소에 액세스 할 수 있습니다.

보기에는 구성 요소가있을 수 있으며보기는 실제로 탐색 URL을 통해 액세스하도록되어 있습니다. 일반적으로 src/views.

URL을 통해 구성 요소에 액세스 할 수 없습니다. 에 구성 요소를 자유롭게 추가 router.js하고 액세스 할 수도 있습니다. 그러나 그렇게하려는 src/views경우 .NET에 배치하지 않고 로 이동할 수 있습니다 src/components.

구성 요소는 asp.net 웹 양식과 유사한 사용자 컨트롤입니다.

더 나은 유지 관리와 가독성을 위해 코드를 구조화하는 것입니다.

두 폴더는 모두 구성 요소를 포함하고 있기 때문에 기본적으로 동일하지만 Vue의 미학은 페이지로 작동 할 구성 요소 (탐색을 위해 같은 페이지로 라우팅 됨)는 /views폴더에 보관되고 양식 필드와 같은 재사용 가능한 구성 요소는 /components폴더에 보관된다는 것입니다. .