用Angular6 + ng-zorro 完成一個完整的后台管理系統,鹿途后台管理系統,是我脫離工作自己的第一個作品,所以我可以任意妄為,隨心所欲,我想做好它,堅持!系列文章不會從每行代碼說起,只會對一些關鍵點進行分析說明,再配合源碼就沒有多大問題了。
版本說明
- ng-zorro-antd 1.4.1+
- angular 6+
- node 10+
開發工具
- Mac
- Vscode
創建項目
在創建項目之前,請確保 @angular/cli 已被成功安裝
執行以下命令,@angular/cli 會在當前目錄下新建一個名稱為ng-deerway的文件夾,並自動安裝好相應依賴。
ng new ng-deerway
初始化配置
進入項目文件夾,執行以下命令后將自動完成 ng-zorro-antd 的初始化配置,包括引入國際化文件,導入模塊,引入樣式文件等工作。
ng add ng-zorro-antd
開發調試
一鍵啟動調試,運行成功后顯示歡迎頁面。
ng serve
我們通過腳手架和NG-ZORRO的配合已經完成了項目的基本的骨架,過程都大同小異,大家可以參考NZ-ZORRO的快速上手,下一節我們將開始項目整體結構的規划。
項目github地址:https://github.com/ZhouRenYou/ng-deerway
項目預覽地址(非實時更新):https://zhourenyou.github.io/web-deerway/passport/login