Vue Workflow: Creating the Frontend

Vue

Vue is a JavaScript framework for building websites. Like other frameworks it uses a virtual DOM enabling the page to update dynamically without having to reload. In our project, each page is built with a Vue file. Each Vue file integrates html, css, and javascript:

<template>
   <h1>HTML</h1>
</template>

<script>
   var name = "JavaScript"
</script>

<style>
   .CSS{
   }
</style>

Our main pages are contained within .vue files in our views folder, routing between pages is handled by an index.js file in our router folder, and any components that may show up in multiple pages are contained within .vue files in our components folder.

Main Pages vs. Components

Both main pages and components are built with .vue files so what is the difference? Our main pages included things like the home page, the host room, the join room, and the join code page. We had one component and that was the Navbar. A component is different from a page as components are used within pages. So the navbar was built into the home, about, contact, and join code page. Its relatively simple to include the components into different pages:

//HomeView.vue

<template>
   </Navbar>
</template>

<script>
import NavbarComponent from '../components/NavbarComponent.vue';
export default {
   components: {
    NavbarComponent
  },
}
</script>

HTML

HTML or Hypertext Markup Language is the standard markup language for creating a displaying documents on a website. It is like the skeleton of the webpage as it is where you put all of the text of the webpage. It allows you to create lists with bullet points, forms, hyperlinks. In HTML, all of your elements are contained within tags (<></>). For example if i wanted to create a form, I could do:

<form>
    <label></label>
    <input></input>
</form>

And while its not necessarily the best option for styling, you can change fonts, text sizes, or even colors with it.

CSS

CSS or Cascading Style Sheets is a style sheet language used to design a webpage given the HTML outline. In our project we use it to change certain colors, sizes of text, positions of elements, and even hover animations for buttons. The HTML elements in a project can be styled according to their tag:

<h1><h1/>

class:

<h1 class = "case2"></h1>

or id:

<h1 id = "case3"></h1>

These different methods of styling would be done like this, in their respective order:

h1 {
   font-size: 12px;
}

.case2 {
   font-size: 12px;
}

#case3 {
   font-size: 12px;
}

JavaScript

JavaScript is a programming language that can be used in web development in order to make your webpages more dynamic and interactive. With this tool you are able to create variables and functions that can perform more complex tasks. In the scope of our project, it will be used to make API calls, and manage room passcodes. All of the JavaScript code is contained with script tags:

<script>
   var name = "JavaScript"
</script>

To Be Continued

Bryan Lecza