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
120
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
290
Getting Started With Data Structures
adoranwodo
1
450
StereoKit: The Open Source SDK for VR/MR
adoranwodo
0
160
Accessibility in the context of Mixed Reality
adoranwodo
0
58
Skills to Excel in Cloud Engineering
adoranwodo
0
430
The Opportunities In The Decade Of Mixed Realities
adoranwodo
0
88
7 Habits of Highly Effective Engineering Teams
adoranwodo
0
170
Designing secure cloud applications
adoranwodo
0
190
Building a sustainable personal brand
adoranwodo
0
130
Other Decks in Technology
See All in Technology
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.7k
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
430
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
170
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
3
290
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
3.2k
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
1
380
Flutterでキャッチしないエラーはどこに行く
taiju59
0
220
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
210
20250903_1つのAWSアカウントに複数システムがある環境におけるアクセス制御をABACで実現.pdf
yhana
3
530
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
270
Agile PBL at New Grads Trainings
kawaguti
PRO
1
380
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Balancing Empowerment & Direction
lara
3
610
Gamification - CAS2011
davidbonilla
81
5.4k
BBQ
matthewcrist
89
9.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How GitHub (no longer) Works
holman
315
140k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
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