喜歡就關(guān)注我吧，訂閱更多最新消息

什么是ant design vue Pro

以下文字來自Ant Design Pro官網(wǎng)介紹：官網(wǎng)傳送門: ant design vue Pro官網(wǎng)。Ant Design Pro 是一個企業(yè)級中后臺前端/設(shè)計解決方案，我們秉承 Ant Design 的設(shè)計價值觀，致力于在設(shè)計規(guī)范和基礎(chǔ)組件的基礎(chǔ)上，繼續(xù)向上構(gòu)建，提煉出典型模板/業(yè)務(wù)組件/配套設(shè)計資源，進一步提升企業(yè)級中后臺產(chǎn)品設(shè)計研發(fā)過程中的『用戶』和『設(shè)計者』的體驗。隨著『設(shè)計者』的不斷反饋，我們將持續(xù)迭代，逐步沉淀和總結(jié)出更多設(shè)計模式和相應(yīng)的代碼實現(xiàn)，闡述中后臺產(chǎn)品模板/組件/業(yè)務(wù)場景的最佳實踐，也十分期待你的參與和共建。

首頁

注意事項

官網(wǎng)介紹到使用ant design vue pro(以下簡稱antd Pro)的開發(fā)者默認(rèn)有一定的 Vue 基礎(chǔ)和 Antd 使用經(jīng)驗,如果你對這些還不熟悉，他們建議咱們先查閱相關(guān)文檔 Vue、Ant Design Vue。

但是這些都不是很重要，浩浩剛開始接觸這套前端框架時，也沒有任何vue基礎(chǔ)，之所以寫這個系列文章，一方面是想向大家介紹這么一套螞蟻金服出品的優(yōu)秀的前端框架，另一方面是消除沒有任何基礎(chǔ)的開發(fā)者的畏難心理，沒有基礎(chǔ)我們也可以玩轉(zhuǎn)這套框架，畢竟框架的初心就是把開發(fā)者從繁重的前端三劍客中解放出來。

同時由于浩浩也沒有這套框架所用到的技術(shù)基礎(chǔ)，完全是耗費時間去研究了螞蟻金服前端開發(fā)人員的寫法而總結(jié)出來的心得，完全可以滿足我們?nèi)粘Ｏ到y(tǒng)的前端開發(fā)。如果有技術(shù)理解上的錯誤，歡迎大家批評指正。如果對你有幫助，請您一鍵三連以示鼓勵。廢話不多說，直接上菜！

開始使用

準(zhǔn)備工作

使用這套框架，浩浩建議你下載使用VS Code軟件，VS Code作為強大的IDE編輯工具，極好上手，不僅可以直接打開terminals運行dos命令，而且支持打開幾乎所有格式的文檔，編輯器很花里胡哨，稍微還有一點裝X的感覺。

在使用antd Pro這套框架之前，礙于技術(shù)棧的限制，電腦上需要安裝node.js以及git組件，下載鏈接浩浩就不提供了，百度可以解決你這些問題。

安裝antd Pro

浩浩假設(shè)你已經(jīng)成功安裝VS Code軟件，并且已經(jīng)安裝好了準(zhǔn)備工作中所需要的環(huán)境與組件。于是乎建立一個工程文件夾用于存放antd Pro前端項目文件，然后打開VS Code選擇File中的Open…提示選擇剛才建好的文件夾點擊打開，選擇軟件上方的Terminal的New Terminal，操作步驟如下圖1-1所示：

打開終端

終端打開之后，我們需要從 GitHub 倉庫中直接安裝最新的腳手架代碼。

安裝過程以及成功如圖1-2所示：

git拉取

簡單介紹一下工程目錄

從git倉庫成功拉取工程文件成功之后，腳手架工程文件目錄如圖1-3所示：

項目目錄

├── public

│ └── logo.png # LOGO

| └── index.html # Vue 入口模板

├── src

│ ├── api # Api ajax 等

│ ├── assets # 本地靜態(tài)資源

│ ├── config # 項目基礎(chǔ)配置，包含路由，全局設(shè)置

│ ├── components # 業(yè)務(wù)通用組件

│ ├── core # 項目引導(dǎo), 全局配置初始化，依賴包引入等

│ ├── router # Vue-Router

│ ├── store # Vuex

│ ├── utils # 工具庫

│ ├── locales # 國際化資源

│ ├── views # 業(yè)務(wù)頁面入口和常用模板

│ ├── App.vue # Vue 模板入口

│ └── main.js # Vue 入口 JS

│ └── permission.js # 路由守衛(wèi)(路由權(quán)限控制)

│ └── global.less # 全局樣式

├── tests # 測試工具

├── README.md

└── package.json

安裝腳手架依賴

執(zhí)行命令：

npm是安裝node.js提供的依賴下載源，由于下載的文件比較多，npm鏡像可能不是很穩(wěn)定，可以使用yarn代替，但是前提還是要先安裝yarn指令，個人還是使用npm安裝依賴，如果有報錯或者異常出現(xiàn)，可以多嘗試幾次。安裝時間較長，安裝成功之后的效果如圖1-4所示：

安裝成功

如果網(wǎng)絡(luò)狀況不佳，可以使用 cnpm 進行加速

并使用 cnpm 代替 yarn或npm

或者設(shè)置 yarn 的 npm 加載源，

如 yarn config set registry https://registry.npm.taobao.org

啟動腳手架工程

輸入啟動命令（以npm 為例）

輸入命令之后腳手架開始啟動，成功之后的截圖如圖1-5所示

啟動成功

測試

可以單擊本地Local的鏈接地址，之后就可以打開默認(rèn)瀏覽器來加載腳手架。成功之后的界面如圖1-6所示

測試成功界面

總結(jié)

到此腳手架工程就啟動起來了，說明依賴什么都已經(jīng)加好了。我們之后就可以根據(jù)自己系統(tǒng)的所需進行修改某些文件，畢竟這是一套比較全的示例工程，有些東西根據(jù)我們的實際是不需要的，所以我們要進行取舍，但是我們對這個工程又不是很了解，也沒有其他基礎(chǔ)，所以還想繼續(xù)使用，請關(guān)注我了解之后的使用方法，第一天就只需學(xué)會腳手架的安裝與啟動。第二天給大家講頁面路由的邏輯實現(xiàn)以及配置。請大家繼續(xù)關(guān)注，這可能是全網(wǎng)唯一的分享這套優(yōu)秀的前端框架的系列文章，大家多多鼓勵，你的每一次點贊收藏轉(zhuǎn)發(fā)都是鼓勵我不斷更新下去的動力，敬請期待！