vuejs2.0入門實戰-從零開發一個todoApp應用并部署上線教程(二):代碼編寫

<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
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容