跳至正文
首页 » 博客 » Using Ignite UI CLI to jump start your Web Application Development

Using Ignite UI CLI to jump start your Web Application Development

导言

现代Web应用程序开发引入了JavaScript库依赖关系的复杂性。您只想使用JavaScript库,但JavaScript库可能会引用/取决于其他5个库。解决依赖关系对于新用户来说非常耗时,您可能会放弃使用该库。

CLI (命令行界面) 工具非常方便!

为了解决这一挑战,现在有许多CLI工具可以减少您的基础工作。对于Angular,可以使用Angular CLI ,它创建一个带有引用必要依赖关系的骨架。这使您可以在5分钟内开始使用Angular开发。

介绍Ignite UI CLI

我们的Ignite UI为现代web应用程序开发提供了两种类型的组件集。一个是Ignite UI for JavaScript ,基于HTML5/JavaScript的组件,您可以为桌面和平板电脑构建非常丰富的现代LOB应用程序。另一个是Ignite UI,用于Angular ,原生Angular,基于材料的组件,这将是为移动设备和平板电脑创建LOB应用程序的最佳选择。两者都需要第三方库像任何其他JavaScript框架或库一样使用其强大的功能,并且当您刚开始使用我们的Ignite UI组件或每次要启动新项目时,设置这些必要的文件是痛点。

这是我们提供Ignite UI CLI的主要原因。Ignite UI CLI是一个命令行界面工具,用于为JavaScript的Ignite UI和Angular的Ignite UI搭建支架。在本条目中,我从一开始就使用Ignite UI CLI创建您的第一个项目。

先决条件

为了使用Ignite UI CLI,您需要将以下内容安装到您的环境中。

  • Node.js
  • npm (捆绑Node.js)

安装

打开终端或控制台,然后键入以下命令以安装Ignite UI CLI。在某些情况下,您可能需要以管理员身份运行。

npm install -g igniteui-cli

完成安装后,您可以使用以下命令检查版本。

ig -v

如果安装了Ignite UI CLI,您将看到此屏幕。我使用点燃UI CLI 1.2.0-beta.1这个条目。

开始使用Ignite UI CLI

如果键入 “ ig-h ”,则会看到可用的命令,但是我建议使用我们的指南,该指南会提示您输入选项,您可以使用光标键选择它们。

要使用指南启动Ignite UI,只需键入以下命令。

ig

定义名称的项目

当指南开始时,首先您将输入您将要处理的项目名称。

选择框架

Ignite UI CLI当前提供了3个选项供您选择要使用的框架。角,jQuery,反应。在这个条目中,我选择Angular。

选择类型的项目

这是一个令人困惑的部分。现在你有两个选择。一个是点燃UI角,这是一个明显的选择,当你要使用这个项目的点燃UI角。另一个是Ignite UI Angular wrappers,它是为Ignite UI for JavaScript提供的Angular扩展。您可以在Ignite UI包和Repo名称更改中找到有关扩展和可用包的更多详细信息。在这个条目中,我使用点燃UI的角度。

添加组件或视图

选择项目类型后,项目的结构已经生成,现在您可以重复选择组件 (具有单个控件的视图) 或视图 (具有从模板生成的多个组件的视图)。

添加组件

当您选择添加组件时,您将选择一组组件,然后选择要放置的组件。最新的Ignite UI CLI提供了3组,布局,调度,网格和列表。

在这个条目中,我选择了网格和列表组,然后添加了一个网格。添加的组件的名称为 “myGrid”。

添加视图

选择 “添加视图” 时,可以添加由Infragistics提供的视图。视图表示特定的业务场景,看起来更完整。

添加组件和视图后,您将看到如下输出:

建立和运行!

当你选择完成时,构建过程被踢,完成后,你可以打开一个浏览器到终端中指定的本地主机的地址。侧栏上的链接将您导航到由Ignite UI CLI生成的页面。

如何运行由Ignite UI CLI创建的现有项目?

如果您收到或下载了一个由Ignite UI CLI生成的项目,您可以在项目文件夹/目录下使用以下命令运行该项目。

点火启动

生成将自动开始,然后项目开始。如果要添加组件或视图,只需在项目文件夹/目录中键入 “ig”。

结论

构建了Ignite UI CLI以使用Ignite UI库启动。您可以使用此工具来学习如何使用我们的库,还可以扩展生成的视图以满足您的业务需求。

如果您想了解有关Ignite UI CLI的更多详细信息或想查看源代码,可以访问我们的GitHub页面。

让我们开始吧!

</p