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
270
Getting Started With Data Structures
adoranwodo
1
430
StereoKit: The Open Source SDK for VR/MR
adoranwodo
0
140
Accessibility in the context of Mixed Reality
adoranwodo
0
48
Skills to Excel in Cloud Engineering
adoranwodo
0
410
The Opportunities In The Decade Of Mixed Realities
adoranwodo
0
60
7 Habits of Highly Effective Engineering Teams
adoranwodo
0
140
Designing secure cloud applications
adoranwodo
0
160
Building a sustainable personal brand
adoranwodo
0
110
Other Decks in Technology
See All in Technology
データ基盤におけるIaCの重要性とその運用
mtpooh
4
530
Reactフレームワークプロダクトを モバイルアプリにして、もっと便利に。 ユーザに価値を届けよう。/React Framework with Capacitor
rdlabo
0
130
TSのコードをRustで書き直した話
askua
2
190
embedパッケージを深掘りする / Deep Dive into embed Package in Go
task4233
1
220
Kotlin Multiplatformのポテンシャル
recruitengineers
PRO
2
150
.NET 最新アップデート ~ AI とクラウド時代のアプリモダナイゼーション
chack411
0
200
re:Invent2024 KeynoteのAmazon Q Developer考察
yusukeshimizu
1
150
シフトライトなテスト活動を適切に行うことで、無理な開発をせず、過剰にテストせず、顧客をビックリさせないプロダクトを作り上げているお話 #RSGT2025 / Shift Right
nihonbuson
3
2.2k
新卒1年目、はじめてのアプリケーションサーバー【IBM WebSphere Liberty】
ktgrryt
0
130
Bring Your Own Container: When Containers Turn the Key to EDR Bypass/byoc-avtokyo2024
tkmru
0
860
#TRG24 / David Cuartielles / Post Open Source
tarugoconf
0
590
あなたの知らないクラフトビールの世界
miura55
0
130
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
4 Signs Your Business is Dying
shpigford
182
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Side Projects
sachag
452
42k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
GraphQLとの向き合い方2022年版
quramy
44
13k
Visualization
eitanlees
146
15k
GitHub's CSS Performance
jonrohan
1030
460k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Producing Creativity
orderedlist
PRO
343
39k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.1k
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