1. 程式人生 > >Ant Design Vue Pro 專案實戰-專案初始化(一)

Ant Design Vue Pro 專案實戰-專案初始化(一)

 寫在前面

    時間真快,轉眼又是新的一年。隨著前後端技術的不斷更新迭代,尤其是前端,在目前前後端分離開發模式這樣的一個大環境下,互動性、相容性等傳統的開發模式已經顯得有些吃力。之前一直用的是react,隨著後面鉤子的加入更讓人愛不釋手,但是整個團隊需要更新技術,這裡選擇了更容易上手的Vue(這裡的容易上手並沒有歧義,指的是更容易適應),也相信Vue3.0釋出後會更好,畢竟沒有大公司的限制。選擇Vue後很糾結,看了幾個框架基本都缺少很多元件、需要自己造輪子。後面決定使用Ant Design Vue(Pro),引用Vue官網的一句話就是“Ant Design Pro 是一個企業級中後臺前端/設計解決方案,我們秉承 Ant Design 的設計價值觀,致力於在設計規範和基礎元件的基礎上,繼續向上構建,提煉出典型模板/業務元件/配套設計資源,進一步提升企業級中後臺產品設計研發過程中的『使用者』和『設計者』的體驗。”

     相關地址:

     程式碼(碼雲映象):https://gitee.com/sendya/ant-design-pro-vue

     程式碼(GitHub):https://github.com/sendya/ant-design-pro-vue

     線上預覽地址:https://preview.pro.loacg.com/user/login?redirect=%2Fdashboard%2Fworkplace      (賬號/密碼:admin/ant.design)

     官網資料:https://pro.loacg.com/docs/getting-started

  簡介

     這裡直接使用已經造好的前端UI框架這個大輪子,就不多介紹了,具體參考“Ant Design Pro”。

     我們這裡只簡單的介紹,我們如何用已經搭建好的Ant Design Vue Pro,稍作改動,實現自己的前端部分。

  環境搭建

     這裡只簡單說一下前端,後端本次專案用的是.NET Core3.1,不多做介紹

     前端開發工具:Visual Studio Code,安裝nodejs,yarn

  執行下載的專案 

     

    輸入命令:yarn install
    輸入命令:yarn run serve
    成功執行後即可開啟登入頁面

    

    輸入賬號密碼即可進入主頁

  調整Ant Design Vue Pro 基本配置

    1、更換顯示名稱和logo

    /public/favicon.png 替換logo   index.html更改標題

    

    

 

     2、更換首頁顯示圖示和名稱

    

    替換後

    

    初始化已經準備好,執行登陸,現在使用的是自帶的模擬資料(mock),後續開始配置為本地伺服器api....

&n