您的位置:首頁>>電腦軟件

Vue開發者指南:2019你最需要學些什么?

發布時間:2019-07-08 17:23:21  來源:互聯網    背景:

  作為 Vue 的初學者,您或許已經聽過很多關于它的專業術語了,例如:單頁面應用程序、異步組件、服務器端呈現等,您可能還聽過和Vue經常一起被提到的工具和庫,如Vuex、Webpack、Vue CLI和Nuxt。

  面對這些海量、未知的專業術語和工具,您很可能會感到無助和絕望,沒關系,這是所有新手在初次接觸Vue時都會有的感受。

  Vue龐大的體系和生態,很可能會讓您無所適從。為了便于您更清晰的理解Vue的體系架構,在這里我將為您展示 “2019年Vue開發者知識圖譜”,它包含了所有 Vue 開發過程中的關鍵部分。您可以參考這個圖譜,為您在未來學習Vue的框架指引方向。

  0. JavaScript和Web開發基礎

  如果我讓你去閱讀純英文書籍,那么你應該先學習英文,對嗎?

  同樣,Vue是一個用于構建Web用戶界面的JavaScript框架。在開始使用Vue之前,您至少必須先掌握JavaScript和Web開發的基礎知識。

  1. Vue的基本概念

  如果您是一名Vue的萌新開發者,您應該更專注于Vue.js 生態系統的核心,它包括Vue核心庫、Vue Router和Vuex。因為這些工具將會在絕大部分的Vue應用程序中出現。

  Vue核心功能

  在一般情況下,Vue將網頁和JavaScript保持同步,實現這一目標的特性是響應式數據指令和插值等模板功能,這些都是第一天需要學習的內容。

  在構建你的第一個Vue應用之前,你還必須要去了解如何在網頁中安裝/使用Vue,以及了解Vue引用實例的生命周期。

  組件

  Vue的組件是可重復使用、且相互獨立的UI元素。您首先需要學習,如何聲明組件,及如何通過屬性和事件使組件間達成通信。同時,學會組合組件也同樣重要,這決定了你能否使用Vue構建出一個健壯、可擴展的Web應用程序。

  單頁面應用程序

  單頁面應用程序(SPA)架構,決定了你創建的Web頁面能夠展示和多頁面網站一樣豐富的內容,且不會發生在用戶點擊鏈接后重新加載整個頁面這樣低效的行為。

  一旦您將您的“頁面”創建成了一個Vue組件,您可以為每一個組件使用Vue Router,將每個請求映射到一個唯一的訪問路徑上,Vue Router是一個由Vue團隊維護的用于構建單頁面應用程序(SPA)的工具。

  狀態管理

  隨著項目規模越來越龐大, SPA的頁面上將會有越來越多的組件,管理全局狀態也將變得愈發棘手,組件因為大量的屬性和事件監聽器而變得臃腫。

  為應對上述情況,你的需要開始了解Vue的狀態管理:一種被稱為“Flux”的特殊模式,可將您的數據保存在穩定的中央存儲中。Flux可通過Vuex庫來實現,該庫由Vue團隊維護。

  2. 生產環境中的Vue

  您從第一部分獲取的知識理論上可用于構建高性能的Vue應用程序。那么,如何確保他們能夠在實際生產環境下運行呢?

  如果您要把基于Vue.js 的產品推向用戶,您還需要了解更多內容,以下將為您介紹。

  項目腳手架

  如果您需要經常構建Vue應用程序,您會發現幾乎每個項目都會提供配置、設置和開發人員工具。

  Vue團隊維護了一個名為Vue CLI的工具,它可以讓您在幾分鐘內構建一個強大的Vue開發環境。

  全棧 / 認證應用程序

  Vue應用是數據驅動型的用戶界面,數據通常由Node、Laravel、Rails、Django

  或其他服務器框架編寫的安全API作為來源,大部分數據是由傳統的REST API或GraphQL提供,再或者是Web Socket提供的實時數據。

  您應該熟悉這些用于將Vue集成到全堆棧配置中的設計模式,以及在Vue應用程序中保護用戶數據安全的各種注意事項。

  如果您正在評估什么后端產品是您開發Vue應用時的最好選擇,那么這篇文章中應該有您的答案。

  測試

  如果您想確保您的Vue應用程序在生產環境中表現的既可維護又穩定,您需要對您的應用提供完整的測試。

  在Vue應用程序中,單元測試可確保您的組件始終為給定的輸入(屬性或用戶輸入的內容)提供相同的輸出(渲染好的HTML或事件)。

  Vue團隊維護著一個名為Vue Test Utils的工具,它允許您對組件單獨創建和執行測試過程。

  優化手段

  當您將應用程序部署到遠程服務器后,這個應用的訪問速度和執行效率很可能不會像在開發階段表現的那樣迅速,很可能當用戶訪問時速度會變得很慢。

  為了提升效率,我們需要優化Vue應用,優化過程可以采用多種技術,如服務端渲染。在服務端渲染中,Vue程序將在服務端執行,在用戶訪問時,將渲染完成的HTML呈現給用戶,從而達到提升訪問速度的目的。

  當然,優化手段不局限于這一種,還包括:異步組件和渲染功能。

  3. 關鍵工具

  到目前為止,我們所掌握的知識皆來自于Vue.js核心和生態系統中的工具。但Vue并不是孤立存在的,它只是前端技術棧的一部分。

  在高級開發領域不應該僅僅熟悉Vue,還要熟悉一些其他關鍵工具,因為它可能將成為未來Vue應用的重要組成部分。

  現代JavaScript和Babel

  ES5可以有效構建的Vue應用程序,也幾乎是所有瀏覽器都支持的JavaScript標準。

  為了增強Vue的開發體驗,使用最新的瀏覽器功能,您可以借助最新的JavaScript

  標準(ES2015的特性或ES2016及更高版本的全新功能)來構建您的Vue應用程序。

  注意:如果您選擇使用了最新的JavaScript,那么舊版瀏覽器將會出現兼容問題,這很可能會造成您的產品損失掉一部分用戶。

  如何對舊瀏覽器做兼容呢? Babel 可以實現這個目的,它的職責就是在應用程序發布前將您應用程序中現代的特性“轉換”(翻譯和編譯)為標準功能。

  Webpack

  Webpack是一個模塊打包工具,意思是如果您的代碼是由跨不同模塊編寫的(例如,不同的JavaScript文件),Webpack也可以將這些內容“打包”到同一瀏覽器可讀的單個文件中。

  Webpack 還可以構建流水線,它允許您在構建代碼前進行轉換。例如,使用前面提到的Babel、Sass或TypeScript,還可以使用一系列插件來優化您的Web應用程序。

  許多開發者認為Webpack很難理解,也很難配置,但如果沒有它,Vue的一些特性功能(如:單頁面組件)將無法實現。我們有關于WebPack的系列教程,助您快速掌握Webpack的使用和配置。

  TypeScript

  TypeScript是JavaScript語言的超集,它包含了(String、Boolean、Number等)。有了這樣的定義,能保證您在開發期間就能編寫出健壯且穩定的代碼,并盡早發現錯誤。

  即將于2019年推出的Vue.js 3將完全用TypeScript編寫,這并不意味著您必須在Vue項目中使用它。但假如您需要通過閱讀Vue的內部代碼并加入Vue的開源組織為其貢獻力量,您至少也應提前了解TypeScript。

  4. Vue框架

  基于Vue創建的框架,使您無需從頭開始實現服務端渲染,就可創建自己的組件庫以及其他類似的工作。

  目前有許多優秀的Vue框架,這里,我們只列出了應用在不同領域最為廣泛的三個框架。

  Nuxt.js

  如果你想要構建一個高性能的Vue應用程序,基于路由、服務端呈現、代碼分離和其他前沿特性,同時還需要一些更高級的功能,例如:SEO標記等。您可以使用Nuxt.js框架。

  Nuxt.js框架通過其豐富的社區插件提供了所有這些開箱即用的特性,甚至更多,如PWA等。

  Vuetify

  Google的Material Design標準是一個廣泛使用的設計語言指南系統,它用于構建漂亮并合理的用戶界面,這些界面被廣泛應用于Google的產品,如Android和Web系統。

  Vuetify框架在一系列Vue組件中實現了Material Design。這允許您使用Material Design布局和樣式快速創建Vue應用程序,并在應用程序中實現模態框、提示框、導航欄、分頁等頁面小控件。

  NativeScript-Vue

  Vue.js 是一個用于構建Web用戶界面的UI庫。如果您想將他用于構建移動應用,可以使用NativeScript-Vue框架。

  NativeScript是一個使用iOS和Android原生用戶界面組件構建應用app的框架,而NativeScript-Vues 是基于NativeScript且支持Vue語法和Vue組件使用的框架。

  5. 支持Vue的控件/組件

  如果您想在項目中快速構建基于Vue的功能模塊,如類似Excel功能和布局的電子表格、前端導入導出Excel、在Web應用程序中嵌入在線Excel、數據分析OLAP、金融圖表等,您可以使用一些成熟的商業化開發工具,純前端表格控件SpreadJS 和 前端開發工具包WijmoJS。

  純前端表格控件SpreadJS:https://www.grapecity.com.cn/developer/spreadjs

  SpreadJS 是一款基于 HTML5 的純 JavaScript 電子表格和網格功能控件,以高速低耗、純前端、零依賴為產品特色,可嵌入任何操作系統,滿足 .NET、Java、響應式 Web 應用及移動跨平臺的表格數據處理和類 Excel 的表格應用開發,實現在線 Excel 體驗。

  SpreadJS 在數據展示、前端導入導出、圖表面板、數據綁定等場景無需大量代碼開發和測試,可極大節省企業研發成本并降低交付風險。

  前端開發工具包WijmoJS:https://www.grapecity.com.cn/developer/wijmojs

  WijmoJS 前端開發工具包由多款靈活高效、零依賴、輕量級的純前端控件組成,如表格控件FlexGrid、圖表控件 FlexChart、數據分析 OLAP 等,完美支持原生 JavaScript,以及Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架,可用于企業快速構建桌面、移動 Web 應用程序。

  WijmoJS 憑借其先進的體系架構、簡單易學的使用文檔、超過 500 種 Demo 演示、頂級的控件性能,以及輕松、易用的操作體驗,可全面滿足企業前端開發所需,是構建企業級 Web 應用程序最高效的純前端開發工具包。

  6. 其他項目

  在最后一部分中,我們將介紹一些重要但不包含在上述分類中的內容。

  插件開發

  如果您要在項目中重用Vue功能,或為Vue生態做出貢獻,您可以把這部分功能打包成插件并發布給其他用戶。

  插件功能是Vue的一個重要特性,有很多工具和模板都可以幫助您創建輕便高效的Vue代碼。

  動畫

  動畫也是 Vue核心功能的一部分,它允許您向DOM中添加或刪除元素時應用動畫。 為了啟用一個動畫,您可以創建CSS類來定義所需的動畫效果,無論是淡入淡出、更改顏色還是任何其他效果。Vue將在添加或刪除元素時,同時添加或刪除您設置相應的類。

  漸進式Web應用程序(PWA)

  漸進式Web應用程序(PWA)與普通的Web應用程序類似,但用戶體驗、性能已經得到了增強,同時還增加了部分現代功能,如,離線緩存、服務端渲染、通知推送等。

  大部分PWA功能可以通過Vue CLI 3插件或注入Nuxt.js之類的框架添加到Vue應用中,但您仍需學習其中的關鍵技術,包括Web應用json清單(minifest)和服務等。

  擴展控件

  在您的Web應用中,如有電子表格、報表、數據分析、金融圖表、在線表格編輯等需求,可以使用上文提到的支持Vue框架的控件和組件包,除了無需考慮兼容性問題外,這些控件可使您的Web應用為用戶帶來更穩定、更高效的使用體驗。

  關于葡萄城https://www.grapecity.com.cn/

  賦能開發者!葡萄城公司成立于 1980 年,是全球領先的集開發工具、商業智能解決方案、管理系統設計工具于一身的軟件和服務提供商。西安葡萄城是其在中國的分支機構,面向全球市場提供軟件研發服務,并為中國企業的信息化提供國際先進的開發工具、軟件和研發咨詢服務。葡萄城的控件和軟件產品在國內外屢獲殊榮,在全球被數十萬家企業、學校和政府機構廣泛應用。

特別提醒:本網內容轉載自其他媒體,目的在于傳遞更多信息,并不代表本網贊同其觀點。其原創性以及文中陳述文字和內容未經本站證實,對本文以及其中全部或者部分內容、文字的真實性、完整性、及時性本站不作任何保證或承諾,并請自行核實相關內容。本站不承擔此類作品侵權行為的直接責任及連帶責任。如若本網有任何內容侵犯您的權益,請及時聯系我們,本站將會在24小時內處理完畢。


返回網站首頁 本文來源:互聯網

本文評論
《沉睡魔咒2》與朱莉再續前緣,騰訊手機管家提醒勿下山寨病毒軟件
當魔法力量與人類欲望相互碰撞,受人尊重的女王化身毀滅使者,邪惡女巫成為守護一方和平的衛士。迪士...
日期:10-18
Windows 10 Build 19002發布:藍牙配對優化向快速通道成員開放
10月18日消息 微軟今天面向Windows Insider快速通道的用戶發布了20H1的最新預覽版系統更新,內部版...
日期:10-18
Ubuntu 20.04 LTS代號“Focal Fossa”,明年4月正式發布
Ubuntu 19.10“Eoan Ermine”剛剛發布,20.04版本也已開始亮相。仍然遵循英文字母順序的...
日期:10-18
金山文檔上線“跨表引用”,在線文檔分水嶺漸顯
作為一款專業在線協作文檔工具,金山WPS旗下的金山文檔日前上線了“跨表格引用數據”功能...
日期:10-17
這兩個實用的WPS功能,讓PPT制作更輕松
不管是學校里的學生,還是職場的上班族,大部分會選擇WPS作為處理辦公文檔的軟件。為了能滿足大家日...
日期:10-17
預警!永恒之藍下載器木馬新增BlueKeep漏洞檢測代碼,未修復比例高達近30%
近日,騰訊安全御見威脅情報中心監測發現,“永恒之藍下載器”木馬再次更新,新增了BlueK...
日期:10-17
微軟Windows 10計算器更新:全面支持三角學、 函數(f)
10月16日消息 Windows 10系統內置了一款計算器,也可以從應用商店下載,并且具有一些專用于更高級工...
日期:10-16
谷歌Chrome瀏覽器測試新功能:解決愛吃內存問題
10月15日消息 谷歌Chrome瀏覽器是Windows上占用資源最多的應用程序之一,如果安裝擴展程序或打開過...
日期:10-15
Safari瀏覽器欺詐網站警告功能引發用戶隱私擔憂
有用戶發現,在蘋果的Safari的隱私條款中有一個特別的條款。叫做 Fraudulent Webstie Warning ,欺...
日期:10-14
Mac終于和iTunes說再見了 那Windows用戶呢?
macOS Catalina 的發布可能會減少 Mac iTunes 用戶對蘋果著名的臃腫的媒體管理和播放應用程序的抱怨...
日期:10-14
微軟Windows 10更新助手存漏洞:黑客可執行系統級權限代碼
10月12日消息 據外媒報道,Microsoft Windows 10 Update Assistant(微軟Win 10更新助手)中的一個安...
日期:10-12
《中國機長》等國慶檔大片叫座,手機觀影當心中招木馬病毒
“我和我的祖國,一刻也不能分割,無論我走到哪里,都流出一首贊歌……”王菲翻...
日期:10-12
PS和LR在蘋果macOS Catalina上出現“兼容性問題”
macOS Catalina正式版已經推出多日,但如果你是PhotoShop和Lightroom的重度用戶的話,建議你暫時不...
日期:10-09
刪除的微信聊天記錄怎么恢復?專業軟件讓恢復變得輕而易舉
如果未來的某一天,我很不不幸的遭遇了車禍或者是其他意外,那我一定一定是不愿意死的,因為&hellip...
日期:10-08
蘋果手機微信聊天記錄怎么徹底刪除?左滑刪除只是掩耳盜鈴!
蘋果手機微信聊天記錄怎么徹底刪除?這個月蘋果官網又推出新款手機蘋果iPhone11Pro,很多土豪小伙伴...
日期:09-30
淘集集可以提現嗎?如何提現?
隨著越來越多人用淘集集app進行購物,也聽說了淘集集購物返紅包,甚至可以直接體現,這是真的嗎?要怎么...
日期:09-29
如何用智能電視觀看網盤內容?當貝市場一招搞定
智能電視上的視頻內容很多時候無法滿足我們用戶需求,這時應該怎么辦?當貝小編今天就給大家解答一下...
日期:09-29
Windows 10補丁KB4517210發布,升級1903版本更順暢了
9月29日消息 Windows 10版本1903(2019年5月更新)正式準備進行大規模部署推送,并且微軟現在正在推出...
日期:09-29
Mozilla的Firefox Nightly不再對TLS 1.0和TLS 1.1提供支持
Mozilla在最新的Firefox Nightly版本中已不再對TLS 1.0和TLS 1.1加密協議提供支持。此舉是繼蘋果、...
日期:09-29
騰訊安全:IE瀏覽器曝遠程執行代碼漏洞 騰訊安全強勢推出漏洞修復工具
近日,微軟發布一例遠程執行代碼漏洞(CVE-2019-1367)漏洞修復補丁,攻擊者可利用網頁掛馬和郵件進行...
日期:09-27
  專欄介紹
王涵 的專欄
王涵發表的文章
積分:
自我介紹 :
 
欢乐捕鱼大战怎么获得冰冻道具 赚钱而且不需要高学历的职业 kk棋牌跑得快有作弊器吗 七乐彩走势图2 欢乐斗地主下载 拥有大量微粉丝如何赚钱 15选5开桨结果江苏 乐开棋牌下载手机版 rt电子游戏网站 36棋牌游戏下载 梦幻西游帮会能赚钱吗