vue.js - tutorial - vue js componente

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

Question

Acabo de usar la línea de comandos ( CLI ) para inicializar un proyecto Vue.js. La CLI creó una carpeta src/components y src/views .

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

¿Cuál es la diferencia entre las views y las carpetas de components en un proyecto de Vue generado con vue-cli ?

Answer 1

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

Answer 2

En primer lugar, ambas carpetas, src/components y src/views , contienen componentes de Vue.

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

Cuando se trata de enrutamiento en Vue, generalmente con enrutador Vue , las rutas se definen para cambiar la vista actual utilizada en el componente <router-view> . Estas rutas se encuentran normalmente 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 menos probable que los componentes ubicados bajo src/components se utilicen en una ruta, mientras que los componentes ubicados bajo src/views serán utilizados por al menos una ruta.

Vue CLI pretende ser la línea de base de herramientas estándar para el ecosistema de 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 discutiendo configuraciones. Al mismo tiempo, todavía ofrece la flexibilidad de modificar la configuración de cada herramienta sin la necesidad de expulsar.

Vue CLI apunta a un rápido desarrollo 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 la aplicación .

• A algunas personas les gusta tener su carpeta de Vistas bajo src/router como this placa de 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 aplicación que mejor se adapte al proyecto en el que está trabajando.

Bono: Dan Abramov recomienda this estructura de archivos para los proyectos React y Vue.