vue,vuex,vue-router放在一起能做什么?不用webpack之類的打包工具使用他們是否可行?各位道友在初學(xué)vue時(shí)是否有這樣的困惑。因?yàn)楝F(xiàn)代構(gòu)建前端項(xiàng)目的一般模式是:
安裝webapck,某種是glup,grunt,或者是fis等構(gòu)建工具
然后安裝一個(gè)包管理器,npm,bower,或者說是新一代:yarn
再然后用 包管理器 安裝各種各樣的包,如:vue,bootstrap,vuex等。
其后用es6的import或者是node的require引入包
最后通過 構(gòu)建工具 打包或發(fā)布項(xiàng)目
在這個(gè)過程中你是否發(fā)現(xiàn)開發(fā)者越來越依賴構(gòu)建工具,你是否想過構(gòu)建工具幫助我們解決了很多問題,但他也讓你不能快速的感知和了解庫或者框架的本質(zhì)。這次就簡單點(diǎn),用vue,vuex,vue-router,但不用webpack做一個(gè)示例,主要目的皆在了解這些庫的本質(zhì),或者說是是基礎(chǔ)應(yīng)用。
你能看到的知識(shí)點(diǎn)
vue-router的簡單應(yīng)用,包含:基礎(chǔ)配置路由配置,子路由。
vuex的應(yīng)用,包含:多組件共享同一份數(shù)據(jù)。
vue組件生命周期的理解。
代碼結(jié)構(gòu)圖
form,comp,life通過路由導(dǎo)航到組件
comp中compA和compB是通過子路由導(dǎo)航到組件
inputComp + comboComp實(shí)現(xiàn)一個(gè)輸入數(shù)據(jù)動(dòng)態(tài)反映到其他組件的示例
lifeUpdate:主要測試組件生命周期中的beforeUpdate勾子
compB:展示了inputComp輸入的數(shù)據(jù),皆在展示vuex的能力
lifeList:測試組件完全生命周期,但不包含beforeUpdate和updatedg兩個(gè)勾子
示例展示
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
