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 基本配置

    一、更換顯示名稱和logo

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

    

    

 

     二、更換首頁顯示圖標和名稱

    

    替換後

    

    初始化已經準備好，運行登錄，如今使用的是自帶的模擬數據（mock），後續開始配置爲本地服務器api....