<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