小书虫app日记——（1）

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

成功跑起来的项目类似下面的截图（不必完全一样，我做了修改），环境就搭建好了。

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

<template>
  <div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
    }
  }
}
</script>

<style scoped>

</style>

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

有一些事情weex已经帮我们完成了，可以看到引入了路由和index的视图文件，然后创建了一个视图对象实例，路由挂到 / 路由节点，所以打开的是根路由的视图页面。
再看看路由文件router.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帮我们写好的路由，这肯定是不行的，删除HelloWorld文件的引入（相应的文件也删除，在components目录里）对路由表进行改造使其符合我们的要求：

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

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

就像它的名字，主要作用是搭建起单页应用的基本导航架子，我们点击下面的导航按钮，在样式切换的同时使用this.$router.push() 将路径添加到路由，切换视图。

看看最终效果，样式的代码唠唠没意思，就省略了：

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