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?

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.

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

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.

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. .