В чем разница между папками представлений и компонентов в проекте Vue?

Я просто использовал командную строку (CLI) для инициализации Vue.проект js. The CLI создал src/components и .

прошло несколько месяцев с тех пор, как я работал с проектом Vue, и структура папок кажется мне новой.

в чем разница между views и components папки в проекте Vue, сгенерированном с помощью vue-cli?

1 ответов


прежде всего, обе папки,src/components и src/views, содержат компоненты Vue.

ключевое различие заключается в том, что некоторые компоненты Vue действуют как вид для маршрутизации.

при работе с маршрутизацией в Vue, обычно с Маршрутизатор 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 направляет быть стандартным базисом tooling для Vue экосистема. Он обеспечивает что различные инструменты строения работают ровно совместно с разумными значениями по умолчанию, чтобы вы могли сосредоточиться на написании приложения вместо целыми днями спорить с настойки. В то же время он по-прежнему предлагает гибкость для настройки конфигурации каждого инструмента без необходимость катапультирования.

Vue CLI стремится к быстрому Vue.развитие js, оно держит вещи просто и предлагает гибкость. Его цель-дать возможность командам разного уровня квалификации создать новый проект и начать работу.


в конце дня, это вопрос удобства и применение структура.

  • некоторые люди хотели бы иметь свою папку Views под src/router как этой корпоративный шаблон.
  • некоторые называют это страницы вместо вид.
  • некоторые люди имеют все свои компоненты в одной папке.

выбрать приложение структуру, которая лучше всего подходит для проекта на.


бонус: Дэн Абрамов рекомендует этой структура файлов для проектов React и Vue.