vue,vuex,vue-router放在一起能做什么?不用webpack之類的打包工具使用他們是否可行?各位道友在初學vue時是否有這樣的困惑。因為現(xiàn)代構建前端項目的一般模式是:

  • 安裝webapck,某種是glup,grunt,或者是fis等構建工具

  • 然后安裝一個包管理器,npm,bower,或者說是新一代:yarn

  • 再然后用 包管理器 安裝各種各樣的包,如:vue,bootstrap,vuex等。

  • 其后用es6的import或者是node的require引入包

  • 最后通過 構建工具 打包或發(fā)布項目

     在這個過程中你是否發(fā)現(xiàn)開發(fā)者越來越依賴構建工具,你是否想過構建工具幫助我們解決了很多問題,但他也讓你不能快速的感知和了解庫或者框架的本質。這次就簡單點,用vue,vuex,vue-router,但不用webpack做一個示例,主要目的皆在了解這些庫的本質,或者說是是基礎應用。

你能看到的知識點

  • vue-router的簡單應用,包含:基礎配置路由配置,子路由。

  • vuex的應用,包含:多組件共享同一份數據。

  • vue組件生命周期的理解。

代碼結構圖

  • form,comp,life通過路由導航到組件

  • comp中compA和compB是通過子路由導航到組件

  • inputComp + comboComp實現(xiàn)一個輸入數據動態(tài)反映到其他組件的示例

  • lifeUpdate:主要測試組件生命周期中的beforeUpdate勾子

  • compB:展示了inputComp輸入的數據,皆在展示vuex的能力

  • lifeList:測試組件完全生命周期,但不包含beforeUpdate和updatedg兩個勾子

示例展示

photoshop培訓,電腦培訓,電腦維修培訓,移動軟件開發(fā)培訓,網站設計培訓,網站建設培訓

網友評論