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
開発者が自律的に 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
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
3
530
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
6
4.1k
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
110
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
7
1k
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
660
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
650
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
51
7.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Speed Design
sergeychernyshev
25
780
GitHub's CSS Performance
jonrohan
1030
460k
Building Adaptive Systems
keathley
40
2.4k
Code Reviewing Like a Champion
maltzj
521
39k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
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