Vue2實踐揭秘
  • 推薦2
  • 收藏5
  • 瀏覽2.7K

Vue2實踐揭秘

梁睿坤 (作者) 

  • 書  號:978-7-121-31068-3
  • 出版日期:2017-04-14
  • 頁  數:304
  • 開  本:16(185*235)
  • 出版狀態:上市銷售
本書以Vue2的實踐應用為根基,從實際示例入手,詳細講解Vue2的基礎理論應用及高級組件開發,通過簡明易懂的實例代碼,生動地讓讀者快速、全方位地掌握Vue2的各種入門技巧以及一些在實際項目中的寶貴經驗。
本書除了全面、細致地講述Vue2的生態結構、實際編程技巧和一些從實踐中得到的經驗,還重點介紹如何以組件化編程思想為指導,以前端工程化方法為實現手段來實踐Vue2,通過組件的單元測試和E2E測試來保證工程質量。

1.揭秘Vue2生態結構、實際編程技巧
2.以組件化編程思想為指導,以前端工程化方法為手段來實踐Vue2
前 言
寫作背景
我從事軟件開發至今接近18年了,在我進入這個行業之前,只有軟件工程師與硬件工程師之分,并沒有什么前端工程師或者后端工程師之說。前端后端都得懂,否則根本找不到工作。當然,現在對于前端工程師與后端工程師的劃分是由于軟件技術發展實在太快了,兩個方向已經發展成各自獨立的體系,前端開發由于技術的革新、移動端的崛起,其地位顯得越來越重要。
我是從jQuery 1.0開始真正地接受前端工程化開發概念的,也是從那時對 JavaScript產生了一發而不可收的興趣。因為前端工程化能使項目的體系結構更加合理,那些在后端實現起來極為繁雜的交互操作以一種最“輕巧”的方式給取代了。當第一次遇到Angular之時我更是興奮不已,它簡直就是為傳統工程師或者說是后端工程師配備的最強大的前端武器!雖然Angular的入門曲線非常陡峭,很多內容都極為晦澀難懂,但它與jQuery一樣,可以算得上是前端架構發展史上的一座豐碑。
軟件領域中后者永遠具有更大的吸引力,在前端開發領域,React可以說是繼Angular之后又一震撼整個前端開發圈子的重磅炸彈。與Angular相比,它大大降低了學習的成本,同時擁有極高效的運行效能,使之一下子蓋過了Angular的風頭。Angular與React兩套前端框架的崛起也掀起了整個前端開發圈的一股革命,實際上我們都清楚這是Google與Facebook之間對開發者的一種爭奪手段。對于一直從事實戰領域應用的開發者而言,雖然有更多的選擇是好事,但“誰更好用?”,“誰更強大?”這類選擇困難癥也將伴隨而來。
Angular與React各有優劣,很難從綜合性上來評判誰比誰更好,加上Angular2的誕生,使得我們更難以從中選擇最合心意的框架了,可能最熟悉的就自然成為最好的了吧。
2016年我和我的團隊所從事的Web項目由于需要有大量界面交互功能,因此我引入了Angular2 + Flask的搭配方式作為項目的基礎語言架構。然而,我的團隊大多數是由從事多年后端開發和系統開發的工程師所組成,他們對當下前沿的前端技術涉獵并不算深入,我只能不斷地進行內部培訓以快速提升團隊的前端開發實力。Angular2一直處于Beta狀態,而且相關的官方開發文檔一直缺失,開發與測試工具的發展也相對滯后,在實際使用過程中,TypeScript這個將弱類型化的JS強制變成強類型語言的怪胎在不斷地給我們制造麻煩,除了讓團隊接受Angular2對Angular的優化模式,還得不斷地在各種大坑中求生存,這毫無疑問對于我和我的團隊是一種極大的挑戰。當時我非常擔心由于選擇了Angular2而導致項目失敗,中途曾想過用React對之加以取代。但從實際出發,這只是一種換湯不換藥的方案而已,直至我們偶然間遇到了Vue,Vue可以說給予我們項目生的希望!選中了Vue是因為我和我的團隊只是付出了極小的代價,甚至可以說是毫無障礙地將Angular2上開發的代碼切換到Vue上面來,Vue的開發工具鏈雖說沒有Angular.js完備,但有vue-cli的輔助,也基本能應付項目開發的需要,架構理論上幾乎就是對Angular.js的簡化。更吸引我們的是,這是一個由我們中國人開發的前端框架!而且適合我們項目使用的社區資源也非常豐富,性能、工具鏈、學習曲線、極小的運行庫這些優點一下就完全彌補了Angular的不足,也成為了我們項目最后能守住的最堅實的防線。
編撰此書出于一次巧合,我們在升級到Vue2之后我一直想找一本能系統化、全面地講述Vue2開發的書籍作為我團隊的培訓教材,但很可惜一直無法找到。出于一時的心血來潮,突然間想將我們在實踐中應用Vue2的一些技巧和方法記錄下來編撰成書,此時也得到了本書的策劃編輯陳曉猛先生給予我的鼓勵與支持才得以成書。
此書從構思到成書用了接近4個月,實際上花在編撰上的時間估計也只是一個月左右,其他的時間都用在了準備素材與寫代碼上。本書中的素材都取自我參與過的項目,在此過程中我對Vue2的實踐應用也有了很大的提高與深化。期望此書能為正在奮斗于前端開發工作的同行們帶來幫助,同時也作為我對Vue團隊的一種支持。Vue是一款能與世界級的Angular與React比肩的前端框架,更重要的是它是由我們中國人“智造”的!
內容介紹
本書以Vue2的理論為中心,以實戰示例為基礎,通過示例應用展開覆蓋Vue的各個理論知識點。本書從實踐應用出發,對Vue官方未曾進行詳盡說明甚至不曾提及的實用內容進行揭秘,試圖使此書能成為你在Vue前端工程化開發實戰中的參考手冊。本書主要從多個示例由淺入深地講述Vue的使用知識,除此之外,還重點介紹了Vue工程化開發中必備的源碼庫、第三方開發工具以及如何對Vue的各種模塊進行全方位的測試。
第1章 從一個經典的“待辦事項”(TODOs)示例入手,從零開始介紹Vue的入門知識,包括插值、數據綁定、屬性與樣式綁定和組件的基本概念與用法。
第2章 講述如何為Vue建立一個真實的工程化開發的環境,以及工程化環境下第三方工具的基本使用與配置,其中包括:vue-cli、webpack、Karma、Phantom、Mocha、Sinon、Chai和Nightwatch。
第3章 介紹Vue的路由機制和Vue生態系統中最重要的一個成員——vue-router 的基本使用方法。
第4章 通過手機書店示例來介紹組件化理論與Vue組件的設計與實現的具體方法,包括抽象組件的基本方法,如何用Vue對組件進行封裝,如何從界面中提取公共的數據接口,如何在沒有實現服務端的情況下運行Vue程序以及怎樣創建復雜的復合型組件。
第5章 全方位地講述Vue的測試與調試過程中使用到技術與工具,包括Mocha的使用方法,如何為組件編寫單元測試,如何在運行期和單元測試中進行調試,如何進行端對端測試。
第6章 通過一個非常普遍且實用的圖書管理示例講述Vue在實現一個具有復雜操作的界面時所采用的技術知識點,以及Vue組件的高級用法。例如視圖的排序、分頁、查找,多行刪除的設計與實現,通過表單處理圖書數據的添加、編輯和數據驗證,如何用組件化的設計方法封裝Vue組件以實現最大限度的組件重用。
第7章 介紹Vue生態結構中針對規模龐大的前端程序進行狀態管理的利器Vuex,通過實例對Vuex的應用原則和結構組成進行一一剖析,講述如何將各種本來混亂的組件狀態通過Vuex來將其進行分離,每個部分應該如何設計與編碼,如何進行測試,最終使Vue前端工程架構變得更為合理。
本書相關源碼
? 本書源碼匯總——https://github.com/DotNetAge/vue-in-action;
? vue-todos——第1章例說Vue.js的示例源碼https://github.com/DotNetAge/vue-todos;
? vue-shop——第3章路由與頁面間導航的示例源碼https://github.com/DotNetAge/vue- shop;
? vue-curd——第6章視圖與表單的處理的示例源碼 https://github.com/DotNetAge/ vue-curd;
? V-UIkit——UIkit for Vue2的組件庫,構思源于第4章組件化的設計與實現方法的內容https://dotnetage.github.io/vue-ui/;
? vue-nvd3——基于NVD3開發的Vue2的組件庫https://github.com/DotNetAge/vue- nvd3;
? vue-easy-pie-chart——基于easy pie chart開發的環狀圖組件庫https://github.com/ DotNetAge/vue-easy-pie-chart。
勘誤和交流
本書如有勘誤,會在https://github.com/DotNetAge/vue-in-action上發布。由于筆者能力有限,時間倉促,書中難免有錯漏,歡迎讀者批評指正。讀者也可以到博文視點官網的本書頁面進行交流(www.5764402.live/31068)。
您也可以直接聯系我:
? 博客園:http://www.cnblogs.com/ray-liang
? 簡書:http://www.jianshu.com/u/5c81d3d72b56
? 郵箱:[email protected]
? 微博:廣州亞睿
? GitHub:https://github.com/dotnetage
致謝
首先,感謝電子工業出版社博文視點公司的陳曉猛編輯,是您鼓勵我將本書付諸成冊,并在我寫作過程中審閱了大量稿件,給予我很多指導和幫助。感謝工作在幕后的電子工業出版社評審團隊對于本書在校對、排版、審核、封面設計、錯誤改進方面所給予的幫助,使本書得以順利出版發行。其次,感謝在我十幾年求學生涯中教育過我的所有老師,是你們將知識和學習方法傳遞給了我。感謝我曾經工作過的公司和單位,感謝和我一起共事過的同事和戰友,你們的優秀一直是我追逐的目標,你們所給予的壓力正是我不斷改進自己的動力。
感謝我的父母和兒子。由于撰寫本書,犧牲了很多陪伴家人的時間。感謝你們對我工作的理解和支持。
2017年2月16日梁睿坤于廣州

目錄

目錄

前言
第1章 - 例說Vue.js
1.1 插值
1.2 數據綁定
1.3 樣式綁定
1.4 過濾器
第2章 - 工程化的Vue.js開發
2.1 - 腳手架 vue-cli
2.2 - 深入 vue-cli 的工程模板
2.3 - Vue工程的Webpack配置與基本用法
2.4 - 基于Karma+Phantom+Mocha+Sinon+Chai的單元測試環境
2.5 - 基于Nightwatch的端到端測試環境
第3章 - 路由與頁面間導航
3.1 - vue-router
3.2 - 路由的模式
3.3 - 路由與導航
3.4 - 導航狀態與樣式
3.5 - URL的替換和追加
3.6 - 關于Fallback
3.7 - 小結
第4章 - 組件化的設計與實現方法
4.1 - 頁面邏輯的實現
4.2 - 封裝可重用組件
4.3 - 自定義事件
4.4 - 數據接口的分析與提取
4.5 - 從服務端獲取數據
4.6 - 創建復合型的模板組件
4.7 - 數據模擬
4.8 - 小結
4.9 - 擴展閱讀 - Vue組件的繼承 mixin
第5章 - VUE的測試與調試技術
5.1 - Mocha入門
5.2 - 組件的單元測試方法
5.3 - 單元測試中的仿真技術
5.3.1 - 調用偵測
5.3.2 - Sinon斷言擴展
5.3.3 - 存根
5.3.4 - 接口仿真
5.3.5 - 后端服務仿真
5.4 - 調試
5.5 - Nightwatch入門
5.5.1 - 編寫端到端測試
5.5.2 - 鉤子函數與異步測試
5.5.3 - 全局模塊與Nightwatch調試
5.5.4 - Page Objects 模式
5.5.4.1 - 元素
5.5.4.2 - 分段
5.5.4.3 - 命令
第6章 - 視圖與表單的處理
6.1 - 為Vue2集成uikit
6.2 - 表格視圖的實現
6.2.1 - 實時數據篩選
6.2.2 - 多行數據的選擇
6.2.3 - 排序的實現
6.3 - 單一職責原則與高級組件開發方法
6.3.1 - 搜索區組件
6.3.2 - 母板組件
6.3.3 - 重構模態對話框組件
6.3.4 - 高級組件與Render方法
6.3.5 - UIKit按鈕組件
6.3.6 - 通用表格組件
6.4 - 表單的設計與實現
6.4.1 - 計算屬性的雙向綁定
6.4.2 - 富文本編輯器的實現
6.4.3 - 嵌套式分頁容器組件
6.4.4 - 表單的驗證
6.5 - 接入服務端與CRUD的簡化
6.6 - HTTP攔截器
6.7 - 開發服務器的定制
第7章 - VUEX狀態管理
7.1 - Vuex的基本結構
7.2 - data的替代者-State和Getter
7.3 - 測試getter
7.4 - Action-操作的執行者
7.5 - 測試Action
7.6 - 只用Mutation修改狀態
7.7 - 測試mutations
7.8 - 子狀態與模塊
7.9 - 用服務分離外部操作
附錄 - Chai斷言參考
附錄 - Vee-Validate驗證規則參考

本書勘誤

印次
  • 頁碼:57  •  行數:10  •  印次: 1

    錯誤的原文:export default = new VueRouter({})
    應該修改為:export default new VUeRouter({}) (修改的地方就是把”=“去掉)

    一江秋 提交于 2017/4/30 8:51:00
    陳曉猛 確認于 2017/5/4 12:39:51
  • 頁碼:72  •  行數:22  •  印次: 1

    如果使用Nodek.js作為服務端的話,修改為【如果使用Node.js作為服務端的話】

    陳曉猛 提交于 2017/5/26 10:40:57
    陳曉猛 確認于 2017/5/26 10:41:34

讀者評論

  • 建議建立一個群,有什么問題大家可以問一下?;蛘咴谝粋€社區提出自己的問題。

    hst發表于 2017/8/6 18:27:20
    • 可以在本頁留下您的問題,和其他讀者一起交流

      陳曉猛發表于 2017/8/7 9:14:12
  • 初學vue,買了這本書。和官網api不一樣??!還是實際的項目寫法就是這樣?

    hst發表于 2017/8/6 18:25:58
    • VUE在不斷更新,書中的內容有些可能和官網不一樣,這個也要看您使用的是vue哪個版本

      陳曉猛發表于 2017/8/17 11:29:54

相關博文

  • 為Vue2集成UIkit

    為Vue2集成UIkit

    管理員賬號 2017-04-26

    小編說:Vue只是為我們提供了一個很優秀的前端組件式開發框架,但單純依靠Vue是做不出一個漂亮的網頁應用的,甚至連“不難看”這個標準都達不到。這個時候借助界面框架UIkit能夠很好地解決這一問題。 在實際開發中,還有很多常用組件,例如...

    管理員賬號 2017-04-26
    626 0 0 0

推薦用戶

相關圖書

Keynote 完全手冊

陳天舒(SkyChen ) (作者)

這是一本關于如何思考、設計、制作Keynote(演示文稿)的完整書籍。讓讀者對設計、制作 Keynote 有全新自我認識后再加以實踐操作。無論讀者是學生需要制作...

¥79.00

商業智能數據分析:基于Power BI 和Tableau

雷元 (作者)

本書以實際業務為背景,介紹市面上最流行的兩種自助型商業分析工具—— Power BI 和 Tableau的功能和特色。全書主要內容包括基本的商業數據分析基礎、B...

¥69.80

Power Query:基于Excel 和 Power BI的M函數詳解及應用

李小濤 (作者)

Power Query的界面操作只能發揮其全部能力的20%,剩余80%的能力都要通過M函數來實現。M函數是Power Query專用的函數,使用M函數可以幫助我...

¥59.00

揭秘Angular(第2版)

作為一部系統講解流行前端框架Angular 新版的權威著作,《揭秘Angular(第2版)》覆蓋入門、深入和實戰三大主題。第一部分從前端的故事起點說起,然后對A...

¥118.00

白話統計

馮國雙 姚新軍 羅應婷 (作者)

一本書如果沒有作者自己的觀點,而只是知識的堆疊,那么這類書是沒有太大價值的。尤其<br>在當前網絡發達的時代,幾乎任何概念和知識點都可以從網絡上查到。但是有一點...

¥69.00

React前端技術與工程實踐

李晉華 (作者)

本書是一本專門介紹React前端框架基本原理及其相關工程實踐的技術參考書。全書共分為13章,主要講解React技術基本原理、相關前端開發工具鏈、React高級技...

¥45.00
kof雅典娜赚钱方法中文 广西11选五基本走势图 股票涨跌的本质 福彩江苏快三怎么玩 秒速赛车开奖数据 股票配资平台合法吗 上海时时乐综合走势图 黄大仙四不像肖图片 好彩1历史开奖结果 上证指数股吧论坛 加拿大卑斯快乐8官网