DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 使用Vue.js創建一個時間跟蹤的單頁應用
使用Vue.js創建一個時間跟蹤的單頁應用
編輯:關於JavaScript     

Vue.js很簡單。正因為如此簡單,人們常常認為其適合於小項目。雖然真正的Vue.js核心知識只是一個視圖層庫,實際上有一組工具,將使您能夠使用Vue.js構建完整的大規模SPA(單頁應用程序)。

SPA應用可以在不完全重新加載網頁,產生一個更流暢的用戶體驗到的用戶交互響應。還有好的副作用,SPA還鼓勵後端專注於展示數據端點,這使得整體架構更加分離,並且對於其他類型的客戶端可能是可重用的。

從開發人員的角度來看,SPA和傳統的後端呈現應用程序之間的主要區別是,我們必須將客戶端視為具有自己架構的應用程序。通常,我們需要處理路由,數據獲取和持久性,查看渲染和必要的構建設置,以便於模塊化代碼庫。

對於基於Vue.js的SPA,下面工具將幫助你:

1.視圖層:Vue.js

2.路由:vue-router,Vue的官方路由器

3.狀態管理:vuex,受Flux/Redux啟發的狀態管理解決方案

4.服務通訊:vue-resource這是和RESTful後端交互的接口

5.構建工具:Webpack和vue-loader進行模塊 熱刷新ES2015和預處理器等重要的組件

視圖層

本系列假設您已經熟悉Vue.js的基礎知識,將Vue.js用於大型SPA時的核心概念是:將應用程序分為許多嵌套的自定義組件。在數據流的組件熟悉props和通訊定義事件直接進行平衡設計,將復雜組件切分為小型解耦的單元,更易於維護。

路由器

官方VUE路由器庫處理客戶端的路由,同時支持哈希模式和HTML5的歷史模式。它與獨立路由庫有點不同,它與Vue.js深度集成,並假設我們將嵌套路由映射到嵌套Vue組件。

當使用vue-router時,我們將組件作為“pages”實現,使用這些組件能夠實現黨路由變化時,鉤子函數被調用。

狀態管理

狀態管理是只有當應用程序復雜性超過一定水平時才出現。當有多個組件需要共享可變的應用程序狀態時,如果您的應用程序中沒有專用於管理此類共享狀態的層,則可能很難推理和維護。

服務器通信

在本案例中,我們會使用RESful後端,這是一個Go語言編寫的 go-vue-event項目

構建工具

首先,整個編譯工具鏈依靠的Node.js ,管理所有使用庫包和工具依賴NPM 。 雖然NPM開始是Node.js後端模塊的包管理器,但它現在也廣泛用於前端包管理。 因為所有NPM包是使用CommonJS模塊格式創建的,我們需要一個特殊的工具將這些模塊“捆綁”到適合最終部署的文件中。 Webpack就是這樣一個工具,你可能也聽說過一個類似的工具Browserify。

我們將使用Webpack的系列,因為它提供了更多的高級功能開箱即用,如熱重新加載,bundle-splitting和靜態文件處理。

無論WebPACK中和Browserify它們暴露的API,使我們能夠裝載更多的CommonJS的模塊:例如,我們可以直接require()的HTML文件通過將其轉化成一個JavaScript字符串。

通過將你的前端的一切,包括HTML,CSS甚至圖像文件看作為模塊依賴,可以在捆綁過程中任意轉換,Webpack實際上涵蓋了構建SPA時遇到的大多數構建任務。 我們主要是要使用WebPACK和普通 NPM腳本 ,而不需要 任務運行器如Gulp或Grunt。

使用vue-loader 激活單頁中Vue組件:

//app.vue
<template>
<h1 class="red">{{msg}}</h1>
</template>
export default{
data(){
return{
msg:'Hello world!'
}
}
}
<style>
.red{
color:#f00;
}
</style>

WebPACK和vue-loader組合能帶來:

1.默認情況下ES2015。 這允許我們今天使用未來的JavaScript語法,產生更具表達性和簡潔的代碼。

2.預埋處理器 。 您可以在單文件Vue組件中使用預處理器,例如使用Jade作為模板,使用SASS作為樣式。

3.Vue組件內部CSS輸出將自動加前綴。 您也可以使用任何PostCSS插件,如果你喜歡。

4.作用域CSS。 通過增加一個scoped屬性添加到<style> ,VUE-loader將通過重寫模板和樣式模擬輸出,特定組件的范圍內的CSS不會影響應用程序的其他部分。

5.熱刷新 。在開發過程中編輯Vue組件時,組件將“熱切換”到正在運行的應用程序中,在不重新加載頁面的情況下維護應用程序狀態。 這極大地提高了開發體驗。

開始設置

現在有了所有這些花哨的功能,對於自己組裝構建棧可能是一個非常艱巨的任務! 幸運的是,Vue公司提供vue-cli ,一個命令行界面,十分容易上手:

npm install -g vue-cli
vue init webpack my-project

回答提示,CLI具有開箱即用特點。 所有你需要做的下一步是:

cd my-project
npm install # install dependencies
npm run dev # start dev server at http://localhost:8080

以上所述是小編給大家介紹的使用Vue.js創建一個時間跟蹤的單頁應用,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved