Slide 1

Slide 1 text

Let’s build a VueJS web app Vue Vixens. 23rd March, 2019

Slide 2

Slide 2 text

Hi, I’m Adora! Multidisciplinary software engineer GDG Ajah Co-organizer Women Techmakers Ambassador Blogger, adorahack.com Twitter @theadoranwodo GitHub @adoranwodo 2

Slide 3

Slide 3 text

An open-source JavaScript framework for building user interfaces and single page applications. 3

Slide 4

Slide 4 text

What we’d cover ● Setting up your VueJS app ● CSS Grid ● Styling in Vue ● Code structure in preparation for moving forward 4

Slide 5

Slide 5 text

Tools you need ● The WiFi (Connect if you haven’t) ● A modern browser (e.g. Chrome, Microsoft Edge) ● A text editor (e.g. VSCode, Sublime Text) ● NPM 5

Slide 6

Slide 6 text

Lets get started. 6

Slide 7

Slide 7 text

Install Vue and Dependencies ● Install Vue CLI - npm install -g @vue/cli -@vue/cli ● Create a Vue Project - vue create pet-shop ● Install Vuetify - npm i vuetify OR Clone the starter repo git clone https://github.com/AdoraNwodo/vue-vixens-starter.git 7

Slide 8

Slide 8 text

8 What we’d be building https://github.com/AdoraNwodo/vue-vixens-petshop

Slide 9

Slide 9 text

Shared Links ● App.vue - bit.ly/vue-template ● Styles - bit.ly/vue-style ● GitHub gist - gist.github.com/AdoraNwodo/ ● Vue Documentation - https://vuejs.org/ 9

Slide 10

Slide 10 text

Lets start coding! 10