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