使用Vue.js創(chuàng)建一個(gè)時(shí)間跟蹤的單頁(yè)應(yīng)用
Vue.js很簡(jiǎn)單。正因?yàn)槿绱撕?jiǎn)單,人們常常認(rèn)為其適合于小項(xiàng)目。雖然真正的Vue.js核心知識(shí)只是一個(gè)視圖層庫(kù),實(shí)際上有一組工具,將使您能夠使用Vue.js構(gòu)建完整的大規(guī)模SPA(單頁(yè)應(yīng)用程序)。
SPA應(yīng)用可以在不完全重新加載網(wǎng)頁(yè),產(chǎn)生一個(gè)更流暢的用戶體驗(yàn)到的用戶交互響應(yīng)。還有好的副作用,SPA還鼓勵(lì)后端專注于展示數(shù)據(jù)端點(diǎn),這使得整體架構(gòu)更加分離,并且對(duì)于其他類型的客戶端可能是可重用的。
從開發(fā)人員的角度來(lái)看,SPA和傳統(tǒng)的后端呈現(xiàn)應(yīng)用程序之間的主要區(qū)別是,我們必須將客戶端視為具有自己架構(gòu)的應(yīng)用程序。通常,我們需要處理路由,數(shù)據(jù)獲取和持久性,查看渲染和必要的構(gòu)建設(shè)置,以便于模塊化代碼庫(kù)。
對(duì)于基于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進(jìn)行模塊 熱刷新ES2015和預(yù)處理器等重要的組件
視圖層
本系列假設(shè)您已經(jīng)熟悉Vue.js的基礎(chǔ)知識(shí),將Vue.js用于大型SPA時(shí)的核心概念是:將應(yīng)用程序分為許多嵌套的自定義組件。在數(shù)據(jù)流的組件熟悉props和通訊定義事件直接進(jìn)行平衡設(shè)計(jì),將復(fù)雜組件切分為小型解耦的單元,更易于維護(hù)。
路由器
官方VUE路由器庫(kù)處理客戶端的路由,同時(shí)支持哈希模式和HTML5的歷史模式。它與獨(dú)立路由庫(kù)有點(diǎn)不同,它與Vue.js深度集成,并假設(shè)我們將嵌套路由映射到嵌套Vue組件。
當(dāng)使用vue-router時(shí),我們將組件作為“pages”實(shí)現(xiàn),使用這些組件能夠?qū)崿F(xiàn)黨路由變化時(shí),鉤子函數(shù)被調(diào)用。
狀態(tài)管理
狀態(tài)管理是只有當(dāng)應(yīng)用程序復(fù)雜性超過一定水平時(shí)才出現(xiàn)。當(dāng)有多個(gè)組件需要共享可變的應(yīng)用程序狀態(tài)時(shí),如果您的應(yīng)用程序中沒有專用于管理此類共享狀態(tài)的層,則可能很難推理和維護(hù)。
服務(wù)器通信
在本案例中,我們會(huì)使用RESful后端,這是一個(gè)Go語(yǔ)言編寫的 go-vue-event項(xiàng)目
構(gòu)建工具
首先,整個(gè)編譯工具鏈依靠的Node.js ,管理所有使用庫(kù)包和工具依賴NPM 。 雖然NPM開始是Node.js后端模塊的包管理器,但它現(xiàn)在也廣泛用于前端包管理。 因?yàn)樗蠳PM包是使用CommonJS模塊格式創(chuàng)建的,我們需要一個(gè)特殊的工具將這些模塊“捆綁”到適合最終部署的文件中。 Webpack就是這樣一個(gè)工具,你可能也聽說過一個(gè)類似的工具Browserify。
我們將使用Webpack的系列,因?yàn)樗峁┝烁嗟母呒?jí)功能開箱即用,如熱重新加載,bundle-splitting和靜態(tài)文件處理。
無(wú)論WebPACK中和Browserify它們暴露的API,使我們能夠裝載更多的CommonJS的模塊:例如,我們可以直接require()的HTML文件通過將其轉(zhuǎn)化成一個(gè)JavaScript字符串。
通過將你的前端的一切,包括HTML,CSS甚至圖像文件看作為模塊依賴,可以在捆綁過程中任意轉(zhuǎn)換,Webpack實(shí)際上涵蓋了構(gòu)建SPA時(shí)遇到的大多數(shù)構(gòu)建任務(wù)。 我們主要是要使用WebPACK和普通 NPM腳本 ,而不需要 任務(wù)運(yùn)行器如Gulp或Grunt。
使用vue-loader 激活單頁(yè)中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組合能帶來(lái):
:
1.默認(rèn)情況下ES2015。 這允許我們今天使用未來(lái)的JavaScript語(yǔ)法,產(chǎn)生更具表達(dá)性和簡(jiǎn)潔的代碼。
2.預(yù)埋處理器 。 您可以在單文件Vue組件中使用預(yù)處理器,例如使用Jade作為模板,使用SASS作為樣式。
3.Vue組件內(nèi)部CSS輸出將自動(dòng)加前綴。 您也可以使用任何PostCSS插件,如果你喜歡。
4.作用域CSS。 通過增加一個(gè)scoped屬性添加到<style> ,VUE-loader將通過重寫模板和樣式模擬輸出,特定組件的范圍內(nèi)的CSS不會(huì)影響應(yīng)用程序的其他部分。
5.熱刷新 。在開發(fā)過程中編輯Vue組件時(shí),組件將“熱切換”到正在運(yùn)行的應(yīng)用程序中,在不重新加載頁(yè)面的情況下維護(hù)應(yīng)用程序狀態(tài)。 這極大地提高了開發(fā)體驗(yàn)。
開始設(shè)置
現(xiàn)在有了所有這些花哨的功能,對(duì)于自己組裝構(gòu)建棧可能是一個(gè)非常艱巨的任務(wù)! 幸運(yùn)的是,Vue公司提供vue-cli ,一個(gè)命令行界面,十分容易上手:
npm install -g vue-cli vue init webpack my-project
回答提示,CLI具有開箱即用特點(diǎn)。 所有你需要做的下一步是:
cd my-project npm install # install dependencies npm run dev # start dev server at http://localhost:8080
以上所述是小編給大家介紹的使用Vue.js創(chuàng)建一個(gè)時(shí)間跟蹤的單頁(yè)應(yīng)用,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 使用Vue開發(fā)一個(gè)實(shí)時(shí)性時(shí)間轉(zhuǎn)換指令
- vue與bootstrap實(shí)現(xiàn)時(shí)間選擇器的示例代碼
- 詳解vue2.0的Element UI的表格table列時(shí)間戳格式化
- vue時(shí)間格式化實(shí)例代碼
- vue2.0 自定義日期時(shí)間過濾器
- vue2.0實(shí)現(xiàn)倒計(jì)時(shí)的插件(時(shí)間戳 刷新 跳轉(zhuǎn) 都不影響)
- vue.js將unix時(shí)間戳轉(zhuǎn)換為自定義時(shí)間格式
- vue.js實(shí)現(xiàn)仿原生ios時(shí)間選擇組件實(shí)例代碼
- VUEJS實(shí)戰(zhàn)之修復(fù)錯(cuò)誤并且美化時(shí)間(2)
- Vue實(shí)現(xiàn)點(diǎn)擊時(shí)間獲取時(shí)間段查詢功能
相關(guān)文章
Vue使用vue-pdf實(shí)現(xiàn)PDF文件預(yù)覽
這篇文章主要為大家詳細(xì)介紹了Vue如何使用vue-pdf實(shí)現(xiàn)PDF文件預(yù)覽的功能,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,感興趣的可以了解一下2023-03-03關(guān)于Vue背景圖打包之后訪問路徑錯(cuò)誤問題的解決
本篇文章主要介紹了關(guān)于Vue背景圖打包之后訪問路徑錯(cuò)誤問題的解決,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-11-11vue2.0+vue-router構(gòu)建一個(gè)簡(jiǎn)單的列表頁(yè)的示例代碼
這篇文章主要介紹了vue2.0+vue-router構(gòu)建一個(gè)簡(jiǎn)單的列表頁(yè)的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2019-02-02簡(jiǎn)單實(shí)現(xiàn)vue中的依賴收集與響應(yīng)的方法
這篇文章主要介紹了簡(jiǎn)單實(shí)現(xiàn)vue中的依賴收集與響應(yīng)的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2019-02-02vue+Element實(shí)現(xiàn)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了vue+Element實(shí)現(xiàn)分頁(yè)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09vue兩個(gè)輸入框聯(lián)動(dòng)校驗(yàn)方式(最大值-最小值)
這篇文章主要介紹了vue兩個(gè)輸入框聯(lián)動(dòng)校驗(yàn)方式(最大值-最小值),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10Vue在頁(yè)面數(shù)據(jù)渲染完成之后的調(diào)用方法
今天小編就為大家分享一篇Vue在頁(yè)面數(shù)據(jù)渲染完成之后的調(diào)用方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-09-09