Acabei de usar a linha de comando ( CLI) para inicializar um projeto Vue.js. O CLIcriado uma pasta src/componentse src/views.

Já se passaram alguns meses desde que trabalhei com um projeto Vue e a estrutura de pastas parece nova para mim.

Qual é a diferença entre as pastas viewse componentsem um projeto Vue gerado com vue-cli?

Em primeiro lugar, ambas as pastas src/componentse src/viewscontêm componentes Vue.

A principal diferença é que alguns componentes do Vue atuam como visualizações para o roteamento.

Ao lidar com o roteamento no Vue, geralmente com o Vue Router , as rotas são definidas a fim de alternar a visualização atual usada no <router-view>componente. Essas rotas geralmente estão localizadas em src/router/routes.js, onde podemos ver algo assim:

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

Os componentes localizados abaixo src/componentssão menos prováveis ​​de serem usados ​​em uma rota, enquanto os componentes localizados abaixo src/viewsserão usados ​​por pelo menos uma rota.

O Vue CLI visa ser a linha de base de ferramentas padrão para o ecossistema Vue. Ele garante que as várias ferramentas de construção funcionem perfeitamente em conjunto com padrões razoáveis ​​para que você possa se concentrar em escrever seu aplicativo em vez de passar dias lutando com as configurações. Ao mesmo tempo, ainda oferece a flexibilidade de ajustar a configuração de cada ferramenta sem a necessidade de ejeção.

O Vue CLI visa o desenvolvimento rápido do Vue.js, mantém as coisas simples e oferece flexibilidade. Seu objetivo é permitir que equipes de vários níveis de habilidade configurem um novo projeto e comecem.

No final das contas, é uma questão de conveniência e estrutura do aplicativo .

• Algumas pessoas gostam de ter suas opiniões pasta em src/routercomo esse clichê empresa.
• Algumas pessoas chamam de páginas em vez de visualizações .
• Algumas pessoas têm todos os seus componentes na mesma pasta.

Escolha a estrutura do aplicativo que melhor se adapta ao projeto em que está trabalhando.

Eu acho que é mais uma convenção. Algo que é reutilizável pode ser mantido na pasta src / components algo que está vinculado ao roteador pode ser mantido em src / views

Geralmente, as visualizações reutilizáveis ​​são sugeridas para serem colocadas no src/componentsdiretório. Exemplos como cabeçalho, rodapé, anúncios, grades ou qualquer controle personalizado, como caixas de texto ou botões com estilo. Um ou mais componentes podem ser acessados ​​dentro de uma vista.

Uma visão pode ter componente (s) e uma visão é na verdade destinada a ser acessada por url de navegação. Eles geralmente são colocados em src/views.

Lembre-se de que você não é obrigado a acessar os componentes via url. Você é livre para adicionar qualquer componente ao router.jse acessá-lo também. Mas se for essa a intenção, você pode movê-lo para um em src/viewsvez de colocá-lo em src/components.

Os componentes são controles de usuário em analogia aos formulários da web do asp.net.

É apenas sobre como estruturar seu código para melhor manutenção e legibilidade.

Ambas as pastas são basicamente as mesmas, uma vez que ambas contêm componentes, mas a estética do Vue é que os componentes que funcionarão como páginas (roteados para uma página semelhante para navegação) são mantidos na /viewspasta, enquanto os componentes reutilizáveis ​​como campos de formulário são mantidos na /componentspasta .