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
130
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
330
Getting Started With Data Structures
adoranwodo
1
470
StereoKit: The Open Source SDK for VR/MR
adoranwodo
0
180
Accessibility in the context of Mixed Reality
adoranwodo
0
87
Skills to Excel in Cloud Engineering
adoranwodo
0
460
The Opportunities In The Decade Of Mixed Realities
adoranwodo
0
110
7 Habits of Highly Effective Engineering Teams
adoranwodo
0
200
Designing secure cloud applications
adoranwodo
0
210
Building a sustainable personal brand
adoranwodo
0
160
Other Decks in Technology
See All in Technology
Agent Skill 是什麼?對軟體產業帶來的變化
appleboy
0
230
スケールアップ企業でQA組織が機能し続けるための組織設計と仕組み〜ボトムアップとトップダウンを両輪としたアプローチ〜
tarappo
4
370
From Senior to Staff : To infinity and beyond !
kuahyeow
0
110
モジュラモノリス導入から4年間の総括:アーキテクチャと組織の相互作用について / Architecture and Organizational Interaction
nazonohito51
6
2.8k
【AWS】CloudTrail LakeとCloudWatch Logs Insightsの使い分け方針
tsurunosd
0
120
AgentCoreとLINEを使った飲食店おすすめアプリを作ってみた
yakumo
2
240
CloudFrontのHost Header転送設定でパケットの中身はどう変わるのか?
nagisa53
1
160
A4)シラバスを超えて語る、テストマネジメント
moritamasami
0
130
Phase11_戦略的AI経営
overflowinc
0
1.5k
AWS Systems Managerのハイブリッドアクティベーションを使用したガバメントクラウド環境の統合管理
toru_kubota
0
160
SSoT(Single Source of Truth)で「壊して再生」する設計
kawauso
2
330
Phase10_組織浸透_データ活用
overflowinc
0
1.6k
Featured
See All Featured
Marketing to machines
jonoalderson
1
5k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Design in an AI World
tapps
0
180
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
230
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
1
2.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.8k
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
1
320
Exploring anti-patterns in Rails
aemeredith
2
290
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
8k
A designer walks into a library…
pauljervisheath
210
24k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
1.9k
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