2. $ vue init webpack-simple demo
3. $ cd demo/
4. $ cnpm install
5. $ npm run dev前言
我們將會選擇使用一些vue周邊的庫
1.使用node.js後臺,瞭解到如何獲取數據
2.實現單頁路由
3.實現HTTP請求我們的node
4.單項數據流
5.使用.vue文件進行開發
最終我們將會構建出一個小demo,不廢話,直接上圖。
1.我們將會使用webpack去爲我們的模塊打包,預處理,熱加載。如果你對webpack不熟悉,它就是可以幫助我們把多個js文件打包爲1個入口文件,並且可以達到按需加載。這就意味着,我們不用擔心由於使用太多的組件,導致了過多的HTTP請求,這是非常有益於產品體驗的。但我們並不只是爲了這個而使用webpack,我們需要用webpack去編譯.vue文件,如果沒有使用一個loader去轉換我們.vue文件裏的style、js和html,那麼瀏覽器就無法識別。
2.模塊熱加載是webpack的一個非常碉堡的特性,將會爲我們的單頁應用帶來極大的便利。
通常來說,當我們修改了代碼刷新頁面,那應用裏的所有狀態就都沒有了。這對於開發一個單頁應用來說是非常痛苦的,因爲需要重新在跑一遍流程。如果有模塊熱加載,當你修改了代碼,你的代碼會直接修改,頁面並不會刷新,所以狀態也會被保留。
3.Vue也爲我們提供了CSS預處理,所以我們可以選擇在.vue文件裏寫LESS或者SASS去代替原生CSS。
4.我們過去通常需要使用npm下載一堆的依賴,但是現在我們可以選擇Vue-cli。這是一個vue生態系統中一個偉大創舉。這意味着我們不需要手動構建我們的項目,而它就可以很快地爲我們生成。
首先,安裝vue-cli。(確保你有node和npm)
npm i -g vue-cli
然後創建一個webpack項目並且下載依賴
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
export default {
data () {
// 事先模擬一個數據
let existingEntry = {
user: {
name: '二哲',
email: '[email protected]',
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
}
}
}
別忘了爲我們的組件寫上一些需要的樣式
// 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>
export default {
data () {
return {
//模擬一個默認值
timeEntry: {
user: {
name: '二哲',
email: '[email protected]',
image: 'https://sfault-avatar.b0.upaiyun.com/888/223/888223038-5646dbc28d530_huge256'
}
}
}
},
methods: {
save () {
let timeEntry = this.timeEntry
this.$dispatch('timeUpdate', timeEntry)
this.timeEntry = {}
}
}
}
這個組件很簡單就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
組件。
在寫下我們的兩個時間計算方法
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)
}
}
}
最後給出我們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>
export default {
props: ['time']
}
props
就是vue中傳值的寫法,不僅要在我們自定義的標籤上傳入<sidebar :time="totalTime"></sidebar>
,還需要在組件裏js裏定義props: ['time']
最後
本章,我們可以學習到許多關於vue的特性。
1.瞭解了vue-cli腳手架
2.初步對webpack有了一些瞭解和認識
3.如何用.vue愉快的開發
4.父子組件通信
5.路由(子路由)的應用
作者: Kodo
鏈接:http://www.imooc.com/article/details/id/6991
來源:慕課網
本文原創發佈於慕課網 ,轉載請註明出處,謝謝合作!