Tic Tac Vue

Tic-tac-vue

O TIC-TAC-Vue é um aplicativo de página única JavaScript simples (SPA) escrita com o roteador Vue, Vuex e Vue. Seu objetivo é ser um "estudo de caso" para iniciantes que desejam aprender Vue e seu poderoso ecossistema.

Clique aqui para experimentar a versão de demonstração online.

Tabela de conteúdo

• Metodologias
• Habilidades técnicas
• Instalar
• Uso

Metodologias

Neste projeto, adotei duas metodologias para ter um código melhor fatorado e arquivos de origem organizados: BEM e design atômico.

BEM

O BEM (que significa modificador de elemento de bloco) é uma metodologia que ajuda a criar componentes reutilizáveis ​​no desenvolvimento front-end. Trata -se de dividir suas classes CSS usando blocos , elementos e modificadores . O DOM final pode ser detalhado, mas você terá um código -fonte melhor fatorado e, por causa de você não precisar aninhar as aulas CSS, seu pacote CSS resultará menos pesado.

Clique aqui se você quiser se aprofundar no BEM.

Design atômico

O design atômico é uma metodologia para criar sistemas de design. Da mesma forma à química, você pode organizar seu arquivo de componentes (nesse cenário componentes de arquivo único) usando átomos , moléculas e organismos .

Átomos

Os átomos são os blocos básicos de construção da matéria. Aplicados às interfaces da Web, os átomos são nossas tags HTML, como um rótulo de formulário, uma entrada ou um botão.

Moléculas

As moléculas são grupos de átomos unidos e são as menores unidades fundamentais de um composto.

Organismos

Os organismos são grupos de moléculas unidas para formar uma seção relativamente complexa e distinta de uma interface.

Habilidades técnicas

Primeiro de tudo, sugiro fortemente que você dê uma olhada na documentação do VUE, especialmente para:

• Manipuladores de vue
• Props Vue
• Propriedades computadas da VUE
• Componentes de arquivo único vue
• Estado de Vuex
• Vuex Getters
• Mutações Vuex
• Roteador de vue

Instalar

Você pode instalar a clonagem TIC-TAC-VUE O projeto:

 git clone https://github.com/Sanfra1407/tic-tac-vue.git

Em seguida, instale as dependências da NPM:

 npm install

Uso

Como este projeto foi desenvolvido com o Vite.js, você pode usar seus próprios comandos integrados da CLI para servir, construir ou ter uma prévia do aplicativo.

Iniciar o servidor dev

 npm run dev

Compila e minifica para a produção

 npm run build

Visualização do aplicativo construído

 npm run preview

Fios e correções arquivos

 npm run lint

Implantar

Para implantar seu aplicativo, você pode seguir o guia oficial do Vite.js.