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
96
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
240
Getting Started With Data Structures
adoranwodo
1
410
StereoKit: The Open Source SDK for VR/MR
adoranwodo
0
94
Accessibility in the context of Mixed Reality
adoranwodo
0
33
Skills to Excel in Cloud Engineering
adoranwodo
0
390
The Opportunities In The Decade Of Mixed Realities
adoranwodo
0
46
7 Habits of Highly Effective Engineering Teams
adoranwodo
0
120
Designing secure cloud applications
adoranwodo
0
120
Building a sustainable personal brand
adoranwodo
0
85
Other Decks in Technology
See All in Technology
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
110
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
780
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
1.3k
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
170
Cracking the KubeCon CfP
inductor
2
250
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
320
開発パフォーマンスを最大化するための開発体制
ham0215
2
450
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
250
プラットフォームってつくることより計測することが重要なんじゃないかという話 / Platform Engineering Meetup #8
taishin
1
370
MapLibreとAmazon Location Service
dayjournal
1
160
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
480
web-application-security
matsuihidetoshi
0
170
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
43k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
[RailsConf 2023] Rails as a piece of cake
palkan
23
4k
Fireside Chat
paigeccino
21
2.6k
Unsuck your backbone
ammeep
663
57k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Building Adaptive Systems
keathley
31
1.9k
We Have a Design System, Now What?
morganepeng
43
6.8k
What the flash - Photography Introduction
edds
64
11k
Visualization
eitanlees
136
14k
How to Ace a Technical Interview
jacobian
272
22k
How STYLIGHT went responsive
nonsquared
92
4.8k
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