<a href="http://www.lxweimin.com/p/9c59210a99e9">vuejs2.0實戰-從零開發todoApp應用并部署上線教程（一）:事前準備</a>
->vuejs2.0實戰-從零開發todoApp應用并部署上線教程（二）:代碼編寫
<a href="http://www.lxweimin.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