¿Cuál es la diferencia entre las vistas y las carpetas de componentes en un proyecto de Vue?


128

Acabo de usar la línea de comando ( CLI) para inicializar un proyecto de Vue.js. La carpeta CLIcreada src/componentsy src/views.

Han pasado unos meses desde que trabajé con un proyecto de Vue y la estructura de carpetas me parece nueva.

¿Cuál es la diferencia entre las carpetas viewsy componentsen un proyecto de Vue generado con vue-cli?


4
No creo que sean diferentes en el sentido de que ambos son componentes de vista de un solo archivo. Pero las visitas a su página (Home.vue, About.vue, Checkout.vue) pueden mantenerse separadas de sus componentes (Button.vue, LoadingSpinner.vue, etc.)
Jeff

Esto arroja algo de luz sobre las diferencias en la estructura: blog.pusher.com/new-vue-cli-simplifies-development
connexo

10
@Jeff eres un político, si no, deberías serlo. Simplemente repitió la pregunta de Operaciones, pero logró que pareciera una respuesta. LOL.
PrestonDocks

Respuestas:


177

En primer lugar, ambas carpetas src/componentsy src/viewscontienen componentes de Vue.

La diferencia clave es que algunos componentes de Vue actúan como Vistas para el enrutamiento.

Cuando se trata de enrutamiento en Vue, generalmente con Vue Router , las rutas se definen para cambiar la vista actual utilizada en el <router-view>componente. Estas rutas suelen estar ubicadas en src/router/routes.js, donde podemos ver algo como esto:

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,
  },
]

Es src/componentsmenos probable que los componentes ubicados debajo src/viewsse utilicen en una ruta, mientras que los componentes ubicados debajo se usarán en al menos una ruta.


Vue CLI tiene como objetivo ser la línea de base de herramientas estándar para el ecosistema Vue. Garantiza que las diversas herramientas de compilación funcionen sin problemas junto con valores predeterminados razonables para que pueda concentrarse en escribir su aplicación en lugar de pasar días luchando con configuraciones. Al mismo tiempo, todavía ofrece la flexibilidad de modificar la configuración de cada herramienta sin necesidad de expulsarla.

Vue CLI tiene como objetivo el desarrollo rápido de Vue.js, mantiene las cosas simples y ofrece flexibilidad. Su objetivo es permitir que equipos de diferentes niveles de habilidad configuren un nuevo proyecto y comiencen.

Al final del día, es una cuestión de conveniencia y estructura de aplicación .

  • Algunas personas les gusta tener sus puntos de vista carpeta bajo src/routercomo este texto modelo de la empresa.
  • Algunas personas lo llaman Páginas en lugar de Vistas .
  • Algunas personas tienen todos sus componentes en la misma carpeta.

Elija la estructura de la aplicación que mejor se adapte al proyecto en el que está trabajando.


6
Esto es 100% correcto. Puede estructurar su aplicación de la forma que tenga sentido para usted. Yo personalmente uso "src / pages" para todas las rutas. En esa carpeta, crearé una subcarpeta para cada "área" del sitio. Ejemplo "src / pages / questions" y en esa carpeta, tendré un index.vue que tendrá la lista de preguntas. Tendré un add.vue que será la página para agregar preguntas, etc. Estas "páginas" normalmente simplemente ensamblan los componentes necesarios para formar la "página". En mi carpeta "src / components" crearé subcarpetas para cosas como navegación, elementos de formulario, componentes compartidos personalizados, etc.
Tim Wickstrom

¿Supongo que componentes como las ventanas emergentes / modales se ajustan a src/componentsesta convención?
Simon Thiel

@Ricky, ¿puedo pedirle que eche un vistazo a una pregunta de Vue.JS relacionada con el código fuente en github del libro 'Full-Stack Vue.js 2 y Laravel 5' de Anthone Gore aquí: stackoverflow.com/questions/ 59245577 /… ? En particular, eche un vistazo a la sección EDITAR: del OP
Istiaque Ahmed

¿Podemos decir que los componentes dentro de las vistas son una colección de componentes? Por ejemplo, mi vista de lista puede tener varios componentes y estos componentes están alojados / envueltos dentro de un solo componente a la vista.
Aayush

20

Creo que es más una convención. Algo que es reutilizable se puede guardar en la carpeta src / components, algo que está vinculado al enrutador se puede guardar en src / views


6

Se sugiere colocar las vistas generalmente reutilizables en el src/componentsdirectorio. Ejemplos como encabezado, pie de página, anuncios, cuadrículas o cualquier control personalizado como cuadros de texto o botones con estilo. Se puede acceder a uno o más componentes dentro de una vista.

Una vista puede tener componentes y, en realidad, se pretende que se acceda a una vista mediante la URL de navegación. Generalmente se colocan en formato src/views.

Recuerde que no está obligado a acceder a los componentes a través de la URL. Puede agregar cualquier componente router.jsy acceder a él también. Pero si tiene la intención de hacerlo, puede moverlo a en src/viewslugar de colocarlo src/components.

Los componentes son controles de usuario en analogía con los formularios web de asp.net.

Se trata solo de estructurar su código para un mejor mantenimiento y legibilidad.


1

Ambas carpetas son básicamente iguales ya que ambas contienen componentes, pero la estética de Vue es que los componentes que funcionarán como páginas (enrutados a una página similar para la navegación) se mantienen en la /viewscarpeta, mientras que los componentes reutilizables como los campos de formulario se mantienen en la /componentscarpeta. .

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.