(1/2)Vue構建單頁應用最佳實戰

時間  2019-11-06
標籤 vue 構建 單頁 應用 最佳 實戰 简体版
原文   原文鏈接

前言

咱們將會選擇使用一些vue周邊的庫javascript

1.使用node.js後臺，瞭解到如何獲取數據
2.實現單頁路由
3.實現HTTP請求咱們的node
4.單項數據流
5.使用.vue文件進行開發css

最終咱們將會構建出一個小demo，不廢話，直接上圖。
html

安裝

1.咱們將會使用webpack去爲咱們的模塊打包，預處理，熱加載。若是你對webpack不熟悉，它就是能夠幫助咱們把多個js文件打包爲1個入口文件，而且能夠達到按需加載。這就意味着，咱們不用擔憂因爲使用太多的組件，致使了過多的HTTP請求，這是很是有益於產品體驗的。但咱們並不僅是爲了這個而使用webpack，咱們須要用webpack去編譯.vue文件，若是沒有使用一個loader去轉換咱們.vue文件裏的style、js和html，那麼瀏覽器就沒法識別。vue

2.模塊熱加載是webpack的一個很是碉堡的特性，將會爲咱們的單頁應用帶來極大的便利。
一般來講，當咱們修改了代碼刷新頁面，那應用裏的全部狀態就都沒有了。這對於開發一個單頁應用來講是很是痛苦的，由於須要從新在跑一遍流程。若是有模塊熱加載，當你修改了代碼，你的代碼會直接修改，頁面並不會刷新，因此狀態也會被保留。java

3.Vue也爲咱們提供了CSS預處理，因此咱們能夠選擇在.vue文件裏寫LESS或者SASS去代替原生CSS。node

4.咱們過去一般須要使用npm下載一堆的依賴，可是如今咱們能夠選擇Vue-cli。這是一個vue生態系統中一個偉大創舉。這意味着咱們不須要手動構建咱們的項目，而它就能夠很快地爲咱們生成。webpack

首先，安裝vue-cli。(確保你有node和npm)git

npm i -g vue-cligithub

而後建立一個webpack項目而且下載依賴web

vue init webpack vue-time-tracker
cd vue-time-tracker
npm i

接着使用 npm run dev 在熱加載中運行咱們的應用

這一行命令表明着它會去找到package.json的scripts對象，執行node bulid/dev-server.js。在這文件裏，配置了Webpack，會讓它去編譯項目文件，而且運行服務器，咱們在localhost:8080便可查看咱們的應用。

這些都準備好後，咱們須要爲咱們的路由和XHR請求下載兩個庫，咱們能夠從vue的官網中找到他們。

npm i vue-resource vue-router --save

初始化（main.js）

查看咱們的應用文件，咱們能夠在src目錄下找到App.vue和main.js。在main.js文件中，咱們引入Vue和App，而且建立了一個vue的實例（由於在router這行引入了App組件router.start(App, '#app')）

// src/main.js

import Vue from 'vue'
import App from './App.vue'
import Hello from './components/Hello.vue'

import VueRouter from 'vue-router'
import VueResource from 'vue-resource'

//註冊兩個插件
Vue.use(VueResource)
Vue.use(VueRouter)

const router = new VueRouter()

// 路由map
router.map({
  '/hello': {
    component: Hello
  }
})

router.redirect({
  '*': '/hello'
})

router.start(App, '#app')

咱們還須要在index.html包裹下咱們的<app></app>

//index.html

<div id="app">
    <app></app>
</div>

咱們的初始化就到這結束了，接下來讓咱們開始建立別的組件。

建立首頁 View

首先，咱們須要爲咱們的應用增長下bootstrap.css，爲了方便，在這就直接在頭部引入CDN。

<head>
  <meta charset="utf-8">
  <title>計劃板</title>
  <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>

接着在App.vue裏爲咱們的應用寫個頂部導航。

// src/App.vue

<template>
  <div id="wrapper">
    <nav class="navbar navbar-default">
      <div class="container">
        <a class="navbar-brand" href="#">
          <i class="glyphicon glyphicon-time"></i>
          計劃表
        </a>
        <ul class="nav navbar-nav">
          <li><a v-link="'/home'">首頁</a></li>
          <li><a v-link="'/time-entries'">計劃列表</a></li>
        </ul>
      </div>
    </nav>
    <div class="container">
      <div class="col-sm-3">

      </div>
      <div class="col-sm-9">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

除了咱們的navbar之外，咱們還須要一個.container去放咱們其他須要展現的信息。
而且在這裏咱們要放一個router-view標籤，vue-router的切換就是經過這個標籤開始顯現的。

接着，咱們須要建立一個Home.vue做爲咱們的首頁

// src/components/Home.vue

<template>
  <div class="jumbotron">
    <h1>任務追蹤</h1>
    <p>
      <strong>
        <a v-link="'/time-entries'">建立一個任務</a>
      </strong>
    </p>
  </div>
</template>

既然咱們須要顯示Home，那就須要開始配置路由，這很簡單，只須要在main.js裏把Hello.vue換爲Home.vue便可

//...
router.map({
  '/Home': {
    component: Home
  }
})

router.redirect({
  '*': '/Home'
})

建立 任務列表 View

在這個頁面，咱們須要去建立咱們的時間跟蹤列表。

PS:如今這個頁面沒有數據，以後咱們會在後臺配置

// src/components/TimeEntries.vue

<template>
  <div>
    //`v-if`是vue的一個指令
    //`$route.path`是當前路由對象的路徑，會被解析爲絕對路徑當
    //`$route.path !== '/time-entries/log-time'`爲`true`是顯示，`false`，爲不顯示。
    //v-link 路由跳轉地址
    <button
      v-if="$route.path !== '/time-entries/log-time'"
      v-link="'/time-entries/log-time'"
      class="btn btn-primary">
      建立
    </button>

    <div v-if="$route.path === '/time-entries/log-time'">
      <h3>建立</h3>
    </div>

    <hr>

    //下一級視圖
    <router-view></router-view>

    <div class="time-entries">
      <p v-if="!timeEntries.length"><strong>尚未任何任務</strong></p>

      <div class="list-group">
        //v-for 循環渲染
        <a class="list-group-item" v-for="timeEntry in timeEntries">
          <div class="row">

            <div class="col-sm-2 user-details">
            //`:src`屬性，這個是vue的屬性綁定簡寫`v-bind`能夠縮寫爲`:`
            // 好比a標籤的`href`能夠寫爲`:href`
            //而且在vue的指令裏就必定不要寫插值表達式了(`:src={{xx}}`)，vue本身會去解析
              <img :src="timeEntry.user.image" class="avatar img-circle img-responsive" />
              <p class="text-center">
                <strong>
                  {{ timeEntry.user.name }}
                </strong>
              </p>
            </div>

            <div class="col-sm-2 text-center time-block">
              <h3 class="list-group-item-text total-time">
                <i class="glyphicon glyphicon-time"></i>
                {{ timeEntry.totalTime }}
              </h3>
              <p class="label label-primary text-center">
                <i class="glyphicon glyphicon-calendar"></i>
                {{ timeEntry.date }}
              </p>
            </div>

            <div class="col-sm-7 comment-section">
              <p>{{ timeEntry.comment }}</p>
            </div>

            <div class="col-sm-1">
              <button
                class="btn btn-xs btn-danger delete-button"
                //事件綁定簡寫 @xxx
                @click="deleteTimeEntry(timeEntry)">
                X
              </button>
            </div>

          </div>
        </a>

      </div>
    </div>
  </div>
</template>

關於template的解釋，都寫在一塊兒了，再看看咱們的script

// src/components/TimeEntries.vue

<script>
  export default {
    data () {
      // 事先模擬一個數據
      let existingEntry = {
        user: {
          name: '二哲',
          email: 'kodo@forchange.cn',
          image: 'https://sfault-avatar.b0.upaiyun.com/888/223/888223038-5646dbc28d530_huge256'
        },
        comment: '個人一個備註',
        totalTime: 1.5,
        date: '2016-05-01'
      }

      return {
        timeEntries: [existingEntry]
      }
    },
    methods: {
      deleteTimeEntry (timeEntry) {
        //這個方法用於刪除某一項計劃
        let index = this.timeEntries.indexOf(timeEntry)
        if (window.confirm('肯定要刪除嗎?')) {
          this.timeEntries.splice(index, 1)
          //這裏會派發到父組件上，執行父組件events裏的deleteTime方法
          this.$dispatch('deleteTime', timeEntry)
        }
      }
    },
    events: {
      timeUpdate (timeEntry) {
        this.timeEntries.push(timeEntry)
        //繼續向上派發
        return true
      }
    }
  }
</script>

別忘了爲咱們的組件寫上一些須要的樣式

// src/components/TimeEntries.vue

<style>
  .avatar {
    height: 75px;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .user-details {
    background-color: #f5f5f5;
    border-right: 1px solid #ddd;
    margin: -10px 0;
  }
  .time-block {
    padding: 10px;
  }
  .comment-section {
    padding: 20px;
  }
</style>

因爲新增了頁面，因此咱們繼續配置咱們的路由

// src/main.js

import TimeEntries from './components/TimeEntries.vue'

//...

router.map({
  '/home': {
    component: Home
  },
  '/time-entries': {
    component: TimeEntries
  }
})

//...

建立任務組件

這個比較簡單咱們直接給出代碼

// src/components/LogTime.vue

<template>
  <div class="form-horizontal">
    <div class="form-group">
      <div class="col-sm-6">
        <label>日期</label>
        <input
          type="date"
          class="form-control"
          v-model="timeEntry.date"
          placeholder="Date"
        />
      </div>
      <div class="col-sm-6">
        <label>時間</label>
        <input
          type="number"
          class="form-control"
          v-model="timeEntry.totalTime"
          placeholder="Hours"
        />
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-12">
        <label>備註</label>
        <input
          type="text"
          class="form-control"
          v-model="timeEntry.comment"
          placeholder="Comment"
        />
      </div>
    </div>
    <button class="btn btn-primary" @click="save()">保存</button>
    <button v-link="'/time-entries'" class="btn btn-danger">取消</button>
    <hr>
  </div>

</template>

<script>
  export default {
    data () {
      return {
        //模擬一個默認值
        timeEntry: {
          user: {
            name: '二哲',
            email: 'kodo@forchange.cn',
            image: 'https://sfault-avatar.b0.upaiyun.com/888/223/888223038-5646dbc28d530_huge256'
          }
        }
      }
    },
    methods: {
      save () {
          let timeEntry = this.timeEntry
          this.$dispatch('timeUpdate', timeEntry)
          this.timeEntry = {}
        }
    }
  }
</script>

這個組件很簡單就3個input輸入而已，而後就兩個按鈕，保存咱們就把數據push進咱們的列表裏，而且初始化咱們的timeEntry。取消的話，咱們就路由定位到/time-entries便可。

ps:按理來講咱們應該是要填寫6個數據包括名字，郵箱和頭像。但這裏爲了演示就暫時先這樣。之後結合後臺咱們會繼續完善這裏。

LogTime屬於咱們TimeEntries組件的一個子路由，因此咱們依舊須要配置下咱們的router.map

// src/main.js

import LogTime from './components/LogTime.vue'

//...

router.map({
  '/home': {
    component: Home
  },
  '/time-entries': {
    component: TimeEntries,
    subRoutes: {
      '/log-time': {
        component: LogTime
      }
    }
  }
})

//...

建立側邊欄組件

目前咱們首頁左側還有一塊空白，咱們須要它放下一個側邊欄去統計全部計劃的總時間。

// src/App.vue

  //...

  <div class="container">
    <div class="col-sm-3">
      <sidebar :time="totalTime"></sidebar>
    </div>
    <div class="col-sm-9">
      <router-view></router-view>
    </div>
  </div>

  //...

因爲咱們把總時間存放在最上級的父組件上，因此咱們須要把咱們的總時間傳入咱們的sidebar組件。

在寫下咱們的兩個時間計算方法

<script>
  import Sidebar from './components/Sidebar.vue'

  export default {
    components: { 'sidebar': Sidebar },
    data () {
      return {
        totalTime: 1.5
      }
    },
    events: {
      timeUpdate (timeEntry) {
        this.totalTime += parseFloat(timeEntry.totalTime)
      },
      deleteTime (timeEntry) {
        this.totalTime -= parseFloat(timeEntry.totalTime)
      }
    }
  }
</script>

最後給出咱們Sidebar.vue

<template>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h1 class="text-center">已有時長</h1>
    </div>

    <div class="panel-body">
      <h1 class="text-center">{{ time }} 小時</h1>
    </div>

  </div>
</template>

<script>
  export default {
    props: ['time']
  }
</script>

props就是vue中傳值的寫法，不只要在咱們自定義的標籤上傳入<sidebar :time="totalTime"></sidebar> ，還須要在組件裏js裏定義props: ['time']

最後

本章，咱們能夠學習到許多關於vue的特性。

1.瞭解了vue-cli腳手架

2.初步對webpack有了一些瞭解和認識

3.如何用.vue愉快的開發

4.父子組件通訊

5.路由（子路由）的應用

下一章，咱們將會結合node學習vue-resource，更好的完善咱們SPA應用

github地址：https://github.com/MeCKodo/vue-tutorial

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程