英科特采用Wyn Enterprise對接Infor ERP，實現(xiàn)數(shù)據(jù)可視化分析

作為 Vue 的初學(xué)者，您或許已經(jīng)聽過很多關(guān)于它的專業(yè)術(shù)語了，例如：單頁面應(yīng)用程序、異步組件、服務(wù)器端呈現(xiàn)等，您可能還聽過和Vue經(jīng)常一起被提到的工具和庫，如Vuex、Webpack、Vue CLI和Nuxt。

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

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

0. JavaScript和Web開發(fā)基礎(chǔ)

如果我讓你去閱讀純英文書籍，那么你應(yīng)該先學(xué)習(xí)英文，對嗎?

同樣，Vue是一個用于構(gòu)建Web用戶界面的JavaScript框架。在開始使用Vue之前，您至少必須先掌握JavaScript和Web開發(fā)的基礎(chǔ)知識。

1. Vue的基本概念

如果您是一名Vue的萌新開發(fā)者，您應(yīng)該更專注于Vue.js 生態(tài)系統(tǒng)的核心，它包括Vue核心庫、Vue Router和Vuex。因為這些工具將會在絕大部分的Vue應(yīng)用程序中出現(xiàn)。

Vue核心功能

在一般情況下，Vue將網(wǎng)頁和JavaScript保持同步，實現(xiàn)這一目標的特性是響應(yīng)式數(shù)據(jù)指令和插值等模板功能，這些都是第一天需要學(xué)習(xí)的內(nèi)容。

在構(gòu)建你的第一個Vue應(yīng)用之前，你還必須要去了解如何在網(wǎng)頁中安裝/使用Vue，以及了解Vue引用實例的生命周期。

組件

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

單頁面應(yīng)用程序

單頁面應(yīng)用程序(SPA)架構(gòu)，決定了你創(chuàng)建的Web頁面能夠展示和多頁面網(wǎng)站一樣豐富的內(nèi)容，且不會發(fā)生在用戶點擊鏈接后重新加載整個頁面這樣低效的行為。

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

狀態(tài)管理

隨著項目規(guī)模越來越龐大， SPA的頁面上將會有越來越多的組件，管理全局狀態(tài)也將變得愈發(fā)棘手，組件因為大量的屬性和事件監(jiān)聽器而變得臃腫。

為應(yīng)對上述情況，你的需要開始了解Vue的狀態(tài)管理：一種被稱為“Flux”的特殊模式，可將您的數(shù)據(jù)保存在穩(wěn)定的中央存儲中。Flux可通過Vuex庫來實現(xiàn)，該庫由Vue團隊維護。

2. 生產(chǎn)環(huán)境中的Vue

您從第一部分獲取的知識理論上可用于構(gòu)建高性能的Vue應(yīng)用程序。那么，如何確保他們能夠在實際生產(chǎn)環(huán)境下運行呢?

如果您要把基于Vue.js 的產(chǎn)品推向用戶，您還需要了解更多內(nèi)容，以下將為您介紹。

項目腳手架

如果您需要經(jīng)常構(gòu)建Vue應(yīng)用程序，您會發(fā)現(xiàn)幾乎每個項目都會提供配置、設(shè)置和開發(fā)人員工具。

Vue團隊維護了一個名為Vue CLI的工具，它可以讓您在幾分鐘內(nèi)構(gòu)建一個強大的Vue開發(fā)環(huán)境。

全棧 / 認證應(yīng)用程序

Vue應(yīng)用是數(shù)據(jù)驅(qū)動型的用戶界面，數(shù)據(jù)通常由Node、Laravel、Rails、Django

或其他服務(wù)器框架編寫的安全API作為來源，大部分數(shù)據(jù)是由傳統(tǒng)的REST API或GraphQL提供，再或者是Web Socket提供的實時數(shù)據(jù)。

您應(yīng)該熟悉這些用于將Vue集成到全堆棧配置中的設(shè)計模式，以及在Vue應(yīng)用程序中保護用戶數(shù)據(jù)安全的各種注意事項。

如果您正在評估什么后端產(chǎn)品是您開發(fā)Vue應(yīng)用時的最好選擇，那么這篇文章中應(yīng)該有您的答案。

測試

如果您想確保您的Vue應(yīng)用程序在生產(chǎn)環(huán)境中表現(xiàn)的既可維護又穩(wěn)定，您需要對您的應(yīng)用提供完整的測試。

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

Vue團隊維護著一個名為Vue Test Utils的工具，它允許您對組件單獨創(chuàng)建和執(zhí)行測試過程。

優(yōu)化手段

當您將應(yīng)用程序部署到遠程服務(wù)器后，這個應(yīng)用的訪問速度和執(zhí)行效率很可能不會像在開發(fā)階段表現(xiàn)的那樣迅速，很可能當用戶訪問時速度會變得很慢。

為了提升效率，我們需要優(yōu)化Vue應(yīng)用，優(yōu)化過程可以采用多種技術(shù)，如服務(wù)端渲染。在服務(wù)端渲染中，Vue程序?qū)⒃诜?wù)端執(zhí)行，在用戶訪問時，將渲染完成的HTML呈現(xiàn)給用戶，從而達到提升訪問速度的目的。

當然，優(yōu)化手段不局限于這一種，還包括：異步組件和渲染功能。

3. 關(guān)鍵工具

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

在高級開發(fā)領(lǐng)域不應(yīng)該僅僅熟悉Vue，還要熟悉一些其他關(guān)鍵工具，因為它可能將成為未來Vue應(yīng)用的重要組成部分。

現(xiàn)代JavaScript和Babel

ES5可以有效構(gòu)建的Vue應(yīng)用程序，也幾乎是所有瀏覽器都支持的JavaScript標準。

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

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

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

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

Webpack

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

Webpack還可以構(gòu)建流水線，它允許您在構(gòu)建代碼前進行轉(zhuǎn)換。例如，使用前面提到的Babel、Sass或TypeScript，還可以使用一系列插件來優(yōu)化您的Web應(yīng)用程序。

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

TypeScript

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

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

4. Vue框架

基于Vue創(chuàng)建的框架，使您無需從頭開始實現(xiàn)服務(wù)端渲染，就可創(chuàng)建自己的組件庫以及其他類似的工作。

目前有許多優(yōu)秀的Vue框架，這里，我們只列出了應(yīng)用在不同領(lǐng)域最為廣泛的三個框架。

Nuxt.js

如果你想要構(gòu)建一個高性能的Vue應(yīng)用程序，基于路由、服務(wù)端呈現(xiàn)、代碼分離和其他前沿特性，同時還需要一些更高級的功能，例如：SEO標記等。您可以使用Nuxt.js框架。

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

Vuetify

Google的Material Design標準是一個廣泛使用的設(shè)計語言指南系統(tǒng)，它用于構(gòu)建漂亮并合理的用戶界面，這些界面被廣泛應(yīng)用于Google的產(chǎn)品，如Android和Web系統(tǒng)。

Vuetify框架在一系列Vue組件中實現(xiàn)了Material Design。這允許您使用Material Design布局和樣式快速創(chuàng)建Vue應(yīng)用程序，并在應(yīng)用程序中實現(xiàn)模態(tài)框、提示框、導(dǎo)航欄、分頁等頁面小控件。

NativeScript-Vue

Vue.js是一個用于構(gòu)建Web用戶界面的UI庫。如果您想將他用于構(gòu)建移動應(yīng)用，可以使用NativeScript-Vue框架。

NativeScript是一個使用iOS和Android原生用戶界面組件構(gòu)建應(yīng)用app的框架，而NativeScript-Vues 是基于NativeScript且支持Vue語法和Vue組件使用的框架。

5. 支持Vue的控件/組件

如果您想在項目中快速構(gòu)建基于Vue的功能模塊，如類似Excel功能和布局的電子表格、前端導(dǎo)入導(dǎo)出Excel、在Web應(yīng)用程序中嵌入在線Excel、數(shù)據(jù)分析OLAP、金融圖表等，您可以使用一些成熟的商業(yè)化開發(fā)工具，純前端表格控件SpreadJS 和 前端開發(fā)工具包WijmoJS。

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

SpreadJS 是一款基于 HTML5 的純 JavaScript 電子表格和網(wǎng)格功能控件，以“高速低耗、純前端、零依賴”為產(chǎn)品特色，可嵌入任何操作系統(tǒng)，滿足 .NET、Java、響應(yīng)式 Web 應(yīng)用及移動跨平臺的表格數(shù)據(jù)處理和類 Excel 的表格應(yīng)用開發(fā)，實現(xiàn)在線 Excel 體驗。

SpreadJS 在數(shù)據(jù)展示、前端導(dǎo)入導(dǎo)出、圖表面板、數(shù)據(jù)綁定等場景無需大量代碼開發(fā)和測試，可極大節(jié)省企業(yè)研發(fā)成本并降低交付風(fēng)險。

前端開發(fā)工具包WijmoJS：https://www.grapecity.com.cn/developer/wijmojs

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

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

6. 其他項目

在最后一部分中，我們將介紹一些重要但不包含在上述分類中的內(nèi)容。

插件開發(fā)

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

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

動畫

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

漸進式Web應(yīng)用程序(PWA)

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

大部分PWA功能可以通過Vue CLI 3插件或注入Nuxt.js之類的框架添加到Vue應(yīng)用中，但您仍需學(xué)習(xí)其中的關(guān)鍵技術(shù)，包括Web應(yīng)用json清單(minifest)和服務(wù)等。

擴展控件

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

關(guān)于葡萄城

賦能開發(fā)者!葡萄城公司成立于 1980 年，是全球領(lǐng)先的集開發(fā)工具、商業(yè)智能解決方案、管理系統(tǒng)設(shè)計工具于一身的軟件和服務(wù)提供商。西安葡萄城是其在中國的分支機構(gòu)，面向全球市場提供軟件研發(fā)服務(wù)，并為中國企業(yè)的信息化提供國際先進的開發(fā)工具、軟件和研發(fā)咨詢服務(wù)。葡萄城的控件和軟件產(chǎn)品在國內(nèi)外屢獲殊榮，在全球被數(shù)十萬家企業(yè)、學(xué)校和政府機構(gòu)廣泛應(yīng)用。

生成海報

免責(zé)聲明：本網(wǎng)站內(nèi)容主要來自原創(chuàng)、合作伙伴供稿和第三方自媒體作者投稿，凡在本網(wǎng)站出現(xiàn)的信息，均僅供參考。本網(wǎng)站將盡力確保所提供信息的準確性及可靠性，但不保證有關(guān)資料的準確性及可靠性，讀者在使用前請進一步核實，并對任何自主決定的行為負責(zé)。本網(wǎng)站對有關(guān)資料所引致的錯誤、不確或遺漏，概不負任何法律責(zé)任。任何單位或個人認為本網(wǎng)站中的網(wǎng)頁或鏈接內(nèi)容可能涉嫌侵犯其知識產(chǎn)權(quán)或存在不實內(nèi)容時，應(yīng)及時向本網(wǎng)站提出書面權(quán)利通知或不實情況說明，并提供身份證明、權(quán)屬證明及詳細侵權(quán)或不實情況證明。本網(wǎng)站在收到上述法律文件后，將會依法盡快聯(lián)系相關(guān)文章源頭核實，溝通刪除相關(guān)內(nèi)容或斷開相關(guān)鏈接。