Scribd
Carregar
18 visualizações11 páginas

Aula - Conceitos Framework e Vue

Vue é um framework JavaScript para construção de interfaces de usuário, baseado em HTML, CSS e JavaScript, que utiliza um modelo de programação declarativo e baseado em componentes. A estrutura do projeto inclui pastas como Public, SRC, ASSETS, COMPONENTS, ROUTER e VIEWS, além de arquivos importantes como .GITIGNORE, package.json e vite.config. Para iniciar um projeto Vue, é necessário instalar o Node.js, usar comandos npm para instalar o Vue e criar um novo projeto, e a estrutura de um componente Vue é composta por três tags: template, script e style.

Enviado por

rosarodrigues
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
18 visualizações11 páginas

Aula - Conceitos Framework e Vue

Vue é um framework JavaScript para construção de interfaces de usuário, baseado em HTML, CSS e JavaScript, que utiliza um modelo de programação declarativo e baseado em componentes. A estrutura do projeto inclui pastas como Public, SRC, ASSETS, COMPONENTS, ROUTER e VIEWS, além de arquivos importantes como .GITIGNORE, package.json e vite.config. Para iniciar um projeto Vue, é necessário instalar o Node.js, usar comandos npm para instalar o Vue e criar um novo projeto, e a estrutura de um componente Vue é composta por três tags: template, script e style.

Enviado por

rosarodrigues
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 11

VUEJS

VUEJS
O que é

Vue é um framework JavaScript para Framework é uma biblioteca de códigos


construir interfaces de usuário. Ele se que auxiliam a criação de um sistema de
baseia em HTML, CSS e JavaScript forma facilitada e rápida.
padrão e fornece um modelo de
programação declarativo e baseado em Componente é um bloco de código que
componentes que ajuda a desenvolver retorna uma necessidade específica,
interfaces de usuário com eficiência, podendo ser uma página, uma função
sejam elas simples ou complexas. ou qualquer que seja a necessidade.
VUEJS
O que é

O Vue é estruturado com as seguintes


pastas:

Public: Arquivos que irão ser


apresentados de forma pública,
exemplo: favicon

SRC: Pasta de sources, significa origem,


ou seja, todos os arquivos importantes
SRC
O que é

A pasta SRC contém outras pastas para


segmentação do projeto mais os arquivos
principais, que são App.vue e main.ts

ASSETS: Pasta para colocar arquivos de mídia,


exemplo: imagens

COMPONENTS: Pasta para a criação de


componentes

ROUTER: Pasta responsável por rotas

VIEWS: Pasta responsável por retornar as telas


do projeto
VUEJS
O que é

.GITIGNORE: Arquivo pra especificar os itens que o


git deverá ignorar na hora de enviar pra nuvem

Env.d.ts: arquivo de ambiente

Index.html: arquivo que vai receber o html do vue

Package.json: arquivo com as dependências do


projeto

Tsconfig: configurações do typescript

Vite.config: configurações do vite


VUEJS
Para instalar do zero

Primeiramente instalar o nodejs: https://nodejs.org/en/download/

Depois abrir o terminal e usar o comando:

npm install vue

Para criar um novo projeto do VUEJS:

npm init vue@latest

Assim você terá um projeto novinho na sua máquina


VUEJS
Para instalar do zero

Para abrir o projeto no navegador, usar o comando:

npm run dev

O terminal vai apresentar um link, para entrar, só copiar o link e colar


no navegador
VUEJS
Para abrir projeto

Primeiramente você deve baixar o projeto no qual você irá trabalhar

Após isso, abrir o projeto no terminal e rodar o comando:

npm install

Esse comando vai baixar todas as dependências pro seu projeto

Para abrir o projeto no navegador, usar o comando:

npm run dev

O terminal vai apresentar um link, para entrar, só copiar o link e colar no navegador
VUEJS
Estrutura do componente

Em um arquivo vue tem três tags: template, script e style

<template> : Você aplica o html e também as propriedades que o vue permite, como
v-for, v-model, v-bind e etc

<script> : Tag onde será aplicado todo o javascript, com as váriaveis, funções e
importações

<style> : Implementação de CSS, podendo ser scoped ou não, ou seja, se será apenas
para aquele componente ou não
VUEJS - <TEMPLATE>
Estrutura do componente

Na tag template, precisamos desenvolver todo a estrutura necessária para retornar


ao componente ou à view, então utilizamos as tags de html para montar essa
estrutura.

Além disso, o vue permite que utilizemos algumas funções e variáveis dentro do
próprio projeto:

V-for : para criar repetições dentro do próprio html


V-bind: para atrelar um pedaço de javascript no html
V-model: para relacionar uma variável com o html

{{ }} : apresentar uma variável dentro de alguma tag html

Você também pode gostar