Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Let's build a Vuejs web app
Search
Adora Nwodo
March 23, 2019
Technology
1
110
Let's build a Vuejs web app
Codelab for Vue vixens meetup. Introductory slides to show what would be covered in the codelab.
Adora Nwodo
March 23, 2019
Tweet
Share
More Decks by Adora Nwodo
See All by Adora Nwodo
Harnessing the Power of AI in Open-Source Cloud Engineering
adoranwodo
2
280
Getting Started With Data Structures
adoranwodo
1
430
StereoKit: The Open Source SDK for VR/MR
adoranwodo
0
150
Accessibility in the context of Mixed Reality
adoranwodo
0
53
Skills to Excel in Cloud Engineering
adoranwodo
0
410
The Opportunities In The Decade Of Mixed Realities
adoranwodo
0
71
7 Habits of Highly Effective Engineering Teams
adoranwodo
0
150
Designing secure cloud applications
adoranwodo
0
170
Building a sustainable personal brand
adoranwodo
0
120
Other Decks in Technology
See All in Technology
似たような課題が何度も蘇ってくるゾンビふりかえりを撲滅するため、ふりかえりのテーマをフォーカスしてもらった話 / focusing on the theme
naitosatoshi
0
150
バックエンド留学した話/Backend study abroad story
kaonavi
0
140
サーバシステムを無理なくコンテナ移行する際に伝えたい4つのポイント/Container_Happy_Migration_Method
ozawa
1
130
Lightdashの利活用状況 ー導入から2年経った現在地_20250409
hirokiigeta
2
240
3/26 クラウド食堂LT #2 GenU案件を通して学んだ教訓 登壇資料
ymae
1
250
改めて学ぶ Trait の使い方 / phpcon odawara 2025
meihei3
1
220
Proxmox VE超入門 〜 無料で作れるご自宅仮想化プラットフォームブックマークする
devops_vtj
0
260
「家族アルバム みてね」を支えるS3ライフサイクル戦略
fanglang
4
620
滑らかなユーザー体験も目指す注文管理のマイクロサービス化〜注文情報CSVダウンロード機能の事例〜
demaecan
0
140
ルートユーザーの活用と管理を徹底的に深掘る
yuobayashi
8
750
古き良き Laravel のシステムは関数型スタイルでリファクタできるのか
leveragestech
1
370
LLM とプロンプトエンジニアリング/チューターをビルドする / LLM, Prompt Engineering and Building Tutors
ks91
PRO
1
120
Featured
See All Featured
KATA
mclloyd
29
14k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Embracing the Ebb and Flow
colly
85
4.6k
Producing Creativity
orderedlist
PRO
344
40k
The Language of Interfaces
destraynor
157
24k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
30
1.1k
Into the Great Unknown - MozCon
thekraken
36
1.7k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.5k
What's in a price? How to price your products and services
michaelherold
245
12k
A better future with KSS
kneath
239
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Transcript
Let’s build a VueJS web app Vue Vixens. 23rd March,
2019
Hi, I’m Adora! Multidisciplinary software engineer GDG Ajah Co-organizer Women
Techmakers Ambassador Blogger, adorahack.com Twitter @theadoranwodo GitHub @adoranwodo 2
An open-source JavaScript framework for building user interfaces and single
page applications. 3
What we’d cover • Setting up your VueJS app •
CSS Grid • Styling in Vue • Code structure in preparation for moving forward 4
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
Lets get started. 6
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
8 What we’d be building https://github.com/AdoraNwodo/vue-vixens-petshop
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
Lets start coding! 10