*Iaai programeiros!! *
Hoje fui designada com a responsabilidade de montar toda a estrutura de um projeto frontend utilizando a tecnologia Vue.js. A grande vantagem (e ao menos tempo desvantagem pois meu conhecimento é limitado) é que tenho total liberdade para tomar decisões, pois não há requisitos rígidos ou versões específicas a serem seguidas. Isso me permite explorar as melhores opções disponíveis e criar uma solução sob medida para nossas necessidades.
Escolhendo a Tecnologia:
Optei por utilizar a versão mais recente do Vue, a versão 3. Além disso, estou empolgada em explorar a composition API para a criação dos componentes. Essa abordagem nos proporcionará um código mais limpo e estruturado, além de oferecer uma experiência de desenvolvimento mais eficiente.
Gerenciamento de Estado:
Para o gerenciamento de estado, escolhi utilizar o Pinia, uma biblioteca que tem se destacado pela sua simplicidade e desempenho. Acredito que o Pinia será um aliado importante para manter o fluxo de dados da aplicação organizado e fácil de gerenciar.
Aproveitando o Vuetify 3 e Material Design Icons:
O prazo do projeto é bem apertado ( menos de duas semanas, e tenho que fazer o backend também) por isso, decidi utilizar o Vuetify 3, que é uma biblioteca repleta de componentes prontos para uso. Isso vai agilizar o desenvolvimento, garantindo que a interface do usuário seja moderna e atrativa ( na real? que funciono). Além disso, o Vuetify 3 disponibiliza uma biblioteca de fontes, chamada MDI, que enriquecerá ainda mais nossa aplicação.
Organização com Atomic System:
Para garantir a organização e a manutenção do código, estou seguindo o padrão Atomic System para os componentes customizados. Esse padrão divide os componentes em diferentes camadas, o que facilita a reutilização e a evolução da aplicação de forma estruturada.
Vamos começar:
Para agilizar a compilação e deixar o desenvolvimento mais ágil, vou utilizar o Vite.
Criando o projeto
$ npm create vite@latest
Aqui vamos escolher o nosso framework querido:
Vamos de opção customizada para já instalar o pinia
As configurações ficaram assim:
Vue.js - The Progressive JavaScript Framework
√ Add TypeScript? ... No
√ Add JSX Support? ... No
√ Add Vue Router for Single Page Application development? ... No
√ Add Pinia for state management? ... Yes
√ Add Vitest for Unit Testing? ... No
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No
Agora vamos a instalação do Vuetify e MDI
$ npm i vuetify@^3.3.8
$ npm install @mdi/font
Chegou hora de deixar nosso código preparado para usar os componentes do Vuetify 3 e os ícones do Material Design. Para isso vamos editar o arquivo main.js
### main.js ###
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
//Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import '@mdi/font/css/materialdesignicons.css'
const vuetify = createVuetify({
components,
directives,
icons: {
defaultSet: 'mdi'
}
})
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.use(vuetify)
app.mount('#app')
Prontinho!!! Agora é #partiu codar!
Top comments (0)