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
260
Getting Started With Data Structures
adoranwodo
1
420
StereoKit: The Open Source SDK for VR/MR
adoranwodo
0
130
Accessibility in the context of Mixed Reality
adoranwodo
0
44
Skills to Excel in Cloud Engineering
adoranwodo
0
400
The Opportunities In The Decade Of Mixed Realities
adoranwodo
0
55
7 Habits of Highly Effective Engineering Teams
adoranwodo
0
140
Designing secure cloud applications
adoranwodo
0
150
Building a sustainable personal brand
adoranwodo
0
100
Other Decks in Technology
See All in Technology
KubeCon NA 2024 Recap: How to Move from Ingress to Gateway API with Minimal Hassle
ysakotch
0
210
どちらを使う?GitHub or Azure DevOps Ver. 24H2
kkamegawa
0
880
マイクロサービスにおける容易なトランザクション管理に向けて
scalar
0
140
Amazon Kendra GenAI Index 登場でどう変わる? 評価から学ぶ最適なRAG構成
naoki_0531
0
120
オプトインカメラ:UWB測位を応用したオプトイン型のカメラ計測
matthewlujp
0
180
組織に自動テストを書く文化を根付かせる戦略(2024冬版) / Building Automated Test Culture 2024 Winter Edition
twada
PRO
17
4.8k
ブラックフライデーで購入したPixel9で、Gemini Nanoを動かしてみた
marchin1989
1
540
小学3年生夏休みの自由研究「夏休みに Copilot で遊んでみた」
taichinakamura
0
170
Oracle Cloud Infrastructure:2024年12月度サービス・アップデート
oracle4engineer
PRO
0
210
成果を出しながら成長する、アウトプット駆動のキャッチアップ術 / Output-driven catch-up techniques to grow while producing results
aiandrox
0
360
LINEヤフーのフロントエンド組織・体制の紹介【24年12月】
lycorp_recruit_jp
0
530
GitHub Copilot のテクニック集/GitHub Copilot Techniques
rayuron
37
15k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
137
6.7k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Side Projects
sachag
452
42k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
450
Speed Design
sergeychernyshev
25
670
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The Pragmatic Product Professional
lauravandoore
32
6.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Statistics for Hackers
jakevdp
796
220k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Designing for Performance
lara
604
68k
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