Qual é a diferença entre as visualizações e as pastas de componentes em um projeto Vue?

128

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?

drsnark
fonte
4
Não acho que sejam diferentes no sentido de que são ambos componentes de visualização de arquivo único. Mas suas visualizações de página (Home.vue, About.vue, Checkout.vue) podem ser mantidas separadas de seus componentes (Button.vue, LoadingSpinner.vue, etc)
Jeff
Isso esclarece as diferenças na estrutura: blog.pusher.com/new-vue-cli-simplifies-development
connexo
10
@Jeff você é um político, se não deveria ser. Você acabou de repetir a pergunta de operações, mas conseguiu fazer com que parecesse uma resposta. RI MUITO.
PrestonDocks

Respostas:

176

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.

Ricky
fonte
6
Isso está 100% certo. Você pode estruturar seu aplicativo da maneira que fizer sentido para você. Eu pessoalmente uso "src / pages" para todas as rotas. Nessa pasta, vou criar uma subpasta para cada "área" do site. Exemplo "src / páginas / perguntas" e nessa pasta, terei um index.vue que terá a lista de perguntas. Terei um add.vue que será a página para adicionar perguntas, etc. Essas "páginas" normalmente simplesmente reúnem os componentes necessários para formar a "página". Em minha pasta "src / componentes", criarei subpastas para coisas como navegação, elementos de formulário, componentes compartilhados personalizados, etc ...
Tim Wickstrom
Presumo que componentes como janelas pop-up / modais sejam aceitos src/componentspor esta convenção.
Simon Thiel de
@Ricky, posso pedir que você dê uma olhada em uma questão Vue.JS relacionada com o código-fonte no github do livro 'Full-Stack Vue.js 2 e Laravel 5' de Anthone Gore aqui: stackoverflow.com/questions/ 59245577 /… ? Particularmente, dê uma olhada na seção EDIT: do OP
Istiaque Ahmed
Podemos dizer que os componentes dentro das visualizações são uma coleção de componentes? Por exemplo, minha exibição de lista pode ter vários componentes e esses componentes estão alojados / embalados dentro de um único componente na exibição?
Aayush
20

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

Ravi
fonte
6

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.

navule
fonte
1

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 .

Chinedu Chaz
fonte