搭建Angular并引入NG-ZORRO组件库

作者:baekpcyyy

1.安装node.js

注:安装 16.0 或更高版本的 Node.js
node官网:https://nodejs.org/en
搭建Angular并引入NG-ZORRO组件库_第1张图片
搭建Angular并引入NG-ZORRO组件库_第2张图片

2.进入angular官网

https://angular.cn/guide/setup-local
新建一个文件夹 vsc打开 打开终端

1.首先安装angular手脚架

搭建Angular并引入NG-ZORRO组件库_第3张图片

2.然后执行命令创建工作区

搭建Angular并引入NG-ZORRO组件库_第4张图片
请添加图片描述
等待这个instant完成 这时我们就等于创建了一个angular项目现在我们给这个项目加上NG-ZORRO组件库

3.首先进入NG-ZORRO官网

https://ng.ant.design/docs/i18n/zh

执行这个命令之前我们进入创建项目的文件夹下
请添加图片描述
然后执行此命令安装组件库

搭建Angular并引入NG-ZORRO组件库_第5张图片
choose template to create project:blank
创建一个空的页面 第二个选项创建的是有侧边栏的选项
搭建Angular并引入NG-ZORRO组件库_第6张图片
等待下载完成后我们启动这个项目
搭建Angular并引入NG-ZORRO组件库_第7张图片
搭建Angular并引入NG-ZORRO组件库_第8张图片
复制链接进入浏览器生成这样的页面说明组件库初始化配置成功
搭建Angular并引入NG-ZORRO组件库_第9张图片
然后我们开始安装组件执行如下代码
搭建Angular并引入NG-ZORRO组件库_第10张图片
搭建Angular并引入NG-ZORRO组件库_第11张图片
此时我们已经将组件库引入
然后我们在angular.json引入相关的样式文件
搭建Angular并引入NG-ZORRO组件库_第12张图片
搭建Angular并引入NG-ZORRO组件库_第13张图片
接下来我们继续引入相关文件
搭建Angular并引入NG-ZORRO组件库_第14张图片
请添加图片描述
#4.通过命令行创建组件
ng g c 组件名
搭建Angular并引入NG-ZORRO组件库_第15张图片
然后我们删除里面初始的内容在app.component.html将新建的组件引入
请添加图片描述
在app.component.ts将组件倒入
搭建Angular并引入NG-ZORRO组件库_第16张图片
现在我们启动项目就可以看见自己通过命令行创建的组件已经在页面渲染
搭建Angular并引入NG-ZORRO组件库_第17张图片
现在我们在这个组件内引入组件库的button进行尝试
将我圈出来的分别写到对应的模块
搭建Angular并引入NG-ZORRO组件库_第18张图片

搭建Angular并引入NG-ZORRO组件库_第19张图片
搭建Angular并引入NG-ZORRO组件库_第20张图片
在这里插入图片描述
下面是页面渲染出来的结果
搭建Angular并引入NG-ZORRO组件库_第21张图片

你可能感兴趣的:(angular.js,前端,javascript)