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.4k
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.8k
Accessibility
lepture
0
300
Other Decks in Technology
See All in Technology
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
0
420
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
5
4.6k
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
370
OpenHands🤲にContributeしてみた
kotauchisunsun
1
500
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
610
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
110
asken AI勉強会(Android)
tadashi_sato
0
140
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
340
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
440
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
240
Geminiとv0による高速プロトタイピング
shinya337
0
200
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
1
470
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Scaling GitHub
holman
459
140k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Facilitating Awesome Meetings
lara
54
6.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
720
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
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