vuejs2.0入门实战-从零开发一个todoApp应用并部署上线教程(二):代码编写

vuejs2.0实战-从零开发todoApp应用并部署上线教程(一):事前准备
->vuejs2.0实战-从零开发todoApp应用并部署上线教程(二):代码编写
vuejs2.0实战-从零开发todoApp应用并部署上线教程(三):部署上线

TodoApp项目文件结构一览

todoapp

其中我们重点关注一下src文件夹,

src

大概说一下——
router/ 存放路由文件,
components/ 存放组件,
views/ 存放视图层


思路大概如下

先想好大概的APP样式和布局,
然后划分好组件,分好后再写好每一个组件放到components/
此时把APP一个页面当成一个视图,视图是由哪几个compoent构成的,就一一导入并定义好,如同堆积木一样,写好视图文件存放到 views/
此时利用vue-router 进行页面路由,用来进行切换视图的管理


代码实现

此处写一个appBottomNav的组件作为演示
打开components目录,新建appBottomNav.vue文件


此时再来写一个APP的视图层, home.vue

home.vue




                    
                    

你可能感兴趣的:(vuejs2.0入门实战-从零开发一个todoApp应用并部署上线教程(二):代码编写)