APP开发：Ionic+ZorroMobile之旅

由于工作需要，我最近研究了如何结合Ionic框架和ZorroMobile组件库来开发App

毕竟，这是第一次编写App。总是很难避免困难

让我们开始吧！

1.创建新项目离子启动项目名称

a、 在要创建新项目的文件夹地址字段中输入cmd

b、 命令窗口打开

2.操作项目c在命令窗口中，输入离子启动项目名称

d、 然后使用↑↓ 选择要创建的模板

我选择了“我的第一个App”，

请稍候，

创建成功后，首先使用IDEA打开新项目，

e、 创建成功，

总共需要173.215秒

接下来，执行cd projectName以指向当前项目

（你可以在这里偷懒一点。输入cd my+Tab，他会自动完成文件名。嘻嘻）

然后执行离子服务来运行项目

访问本地主机：8100

如果浏览器使用移动终端模式，则如下所示。是不是很成功，就像手机上使用的APP一样

f、 下一个重要步骤是使用IDEA打开项目文件

婴儿使用Visual Studio代码，因为他认为它很强大

当然，不仅仅是打开文件，还有一个非常重要的步骤：

***

看看你的App。组成部分html看起来像。最好用单独的记事本粘贴内容

g、 下一步停止运行项目

在命令窗口中停止项目：输入Ctrl+C选择y

或者直接关闭命令窗口并在VSCode中打开自己的命令窗口

快捷键为Ctrl+~；或查看>集成终端

3.图书馆观察项目中的代码是使用Ionic组件、离子标题、离子内容、离子卡和离子img添加的

要查看更多Ionic组件，请访问

Ionic的官方网站：https://ionicframework.com/docs/components

离子汉语：

h、 为项目添加ZorroMobile组件库

ng添加ng zorro antd移动

我还需要等一会儿才能喝水

非常快6.7s

ZorroMobile的地址：

i、 接下来，运行项目，离子服务

仍然访问本地主机：8100

呃，为什么它和前一个不同，

然后，您正在查看App的代码。组成部分html语言

安装ZorroMobile时，他修改了我们的app.component.html，

所以我们需要替换刚刚粘贴到记事本中的内容。

虽然这看起来像是一个复制粘贴问题，但我当时并没有发现。只是我以后再也不能用佐罗控制跳槽了。我很生气，但我终于找到了原因。事实上，解决问题的过程非常有趣。解决问题后，我仍然有成就感。我是一名程序员的原因之一是我喜欢解决问题后的成就感，当我在学校时，我特别喜欢数学，就像这个过程一样。我喜欢解决特别困难的问题。当我遇到困难时，我的挑战欲望总会被激发出来。我会一直沮丧并坚持下去，直到有一天上帝看到我的努力和决心并告诉我答案。哈哈，这种克服困难的感觉真的很好。毕业一年后，我在工作中从未有过这种感觉。好吧，以上只是我的感受，哈哈，忽略

4.发展。接下来，使用zorro控件开发

j、 首先，确保你的app.module。ts参考NgZorroAntdMobileModule

有棱角的json添加了一个css文件

k、 根据官方文件的指导：

以按钮的使用为例：

跑步：离子发球

呃，这很奇怪。安装库和引用文件有什么问题？你为什么不知道自己的按钮

我阅读了很多材料，并查看了其他同行的经验。哦，我的上帝！我懂了

***你需要这样做

在引用更改文件的模块中添加来自“ng zorro antd mobile”的引用导入｛NgZorroAntdMobileModule｝；

最终结果如下：

这里已经解决了开始的问题。你将来必须走自己的路。来吧