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

SPA應(yīng)用可以在不完全重新加載網(wǎng)頁，產(chǎn)生一個更流暢的用戶體驗到的用戶交互響應(yīng)。還有好的副作用，SPA還鼓勵后端專注于展示數(shù)據(jù)端點，這使得整體架構(gòu)更加分離，并且對于其他類型的客戶端可能是可重用的。

從開發(fā)人員的角度來看，SPA和傳統(tǒng)的后端呈現(xiàn)應(yīng)用程序之間的主要區(qū)別是，我們必須將客戶端視為具有自己架構(gòu)的應(yīng)用程序。通常，我們需要處理路由，數(shù)據(jù)獲取和持久性，查看渲染和必要的構(gòu)建設(shè)置，以便于模塊化代碼庫。

對于基于Vue.js的SPA，下面工具將幫助你：

1.視圖層：Vue.js

2.路由：vue-router，Vue的官方路由器

3.狀態(tài)管理：vuex，受Flux/Redux啟發(fā)的狀態(tài)管理解決方案

4.服務(wù)通訊：vue-resource這是和RESTful后端交互的接口

5.構(gòu)建工具：Webpack和vue-loader進行模塊 熱刷新ES2015和預(yù)處理器等重要的組件

視圖層

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

路由器

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

當使用vue-router時，我們將組件作為“pages”實現(xiàn)，使用這些組件能夠?qū)崿F(xiàn)黨路由變化時，鉤子函數(shù)被調(diào)用。

狀態(tài)管理

狀態(tài)管理是只有當應(yīng)用程序復(fù)雜性超過一定水平時才出現(xiàn)。當有多個組件需要共享可變的應(yīng)用程序狀態(tài)時，如果您的應(yīng)用程序中沒有專用于管理此類共享狀態(tài)的層，則可能很難推理和維護。

服務(wù)器通信

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

構(gòu)建工具

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

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

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

通過將你的前端的一切，包括HTML，CSS甚至圖像文件看作為模塊依賴，可以在捆綁過程中任意轉(zhuǎn)換，Webpack實際上涵蓋了構(gòu)建SPA時遇到的大多數(shù)構(gòu)建任務(wù)。 我們主要是要使用WebPACK和普通 NPM腳本 ，而不需要 任務(wù)運行器如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語法，產(chǎn)生更具表達性和簡潔的代碼。

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

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

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

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

開始設(shè)置

現(xiàn)在有了所有這些花哨的功能，對于自己組裝構(gòu)建棧可能是一個非常艱巨的任務(wù)！ 幸運的是，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創(chuàng)建一個時間跟蹤的單頁應(yīng)用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論