Vue é um robusto framework JavaScript dedicado à construção de interfaces de usuário interativas e dinâmicas. Esta ferramenta poderosa é construída sobre os fundamentos da web moderna: HTML, CSS e JavaScript. Com um modelo de programação declarativo e baseado em componentes, o Vue capacita os desenvolvedores a criar interfaces de usuário de qualquer complexidade de forma eficiente e organizada.
Além disso, abrange a maioria dos recursos comuns necessários no desenvolvimento de frontend. No entanto, a web é extremamente diversa – as coisas que construímos na web podem variar drasticamente em forma e escala. Com isso em mente, Vue é projetado para ser flexível e adotável incrementalmente. Dependendo do seu caso de uso, Vue pode ser utilizado de diferentes maneiras:
Aprimorando HTML estático sem um passo de compilação
Incorporando como Componentes da Web em qualquer página
Aplicação de Página Única (SPA)
Fullstack / Renderização do Lado do Servidor (SSR)
Jamstack / Geração de Site Estático (SSG)
Direcionamento para desktop, mobile, WebGL e até mesmo o terminal
Para criar um novo projeto Vue, certifique-se de ter uma versão atualizada do Node.js instalada e que seu diretório de trabalho atual seja o onde pretende criar um projeto. Execute o seguinte comando em sua linha de comando:
✔ Add TypeScript? … No
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit testing? … No
✔ Add an End-to-End Testing Solution? … No
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … No
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No
Scaffolding project in ./<your-project-name>…
Done.
npm install
npm run dev
Com isso você já possui um projeto Vue sendo executado localmente.
O projeto pode ser integrado com Tailwind CSS, sendo
um framework CSS orientado para utilitários, repleto de classes como flex, pt-4, text-center e rotate-90, que podem ser combinadas para construir qualquer design diretamente em seu markup.
Para instalá-lo em seu projeto, basta executar a instalação das dependências abaixo:
npx tailwindcss init -p
Configure o arquivo tailwind.config.js adicionando em seu content as diretivas:
Adicione as diretivas do tailwind no arquivo CSS carregado no componente central (ou carrego-o manualmente com as diretivas abaixo):
@tailwind components;
@tailwind utilities;
Para finalizar a configuração do projeto, vamos adicionar o plugin daisyUI – Tailwind CSS. O daisyUI adiciona nomes de classes de componentes ao Tailwind CSS para que você possa criar websites bonitos mais rapidamente.
Para adicioná-lo ao projeto, basta executar os comandos abaixo:
E configurá-lo no arquivo tailwind.config.js:
content: [“./index.html“, “./src/**/*.{vue,js,ts,jsx,tsx}“,],
theme: {
extend: {
},
},
plugins: [require(‘daisyui‘),],
}
Com esses passos, seu projeto Vue estará pronto para criar interfaces de usuário dinâmicas e esteticamente agradáveis de forma eficiente. A combinação do Vue com o Tailwind CSS e o daisyUI oferece uma experiência de desenvolvimento ágil e flexível, permitindo que você se concentre na criação de ótimas experiências para os usuários finais.
Referências
https://vuejs.org
https://tailwindcss.tw
https://daisyui.com
