В чем разница между папками видов и компонентов в проекте Vue? - программирование
Подтвердить что ты не робот

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

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

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

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

4b9b3361

Ответ 1

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

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

При работе с маршрутизацией в Vue, обычно с Vue Router, маршруты определяются для переключения текущего представления, используемого в компоненте <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, он упрощает работу и обеспечивает гибкость. Его цель - дать возможность командам разного уровня квалификации создать новый проект и начать работу.

В конце концов, это вопрос удобства и структуры приложения.

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

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


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

Ответ 2

Я думаю, что это скорее конвенция. Что-то, что можно использовать повторно, может быть сохранено в папке src/components, что-то, что связано с маршрутизатором, может быть сохранено в src/views.

Ответ 3

Обычно многократно используемые представления рекомендуется размещать в каталоге src/components. Такие примеры, как "Верхний колонтитул", "Нижний колонтитул", "Реклама", "Сетки" или любые другие пользовательские элементы управления, такие как текстовые поля или кнопки. Один или несколько компонентов могут быть доступны внутри представления.

Представление может иметь компонент (ы), и представление фактически предназначено для доступа по URL-адресу навигации. Они обычно помещаются в src/views.

Помните, что вы не ограничены в доступе к Компонентам через URL. Вы можете добавить любой компонент к router.js и получить к нему доступ. Но если вы намерены это сделать, вы можете переместить его в src/views, а не помещать в src/components.

Компоненты являются пользовательскими элементами управления по аналогии с веб-формами asp.net.

Это просто структурирование вашего кода для лучшего обслуживания и удобочитаемости.