ExtJs6入门-使用SenchaCmd命令创建第一个ExtJs6的HelloWorld项目

版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/zgd826237710/article/details/73294080

最近在公司里需要用到ExtJs,所以学习了一下,在这里总结一下是如何创建一个简单的ExtJs项目的,避免以后自己忘记,也希望能为以后需要的朋友提供点帮助。


1、首先需要安装SenchaCmd工具

SenchaCmd下载地址:https://www.sencha.com/products/extjs/cmd-download/,进入之后选择对应版本进行下载。

使用这个工具可以更方便的开发ExtJs项目,安装过程很简单,一路Next下去即可,安装完成之后,工具会自动对环境变量进行配置。

此时在任意文件目录下打开命令行,执行 :

sencha which

输出下图这两句语句即证明安装成功并且环境变量也配置好了:




2、下载ExtJs6文件

SenchaCmd工具安装好之后,如果目前还没有下载ExtJs6文件,那么你就可以通过sencha命令直接进行下载。

比如说我现在想要将ExtJs6文件下载到C盘的一个叫做ExtJs6的文件夹下,那么我就可以:

打开命令行,执行以下命令:

sencha generate app --ext MyApp C:\ExtJs6

输出如下图所示的语句即证明下载成功了:


当然了,如果你想自己进行下载,也是可以的,ExtJs6下载地址:http://cdn.sencha.com/ext/gpl/ext-6.0.0-gpl.zip

注意:下载完ExtJs6文件之后一定要将命令行关闭,重新开一下,不然的话创建项目会报错,找不到Ext的sdk路径。


3、创建ExtJs6项目

好了,现在准备工作已经做得差不多了,可以使用sencha命令进行创建第一个ExtJs6的HelloWorld项目了,

打开命令行,执行以下命令:

sencha -sdk /sdkPath generate app Myapp /appPath

sdkPath : ExtJs6的sdk所在目录,

appPath:需要创建的项目的位置。

命令中除了sdkPcth 和 appPath 这两个单词外,其余的都是关键字,这些关键字都是不能变的,一个都不能少,否则会创建不成功。

我来举个例子说明一下具体怎么创建,就拿刚才第二步我们下载的ExtJs6文件为例,那么ExtJs6 的 sdk 所在的目录就是 C:\ExtJs6\ext\  ,

现在我想要在C盘下创建一个名字叫做ExtApp的文件作为我的Ext项目,那么需要执行的命令就是:

sencha -sdk C:\ExtJs6\ext\ generate app Myapp C:\ExtApp

如果输出的语句和第2步图中的一样的话,证明项目创建成功了,现在打开C盘,会发现目录下多了一个名字叫做 ExtApp的文件夹,到目前为止,项目成功创建。


4、运行项目

项目创建成功之后,我们怎么运行项目查看一下呢?

sencha中内置了一个端口号为 1841 的服务器,按照以下步骤操作运行服务器。

打开项目所在目录,启动命令行,执行命令:

sencha app watch

输出如下图所示的语句,证明项目运行成功:


主要看最后这个语句:Waiting for changes...,出现这句输出证明项目已经运行成功了。


5、在浏览器中查看项目

现在项目运行成功了,我们需要在浏览器中查看一下,看看这个创建成功的项目是什么样子的,在浏览器地址栏中输入:

http://localhost:1841
浏览器就会显示出如下图所示的内容:



好了,我们创建的第一个ExtJs6的HelloWold项目已经成功了,这里我也并没有介绍一些高深的知识,只是介绍如何创建一个简单的Demo,希望能够对需要的朋友提够一些帮助。

当然了,我写的并不是很完善,其中若有一些错误或者疏漏的地方,欢迎大家批评指正,谢谢!

如果有什么问题或者项目创建、运行不起来,大家可以在下方评论留言,让我们共同探讨学习一下。



猜你喜欢

转载自blog.csdn.net/zgd826237710/article/details/73294080
今日推荐