Vue 프로젝트의 보기와 구성 요소 폴더 간의 차이점은?

Vue 프로젝트의 보기와 구성 요소 폴더 간의 차이점은?

그냥 명령줄을 사용했을 뿐인데 (웃음)CLIVue.js 프로젝트를 초기화하기 위해.그CLIa를 만들었다.src/components그리고src/views폴더

부에프로젝트를 한 지 몇 달이 지났는데 폴더구조가 생소해 보인다.

두 사람의 차이점은 무엇인가.views그리고components로 생성된 Vue 프로젝트의 폴더

우선, 두 폴더 모두src/components그리고src/views에는 Vue 구성 요소가 포함되어 있다.

주요 차이점은 일부 Vue 구성 요소가 라우팅의 보기 역할을 한다는 것이다.

Vue에서 라우팅을 처리할 때, 대개 Vue 라우터와 함께, 루트는 구성 요소에 사용되는 현재 뷰를 전환하기 위해 정의된다.이 노선은 일반적으로 에 위치한다.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 생태계의 표준 툴링 기준선이 되는 것을 목표로 한다.다양한 빌드 툴과 합리적인 디폴트(default)가 함께 원활하게 작동하도록 해 구성과 함께 며칠을 다투는 대신 앱 쓰기에 집중할 수 있다.동시에 꺼낼 필요 없이 각 도구의 구성을 변경할 수 있는 유연성을 제공한다.

Vue CLI는 신속한 Vue.js 개발을 목표로 하며, 단순성을 유지하고 유연성을 제공한다.그것의 목표는 다양한 기술 수준을 가진 팀들이 새로운 프로젝트를 세우고 시작할 수 있도록 하는 것이다.

결국 편리함과 적용구조의 문제다.

• 일부 사용자는 자신의 보기 폴더 아래를 사용하기를 좋아한다.src/router이 기업용 보일러처럼 말이야
• 어떤 사람들은 그것을 보기 대신 페이지라고 부른다.
• 어떤 사람들은 그들의 모든 구성요소를 같은 폴더에 가지고 있다.

---

작업 중인 프로젝트에 가장 적합한 응용 프로그램 구조를 선택하십시오.

나는 그것이 관습에 가깝다고 생각한다.재사용 가능한 어떤 것은 src/구성요소 폴더에 보관될 수 있고 라우터에 연결된 어떤 것은 src/view에 보관될 수 있다.

일반적으로 재사용 가능한 뷰를 다음 위치에 배치할 것을 제안한다.src/components전화호부 정의 의 예헤더, 바닥글, 광고, 그리드 또는 스타일 텍스트 상자 또는 단추와 같은 사용자 정의 컨트롤의 예.보기 내에서 하나 이상의 구성요소에 접근할 수 있다.

뷰는 구성요소를 가질 수 있으며 뷰는 실제로 탐색 URL을 통해 액세스할 수 있다.일반적으로 에 배치된다.src/views.

URL을 통해 구성 요소에 액세스하도록 제한되지 않았음을 기억하십시오.구성 요소를 에 자유롭게 추가 가능router.js접근도 할 수 있어그러나 그렇게 할 생각이 있다면, 그것을 a로 옮길 수도 있다.src/views에 배치하기 보다는src/components.

컴포넌트는 asp.net 웹 양식과 유사하게 사용자별로 구분된다.

더 나은 유지 보수와 가독성을 위해 당신의 코드를 만드는 것에 불과하다.

두 폴더 모두 구성요소를 모두 보유하고 있기 때문에 기본적으로 동일하지만, 페이지로서 기능할 구성요소(네비게이션용으로 좋아하는 페이지로 라우트)를 보관하는 것이 Vue의 미학이다./views폴더, 양식 필드와 같은 재사용 가능한 구성 요소는/components폴더

src/views일반적으로 라우터를 통해 탐색하는 응용프로그램의 기본 페이지에 사용된다. src/components기본 페이지 내에서 사용하는 재사용 가능한 구성요소에 사용됨(동일한 페이지 내부 또는 다른 페이지에 걸친 사용 시간)

페이지 및 구성 요소와 같은 보기는 모든 페이지 또는 구성 요소에서 사용할 수 있는 재사용 가능한 코드 블록으로 간주할 수 있다(둘 다 Vue 파일이며 이 용어는 단지 데모용임).

정적 페이지와 덜 동적인 페이지들이 뷰에 다시 연결되고, 보다 재사용 가능하고 역동적인 콘텐츠들이 구성요소 아래에 배치된다.

단순, 뷰는 경로에 대한 것이고, 구성요소는 경로의 구성요소다.

다른 사람들이 언급했듯이, 이것은 매우 간단하다: 당신은 보통 사용자가 탐색하기를 원하는 실제 페이지에 대해 보기를 사용한다.구성요소는 프로젝트의 모든 페이지에서 재사용할 수 있는 페이지 내의 요소들이다.

두 폴더 모두 Vue 구성 요소를 포함하고 있으며, 'views' 폴더에는 다른 구성 요소를 가져올 루트 수준 구성 요소가 포함되어 있어야 한다.이른바 '기타 구성요소'는 '구성요소' 폴더 안에 위치한다.예를 들어 보자.

웹 사이트 yourname.com에 대한 루트 수준 페이지가 3개 있다고 가정해 보십시오.

• yourname.com
• yourname.com/about
• yourname.com/price

당신의 '보기' 폴더에는 3가지 구성요소가 있을 것이다.'에 대하여.vue', 'index.vue', 'price.vue'.이러한 파일은 라우터 파일로 가져오거나 앱에서 직접 가져올 수 있다.라우팅용 vue 파일.이러한 견해는 '가격 카드'와 같이 그 내부에 여러 가지 구성요소를 가질 수 있다.vue', '연락카드'부에' 등등.이 파일들은 일반적으로 '구성요소'라는 이름의 폴더 안에 위치한다.'views' 폴더에 있는 vue 파일 내에서 이러한 구성 요소를 가져온 다음 렌더링하십시오.

내가 보기에 구성요소 폴더는 보기에 사용될 구성요소를 포함해야 한다.그리고 보기에서는 라우터에 의해 접속되는 페이지들이 있어야 한다.예를 들어, 페이지에 사용할 탐색바, 머리글 및 바닥글이 있고 로그인 페이지, 등록 페이지 및 기본 페이지가 있다.그런 다음 src/구성 요소에 헤더, 바닥글 및 탐색 표시줄을 포함해야 한다.그리고 당신의 src/view에는 로그인, 등록, 메인 파일과 같은 파일이 있어야 한다.

참조URL: https://stackoverflow.com/questions/50865828/what-is-the-difference-between-the-views-and-components-folders-in-a-vue-project