1 小书虫app日记—— _视图

【1小书虫app日记——】还记得当年的我们横刀立马，于万军丛中取上将首级嘛？当年YY小说可没少看啊～，漫漫暑期，感觉有什么在召唤我似的，经俺细细一算，原来我命中注定要在此刻造点私货了，咳咳（-_-!!!）其实就是想自己做个小说APP ，顺便写些日记充实下博客。
有两个选择，一个是react ，一个是weex+vue ，本来想用react ，但是基于我用的linux捣鼓半天没调好，然后以前没搞过vue ，就想补补技能树（喜新厌旧暴露无遗），那就weex吧
使用weex的第一步是安装weex-,至于node ， npm之类的就不说了，然后weex创建一个项目（weex），项目成功创建后先跑起来npm start ，就能在自动打开的页面里看到欢迎页面了，手机扫一下二维码下载使用weex-就可以进行手机的真机调试了， weex的特点就是简单易操作，的确给我们省了很多麻烦，只要按照官方文档一步步来，基本不会有问题。
成功跑起来的项目类似下面的截图（不必完全一样，我做了修改），环境就搭建好了。

文章插图
去掉欢迎页面代码，编写我们自己的代码，在src/index.vue的入口文件里删掉多余的代码留下基本框架即可：

文章插图
index.vue是视图文件，与之匹配的就是entry.js文件，如下：

文章插图
有一些事情weex已经帮我们完成了，可以看到引入了路由和index的视图文件，然后创建了一个视图对象实例，路由挂到 / 路由节点，所以打开的是根路由的视图页面。
再看看路由文件.js：

/* global Vue */import Router from 'vue-router'import Helloworld from '@/components/Helloworld'Vue.use(Router)module.exports = new Router({routes: [{path: '/',name: 'Helloworld',component: Helloworld}]})

凭着记忆这就是最开始weex帮我们写好的路由，这肯定是不行的，删除文件的引入（相应的文件也删除，在目录里）对路由表进行改造使其符合我们的要求：

文章插图

文章插图
可以看到，路由里添加了登录页面，而在/挂载下嵌套的单页应用的嵌套路由，既然有相应的路由当然也需要相应的视图文件，改造一下目录结构并创建相应的视图文件：

文章插图
登录页面先创建好基本框架放在一边，就像index.vue类似就行，后面再去细化，我们先看：

文章插图
就像它的名字，主要作用是搭建起单页应用的基本导航架子，我们点击下面的导航按钮，在样式切换的同时使用this.$.push() 将路径添加到路由，切换视图。
看看最终效果，样式的代码唠唠没意思，就省略了：

文章插图
第一篇是搭起基本架子，博客是在写好之后加的，所以节奏略快，后面想到哪里做哪里，就先这样吧，未完待续