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

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

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

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

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

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

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

1. Vue的基本概念

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

Vue核心功能

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

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

組件

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

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

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

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

狀態(tài)管理

隨著項(xiàng)目規(guī)模越來(lái)越龐大， SPA的頁(yè)面上將會(huì)有越來(lái)越多的組件，管理全局狀態(tài)也將變得愈發(fā)棘手，組件因?yàn)榇罅康膶傩院褪录O(jiān)聽(tīng)器而變得臃腫。

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

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

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

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

項(xiàng)目腳手架

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

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

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

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

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

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

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

測(cè)試

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

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

Vue團(tuán)隊(duì)維護(hù)著一個(gè)名為Vue Test Utils的工具，它允許您對(duì)組件單獨(dú)創(chuàng)建和執(zhí)行測(cè)試過(guò)程。

優(yōu)化手段

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

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

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

3. 關(guān)鍵工具

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

在高級(jí)開(kāi)發(fā)領(lǐng)域不應(yīng)該僅僅熟悉Vue，還要熟悉一些其他關(guān)鍵工具，因?yàn)樗赡軐⒊蔀槲磥?lái)Vue應(yīng)用的重要組成部分。

現(xiàn)代JavaScript和Babel

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

為了增強(qiáng)Vue的開(kāi)發(fā)體驗(yàn)，使用最新的瀏覽器功能，您可以借助最新的JavaScript

標(biāo)準(zhǔn)(ES2015的特性或ES2016及更高版本的全新功能)來(lái)構(gòu)建您的Vue應(yīng)用程序。

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

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

Webpack

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

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

許多開(kāi)發(fā)者認(rèn)為Webpack很難理解，也很難配置，但如果沒(méi)有它，Vue的一些特性功能(如：?jiǎn)雾?yè)面組件)將無(wú)法實(shí)現(xiàn)。我們有關(guān)于WebPack的系列教程，助您快速掌握Webpack的使用和配置。

TypeScript

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

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

4. Vue框架

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

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

Nuxt.js

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

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

Vuetify

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

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

NativeScript-Vue

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

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

5. 支持Vue的控件/組件

如果您想在項(xiàng)目中快速構(gòu)建基于Vue的功能模塊，如類似Excel功能和布局的電子表格、前端導(dǎo)入導(dǎo)出Excel、在Web應(yīng)用程序中嵌入在線Excel、數(shù)據(jù)分析OLAP、金融圖表等，您可以使用一些成熟的商業(yè)化開(kāi)發(fā)工具，純前端表格控件SpreadJS 和 前端開(kāi)發(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)用及移動(dòng)跨平臺(tái)的表格數(shù)據(jù)處理和類 Excel 的表格應(yīng)用開(kāi)發(fā)，實(shí)現(xiàn)在線 Excel 體驗(yàn)。

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

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

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

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

6. 其他項(xiàng)目

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

插件開(kāi)發(fā)

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

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

動(dòng)畫(huà)

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

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

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

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

擴(kuò)展控件

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

關(guān)于葡萄城

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

生成海報(bào)

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