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.1k
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.5k
Accessibility
lepture
0
240
Other Decks in Technology
See All in Technology
社内アプリで Cloudflare D1を プロダクト運用してみた体験談(Tokyo)
haochenx
0
120
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
830
BPStudyの200回を中心にIT業界を振り返る。そしてこれから
haru860
3
420
web-application-security
matsuihidetoshi
1
200
AWSやJAWS-UGとの出会いを振り返る
yoyoyopg
1
110
MixIT 2024 - Pulumi : Gérer son infra avec son langage de programmation préféré
ju_hnny5
1
120
Handling focus in 2024
tahia910
0
240
競技としてのKaggle、役に立つKaggle
yu4u
6
2.4k
成長をサポートするピープルマネジメントのやり方
sioncojp
9
1.3k
EM完全に理解した と思ったけど、 やっぱり何も分からなかった話 / EM Night Fukuoka #1
hirutas
0
300
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
720
ルーターでプレゼンする
puhitaku
1
3.3k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Six Lessons from altMBA
skipperchong
22
3k
Bash Introduction
62gerente
605
210k
RailsConf 2023
tenderlove
9
560
Done Done
chrislema
178
15k
Thoughts on Productivity
jonyablonski
60
3.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
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