https://github.com/nicolasgabriiel/to-do-list-vue

Uma aplicação de lista de tarefas feita em Vue.js, permite adicionar, remover e marcar tarefas como concluídas. Organize suas tarefas de forma eficiente e intuitiva com esta aplicação.
https://github.com/nicolasgabriiel/to-do-list-vue

tailwind typescript vue

Last synced: 4 days ago
JSON representation

Uma aplicação de lista de tarefas feita em Vue.js, permite adicionar, remover e marcar tarefas como concluídas. Organize suas tarefas de forma eficiente e intuitiva com esta aplicação.

• Host: GitHub
• URL: https://github.com/nicolasgabriiel/to-do-list-vue
• Owner: nicolasgabriiel
• Created: 2023-01-04T21:47:34.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2023-02-12T18:09:17.000Z (almost 2 years ago)
• Last Synced: 2024-11-30T02:12:34.831Z (2 months ago)
• Topics: tailwind, typescript, vue
• Language: CSS
• Homepage: https://list-vue.vercel.app
• Size: 452 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### To-Do List Vue 

## Sumário

- [Resumo](#Resumo)

  - [Desafio](#Desafio)

  - [Screenshot](#screenshot)

  - [Link](#link)

- [Processo](#Processo)

  - [Construido com](#construido-com)

  - [O que eu aprendi](#o-que-eu-aprendi)

- [Autor](#autor)

## Resumo

O desafio foi construir uma To-Do List utilizando Vue.js, TypeScript e Tailwind.

### Desafio

Foi a minha primeira vez desenvolvendo uma To-Do List, foi uma experiência pra lá de desafiadora. Meu objetivo era entender mais sobre o vue.js e suas funções, sintáxe e métodos próprios, criar interfaces com o typescript e utilizar pela primeira vez o framework css Tailwind para estilizar o projeto. 

### Screenshots

 Home

  


 


### Link: https://list-vue-6aqf.vercel.app

## Processo

### Construido com

-Vue.JS 


-TypeScript 


-TailWind 


-HTML5 


-CSS3 


-JavaScript 


### Principais coisas que aprendi

Criar interface com TS

```js

export default interface ITarefa {

    descricao: string

}

```

Receber uma interface pelo vue

```js

    data() {

    return {

      tarefas: [] as ITarefa[]

    }

```

Instalar o Tailwind

```js

 /** @type {import('tailwindcss').Config} */

module.exports = {

  content: [".index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],

  theme: {

    extend: {},

  },

  plugins: [],

}

```

Importando fonte pelo TailWind

```js

    extend: {

      fontFamily: {

        'alfa': ['Alfa Slab One', 'cursive']

      }

    }

```

Utilizando dados na tela

```js

{{ tarefa.descricao }}

```

Utilizando v-bind

```js

v-bind:class="{ 'hide': !concluido }"

```

## Autor

-  Site pessoal - [Nicolas Gabriel](https://www.linkedin.com/in/nicolasgabriiel/)