<a href="http://www.reibang.com/p/9c59210a99e9">vuejs2.0實戰(zhàn)-從零開發(fā)todoApp應用并部署上線教程（一）:事前準備</a>
->vuejs2.0實戰(zhàn)-從零開發(fā)todoApp應用并部署上線教程（二）:代碼編寫
<a href="http://www.reibang.com/p/e7222d1c5c35">vuejs2.0實戰(zhàn)-從零開發(fā)todoApp應用并部署上線教程（三）:部署上線</a>
TodoApp項目文件結構一覽
<img alt="todoapp"/>
其中我們重點關注一下src文件夾，
<img alt="src"/>
大概說一下——
router/ 存放路由文件森枪，
components/ 存放組件桃熄，
views/ 存放視圖層
思路大概如下
先想好大概的APP樣式和布局，
然后劃分好組件躯概，分好后再寫好每一個組件放到components/中
此時把APP一個頁面當成一個視圖，視圖是由哪幾個compoent構成的，就一一導入并定義好甲馋，如同堆積木一樣养泡，寫好視圖文件存放到 views/中
此時利用vue-router 進行頁面路由嗜湃，用來進行切換視圖的管理
代碼實現(xiàn)
此處寫一個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下的自動刷新突然失效了筐乳。。乔妈。
上網(wǎng)各種搜索無果之后蝙云，就猜重啟會不會搞得定
然后戲劇性地解決掉了
2.“element-ui的el-input模板無法正常使用v-on:keyup.enter指令”
谷歌一下，發(fā)現(xiàn)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的區(qū)別）抡医，然后根據(jù)提示進行安裝即可
npm install sass-loader --save
npm install node-sass --save
npm run dev