Ng-Zorro 是在 Angular 框架里用的一套组件库,所以需要先去准备一个 Angular 项目。打开终端,创建 Angular 项目可以使用它的命令行工具,确定已经提前安装好了 Node.js 以后。执行一下 npm install 安装 @angular/cli,加上 --global 选项,在全局范围安装一下这个命令行工具。
安装完成以后,可以使用它去创建一个全新的 Angular 项目,先进入到你想保存项目的地方,比如进入到桌面上。创建 Angular 项目用的是 ng new ,后面加上项目的名字,比如 ninghao-zorro 。
提示,Would you like to add Angular routing,需要 Angular 的路由功能吗,输入 Y ,表示需要这个功能。
又提示 Which stylesheet format would you like to use ? 在项目里要用哪种格式的样式。 Ng-Zorro 里的样式是用的是 Less,所以这里我们也可以选择使用 Less 这种格式的样式。
Angular 的命令行工具,会去给我们创建一个 Angular 项目,并且安装好了项目里依赖的东西。
进入到这个项目所在的目录 cd ninghao-zorro,然后用编辑器打开这个项目,这里我用的是 VSCode 编辑器。
项目的 package.json 文件里定义了一些命令,启动项目的本地开发服务,可以执行这个 start 命令,或者也可以直接执行 ng serve 。
在终端,执行一下 npm run start ,这里真正执行的是 ng serve 这个命令,它会给我们创建一个 Angular 项目的本地开发服务,地址是 localhost:4200。
打开浏览器,访问一下这个 localhost:4200, 现在你看到的是一个 Angular 项目的欢迎界面。