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
Vue: from view to view
Search
Hsiaoming Yang
May 31, 2016
Technology
2
5.3k
Vue: from view to view
A lightnight talk for #vuejs Japan. A concept on how to manage your vue files.
Hsiaoming Yang
May 31, 2016
Tweet
Share
More Decks by Hsiaoming Yang
See All by Hsiaoming Yang
The modern OAuth 2.0
lepture
2
1.7k
Accessibility
lepture
0
280
Other Decks in Technology
See All in Technology
Building Products in the LLM Era
ymatsuwitter
10
4.4k
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
10
2.7k
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
720
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.5k
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
5.1k
開発者が自律的に 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
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Why Our Code Smells
bkeepers
PRO
335
57k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
It's Worth the Effort
3n
184
28k
A Philosophy of Restraint
colly
203
16k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Gamification - CAS2011
davidbonilla
80
5.1k
Writing Fast Ruby
sferik
628
61k
Transcript
Vue: from view to view Hsiaoming Yang @lepture
About Me 0
̣ lepture.com ̣ github.com/lepture ̣ twitter.com/lepture
̣ not skills ̣ no fantasy new features ̣ no
cool technology
My first view 1
None
None
vue-hackernews 3 views
A deep view 2
̣ python-china.org (qingcheng) ̣ app.xiaotaojiang.com
Large Applications vuex + vue-router
None
– Phil Karlton There are only two hard things in
Computer Science: cache invalidation and naming things
Make Vue Great Again looking
̣ views ̣ components ̣ widgets
views 3
<router-view> Views are the web pages
̣ Home.vue ̣ Brands.vue ̣ Product.vue ̣ UserProfile.vue <router-view>
import Home from ‘./Home.vue’ import UserProfile from ‘./UserProfile.vue’ export default
{ ‘/’: { title: ‘Ḓᶭ’ component: Home }, ‘/user’: { title: ‘አಁ’ component: UserProfile } } views/index.js
import views from ‘./views’ router.map(views)
components 4
as pure as possible components are just components
JUST USER INTERFACE
carousel This
import Slider from ‘./Slider.vue’ import Avatar from ‘./Avatar.vue’ export default
{ Slider, Avatar, } components/index.js global
widgets 5
components must not widgets must communicate with servers
None
̣ <a-component> in <a-widget> ̣ <a-component> in <b-component> ̣ <a-widget>
in <a-component>
<script> import CartItem from ‘./CartItem.vue’ export default { components: {
CartItem } } </script> views/Home.vue
App.vue 6
̣ Entry Point ̣ Belongs to nothing ̣ A special
vue file
App.vue views/ components/ widgets/
maintainablevue.com recap
About this slide Noteworthy Optima Impact Color Patterns Main Fonts
vui.github.io AD
THX