https://github.com/raizertechdev/projetointegrado-front-vue-master

Criando um projeto onde o cliente vai interagir ao montar seu hambúrguer e verificar que foi realizado seu pedido, nesse projeto foram aplicadas as principais stacks no Backend: db.Json, Json-Server & Nodejs e no Frontend: Vuejs.
https://github.com/raizertechdev/projetointegrado-front-vue-master

html5 javascript json-server styled-components styled-scoped vuejs

Last synced: 6 days ago
JSON representation

Criando um projeto onde o cliente vai interagir ao montar seu hambúrguer e verificar que foi realizado seu pedido, nesse projeto foram aplicadas as principais stacks no Backend: db.Json, Json-Server & Nodejs e no Frontend: Vuejs.

• Host: GitHub
• URL: https://github.com/raizertechdev/projetointegrado-front-vue-master
• Owner: RaizerTechDev
• Created: 2023-07-28T20:50:46.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-07-28T23:26:23.000Z (over 1 year ago)
• Last Synced: 2024-10-17T13:16:32.461Z (about 1 month ago)
• Topics: html5, javascript, json-server, styled-components, styled-scoped, vuejs
• Language: Vue
• Homepage: https://rafarz76dev-makeyourburger.netlify.app/
• Size: 2.83 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ProjetoIntegrado-Stackx-Front-Back




---

### 


  #  


### [Clique aqui para acessar o Projeto ```Make Your Burger```](https://rafarz76dev-makeyourburger.netlify.app/)

  

  


  

---

# Suas aplicação:

 

---

#  Ferramenta Do Desafio⁉



---

##   Linguagem Tecnológica do Desafio:



---

# Passo a Passo do Projeto:

## Passo 01

## Instalando para o projeto em vue.js no terminal power shell 

### 1º Para instalar o pacote vs.js, use o seguinte comando:

```bash

  yarn global add @vue/cli

```

### 2º Após a instalação, você terá acesso ao vue binário em sua linha de comando. Você pode verificar se ele está instalado corretamente simplesmente executando👇

```bash

 vue –-version

```

### 3º Criando o Projeto Vue

```bash

   vue create nome do projeto ( ex. projetovew-web3.0)

```

###  Quando perguntar digita:

```bash

   Default ([Vue 3] babel, eslint)

```

###  Quando perguntar digita:

```bash

   Use Yarn

```

## No terminal ao finalizar vai imprimir 

###  cd Nome do Projeto

###  yarn serve

### Aguarda a instalação dos pacotes no projeto,

###  E altera copiando e colando para a pasta do projeto que foi criado antes de abrir no VSCode com o comando.

- `cd nomepastaprojeto`

### 4º Agora sim vai Abrir o Projeto no Terminal para a ferramenta VSCode, digitando 👊

```bash

  code .

```

## Dentro do editor de código VSCode no ```terminal power shell```:

### Atualizando o Pacote:

```bash

   npm update -g @vue/cli.

```

### Configuração do Projeto:

```bash

   yarn

```

---

## Passo 02: Back-End no Vue.js

### 1º Vai instalar o json-server, use o seguinte comando:

```bash

   npm install json-server

```

### 2º Vai criar a pasta no VSCode a pasta `db` e o arquivo como `db.json`, assim criando os scripts.

####  Após a instalação do comando e a criação do db vai em package.json em `scripts` e abaixo do `build` vai acrescentar o Backend da seguinte forma:

```scripts: {

  "backend": "json-server --watch db/db.json",

},

```

### 3º Execução do back-end no servidor:

```bash

npm run Backend

```

####  Vai compilar na porta => http://localhost:3000/

---

### 4º Executar o projeto em front-end no servidor:

```bash

yarn serve

```

####  Vai compilar na porta: http://localhost:8080/

---

### Criando o módulo de rotas

###  Se integra ao núcleo do Vue.js para facilitar a criação de aplicativos de página única com o Vue. Foi importado no `main.js`.

- [ router-vue-routers](https://br.vuejs.org/v2/guide/routing.html)

---

###  Idéia sobre definição “Babel”

### É um Transpilador JavaScript de código aberto, o Babel foi lançado sobre a licença MIT e possui como uma das principais características converter código JavaScript atual em uma versão que o navegador possa executar.

---

###  Definição 

### Vai ser usado "style scoped": Quando uma <style> possui o scoped atributo, seu CSS será aplicado apenas aos elementos do componente atual.

- [ style scooped](https://vue-loader.vuejs.org/guide/scoped-css.html)

 

<br>

   - ## <img src="https://media.giphy.com/media/ImmvDZ2c9xPR8gDvHV/giphy.gif" align="center" height="25" width="25"> Autor

<p>

    <img align=left margin=10 width=80 src="https://avatars.githubusercontent.com/u/87991807?v=4"/>

    <p>&nbsp&nbsp&nbspRafaRz76Dev<br>

    &nbsp&nbsp&nbsp<a href="https://api.whatsapp.com/send/?phone=47999327137">Whatsapp</a>&nbsp;|&nbsp;<a href="https://www.linkedin.com/in/rafael-raizer//">LinkedIn</a>&nbsp;|&nbsp;<a href="https://github.com/RafaRz76Dev">GitHub</a>|&nbsp;<a href="https://public.tableau.com/app/profile/rafael.raizer">Tableau</a>|&nbsp;<a href="https://portifolio-rafarz76dev.netlify.app/">Portfólio</a>&nbsp;</p>

</p>