<a href="http://www.jianshu.com/p/9c59210a99e9">vuejs2.0实战-从零开发todoApp应用并部署上线教程（一）:事前准备</a>
->vuejs2.0实战-从零开发todoApp应用并部署上线教程（二）:代码编写
<a href="http://www.jianshu.com/p/e7222d1c5c35">vuejs2.0实战-从零开发todoApp应用并部署上线教程（三）:部署上线</a>

TodoApp项目文件结构一览

<img alt="todoapp"/>

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

<img alt="src"/>

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

思路大概如下

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

代码实现

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

<template>
  <el-menu default-active="1" class="el-menu-nav" mode="horizontal" @select="handleSelect">

    <el-menu-item index="1">
      <router-link to="/" ><i class="el-icon-menu"></i>
        {{FirstTabName}}</router-link>
    </el-menu-item>

    <el-menu-item index="2">
      <router-link to="/about" ><i class="el-icon-menu"></i>
        {{SecondTabName}}</router-link>
    </el-menu-item>
</template>

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

<img alt="home.vue"/>

<template>
<div id ="apphome">
  <appBottomNav></appBottomNav>
</div>
</template>

<script>
//引入组件
import appBottomNav from '../components/appBottomNav'
  export default{
      components:{
        appBottomNav    //注册该组件
      }
  }
<script>

为了能访问到该视图，用router进行路由管理

//打开 /router文件夹下的 index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)  //vue中要显式声明使用
import home from 'views/home'
//import routerConfig from 'router/router-Config'
//可以分开写到另外一个文件之中

export default new Router({
    routes:[
      {
          path:'/'
          name:'home',
          component:home
      }
    ]
  })

那么到此，相应写好另外的view 并引用好components，便写完了
npm run dev
访问http://localhost:3000即可浏览

一些小坑和Bug

1.“重启试试，多喝热水，喜欢就买”

其中碰到一个小坑就是，webpack在Linux Ubuntu下的自动刷新突然失效了。。。
上网各种搜索无果之后，就猜重启会不会搞得定
然后戏剧性地解决掉了

2.“element-ui的el-input模板无法正常使用v-on:keyup.enter指令”

谷歌一下，发现element-github项目页面有人也碰到这问题，在Issue里面可以找到，这里就不放链接了。

解决方法:给<el-input>标签套个父元素div，然后在此div中使用此指令即可

3.如何在项目中使用Scss语法写style

每一个compoent或者view中都可以自己写css、js来进行样式的变更和逻辑控制
css也能用scss语法， 加上lang="scss"
<style lang="scss"></style>
此时 npm run dev 会提示缺失sass依赖（我没写错，有兴趣的可以去搜一下sass和scss的区别），然后根据提示进行安装即可

npm install sass-loader --save
npm install node-sass --save
npm run dev