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

什么是ant design vue Pro

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

首頁(yè)

注意事項(xiàng)

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

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

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

開(kāi)始使用

準(zhǔn)備工作

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

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

安裝antd Pro

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

打開(kāi)終端

終端打開(kāi)之后，我們需要從 GitHub 倉(cāng)庫(kù)中直接安裝最新的腳手架代碼。

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

git拉取

簡(jiǎn)單介紹一下工程目錄

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

項(xiàng)目目錄

├── public

│ └── logo.png # LOGO

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

├── src

│ ├── api # Api ajax 等

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

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

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

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

│ ├── router # Vue-Router

│ ├── store # Vuex

│ ├── utils # 工具庫(kù)

│ ├── locales # 國(guó)際化資源

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

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

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

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

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

├── tests # 測(cè)試工具

├── README.md

└── package.json

安裝腳手架依賴(lài)

執(zhí)行命令：

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

安裝成功

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

并使用 cnpm 代替 yarn或npm

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

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

啟動(dòng)腳手架工程

輸入啟動(dòng)命令（以npm 為例）

輸入命令之后腳手架開(kāi)始啟動(dòng)，成功之后的截圖如圖1-5所示

啟動(dòng)成功

測(cè)試

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

測(cè)試成功界面

總結(jié)

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