В чем разница между представлениями и папками компонентов в проекте Vue?
Я просто использовал командную строку (CLI) для инициализации проекта Vue.js. CLI создал src/components а также src/views папка.
Прошло несколько месяцев с тех пор, как я работал с проектом Vue, и структура папок кажется мне новой.
В чем разница между views а также components папки в проекте Vue, созданном с vue-cli?
15 ответов
Прежде всего, обе папки, 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.
Я думаю, это скорее условность. То, что можно использовать повторно, можно хранить в папке src/components, что-то, что связано с маршрутизатором, может храниться в src/views.
Обычно повторно используемые представления рекомендуется размещать в src/componentsкаталог. Примеры, такие как верхний колонтитул, нижний колонтитул, реклама, сетки или любые настраиваемые элементы управления, любят стилизованные текстовые поля или кнопки. Внутри представления можно получить доступ к одному или нескольким компонентам.
Представление может иметь компонент (ы), и представление фактически предназначено для доступа по URL-адресу навигации. Обычно они размещаются вsrc/views.
Помните, что вы не ограничены доступом к компонентам через URL-адрес. Вы можете добавить любой компонент вrouter.jsи получить к нему доступ тоже. Но если вы собираетесь это сделать, вы можете переместить его вsrc/views вместо того, чтобы помещать это в src/components.
Компоненты - это элементы управления пользователя по аналогии с веб-формами asp.net.
Речь идет только о структурировании вашего кода для лучшего обслуживания и читабельности.
Обе папки в основном одинаковы, поскольку они содержат компоненты, но эстетика Vue заключается в том, что компоненты, которые будут работать как страницы (перенаправленные на понравившуюся страницу для навигации), хранятся в /views папка, а повторно используемые компоненты, такие как поля формы, хранятся в /components папка.
Проще говоря, представления предназначены для маршрутов, а компоненты - это компоненты маршрута.
src/views обычно используется для ваших основных страниц в приложении, которое вы перемещаете через маршрутизатор.src/components используется для многократно используемых компонентов, которые вы используете на своих основных страницах (несколько раз на одной странице или на разных страницах)
Вы можете рассматривать такие представления, как страница и компоненты, как повторно используемый блок кода, который вы можете использовать на любой странице или компонентах (оба являются файлами Vue, эти термины предназначены только для демонстрации)
Менее динамичные, близкие к статическим страницам, относятся к представлениям, а более многократно используемый и динамический контент размещается под компонентами.
Представления в основном связаны с теми компонентами, которые представляют их самих, и они по своей сути уникальны. например, страница регистрации. страница входа в систему и т. д. Если мы говорим о компонентах, то они где-то вызываются, они нам нужны, как повторно используемые компоненты оповещения, мы также можем использовать миксин, но, например, всплывающий компонент, в котором мы размещаем наши данные и используем их с нескольких сторон.
Глубина знаний в них:
Представления: папка представлений обычно содержит высокоуровневые представления или страницы вашего приложения. Представления представляют собой различные экраны или маршруты, по которым пользователи могут перемещаться. Эти представления обычно связаны с конкретными маршрутами и могут содержать несколько компонентов. Представления отвечают за организацию компонентов и управление состоянием и поведением всей страницы.
Компоненты. С другой стороны, папка компонентов содержит многоразовые и автономные компоненты пользовательского интерфейса. Компоненты — это модульные части пользовательского интерфейса, которые можно использовать в нескольких представлениях или страницах. Они инкапсулируют определенную функциональность или визуальный элемент и могут иметь собственное состояние и поведение. Компоненты часто используются в представлениях для создания сложных интерфейсов путем объединения и составления более мелких, многократно используемых компонентов.
Резюме: Подводя итог, можно сказать, что основное различие заключается в том, что представления представляют собой высокоуровневые экраны или страницы вашего приложения, а компоненты — это более мелкие, многократно используемые элементы пользовательского интерфейса, которые можно использовать в представлениях или даже в других компонентах. Отделение представлений от компонентов помогает поддерживать чистую и организованную структуру проекта, а также способствует повторному использованию и модульности.
Поведение: когда вы создаете проект с помощью Vue CLI, создается структура проекта по умолчанию, обеспечивающая рекомендуемую и организованную настройку для вашего приложения Vue.js. Включение папок представлений и компонентов в структуру проекта по умолчанию основано на общих шаблонах разработки и лучших практиках разработки приложений Vue.js.
Структура проекта по умолчанию призвана способствовать четкому разделению задач и модульной разработке. Вот краткое объяснение того, почему включены эти папки:
Взгляды.
Компоненты.
Следуя этой структуре проекта, вы можете создать масштабируемое и поддерживаемое приложение Vue.js, поскольку оно способствует повторному использованию кода, модульности и разделению задач. Однако вы можете настраивать и адаптировать структуру проекта в соответствии с конкретными требованиями вашего проекта. Vue CLI обеспечивает гибкость и настраиваемость, позволяя изменять структуру проекта по мере необходимости.
Как уже упоминалось другими, это довольно просто: вы обычно используете представления для фактических страниц, по которым пользователь должен перемещаться. Компоненты - это элементы внутри этих страниц, которые вы можете повторно использовать на любой странице вашего проекта.
На мой взгляд, папка компонентов должна содержать компоненты, которые будут использоваться в представлениях. А в представлениях должны быть те страницы, к которым должен обращаться роутер. Например, на ваших страницах есть панель навигации, верхний и нижний колонтитулы, а также страница входа, страница регистрации и главная страница. Тогда ваш src/components должен содержать заголовок, нижний колонтитул и панель навигации. И в ваших src/views должны быть такие файлы, как логин, регистрация и основной файл.
Ничего, кроме как расположить проект в логическом порядке. Вы по-прежнему можете создавать компоненты в папке представления, но лучше разделить элементы, чтобы код был менее беспорядочным.
Обычно компоненты импортируются в View. И представление помещается в представление маршрутизатора, если хотите.
Разница заключается в функции, которую они выполняют. Представления используются для правильного представления ваших страниц, по которым вы можете перемещаться вперед и назад, а компоненты — это части, из которых состоит ваша страница.
Обе эти папки содержат компоненты Vue, папка views должна содержать компоненты корневого уровня, куда будут импортированы другие компоненты. Так называемые «другие компоненты» находятся внутри папки «компоненты». Для иллюстрации возьмем пример.
Предположим, у вас есть 3 страницы корневого уровня для веб-сайта yourname.com.
- yourname.com
- yourname.com/about
- yourname.com/price
Ваша папка "просмотры" будет состоять из трех компонентов. about.vue, index.vue и price.vue. Эти файлы будут импортированы в файл вашего маршрутизатора или могут быть напрямую импортированы в файл app.vue для маршрутизации. Эти представления могут иметь внутри несколько компонентов, таких как «price-card.vue», «contact-card.vue» и т. Д. Эти файлы обычно находятся в папке с именем «компоненты». Вы можете импортировать эти компоненты в файлы vue, которые есть в папке «views», а затем отрендерить их.