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
50
Skills to Excel in Cloud Engineering
adoranwodo
0
410
The Opportunities In The Decade Of Mixed Realities
adoranwodo
0
62
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
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
450
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
6.5k
Ask! NIKKEI RAG検索技術の深層
hotchpotch
13
2.8k
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
370
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.5k
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
170
RSNA2024振り返り
nanachi
0
500
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1k
Featured
See All Featured
For a Future-Friendly Web
brad_frost
176
9.5k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Visualization
eitanlees
146
15k
Documentation Writing (for coders)
carmenintech
67
4.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Optimising Largest Contentful Paint
csswizardry
34
3.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