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
300
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
60
Skills to Excel in Cloud Engineering
adoranwodo
0
440
The Opportunities In The Decade Of Mixed Realities
adoranwodo
0
90
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
SQLAlchemy の select(User).where(User.id =="123") を理解してみる/sqlalchemy deep dive
3l4l5
3
350
AIプロダクトのプロンプト実践テクニック / Practical Techniques for AI Product Prompts
saka2jp
0
110
オブザーバビリティが育むシステム理解と好奇心
maruloop
2
1.1k
Dify on AWS 環境構築手順
yosse95ai
0
130
AI機能プロジェクト炎上の 3つのしくじりと学び
nakawai
0
110
AI時代、“平均値”ではいられない
uhyo
8
2.6k
Dylib Hijacking on macOS: Dead or Alive?
patrickwardle
0
470
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
3
670
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
sayn0
1
300
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
clairegiordano
0
130
Azure Well-Architected Framework入門
tomokusaba
1
130
コンパウンド組織のCRE #cre_meetup
layerx
PRO
1
270
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
RailsConf 2023
tenderlove
30
1.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Code Review Best Practice
trishagee
72
19k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
620
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Building Applications with DynamoDB
mza
96
6.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
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