教程:angular6 + ng-zorro鹿途后台管理系统(一)

从零开始用Angular6 + ng-zorro 完成一个完整的后台管理系统,系列文章前提是你已经具备一定的Angular开发经验,至少可以完成开发环境的搭建,话不多说我们开始吧!

鹿途登陆页

版本说明

  • 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的配合已经完成了项目的基本的骨架,过程都大同小异,大家可以参考NG-ZORRO的快速上手,下一节我们将开始项目整体结构的规划。

项目github地址:https://github.com/ZhouRenYou/ng-deerway
项目预览地址(非实时更新):https://zhourenyou.github.io/web-deerway/passport/login

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,707评论 25 709
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 14,533评论 2 59
  • Angular版本的 Ant Design 总算发布了,其名曰:ng-zorro-antd。 这人要是越期待,心就...
    cipchk阅读 14,667评论 0 6
  • 河水一源形弥弥,漫风生酒舍,皓月照书窗。渔港清幽临水岸,溪叟又新居,燕声喜袅袅。 泰山万仞势岩岩,芳草正萋萋,松柏...
    文青文清阅读 3,764评论 2 5
  • 最近发现了一款比较好用的Markdown预览插件——markdown-preview-enhanced 它可以实时...
    夜瑾漠阅读 8,218评论 0 0

友情链接更多精彩内容