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
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
640
Oracle Cloud Infrastructure:2025年2月度サービス・アップデート
oracle4engineer
PRO
1
140
レビューを増やしつつ 高評価維持するテクニック
tsuzuki817
1
480
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
ホワイトボードチャレンジ 説明&実行資料
ichimichi
0
120
Postman Flowsの基本 / Postman Flows Basics
yokawasa
1
100
開発組織のための セキュアコーディング研修の始め方
flatt_security
3
1.4k
Building Products in the LLM Era
ymatsuwitter
10
5k
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
920
アジャイル開発とスクラム
araihara
0
170
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
670
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
BBQ
matthewcrist
86
9.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Embracing the Ebb and Flow
colly
84
4.6k
Agile that works and the tools we love
rasmusluckow
328
21k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
GitHub's CSS Performance
jonrohan
1030
460k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
4 Signs Your Business is Dying
shpigford
182
22k
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