(一)基于SenchaCmd搭建ExtJS 6.2版本开发环境(图文教程)

由于工作中可能会用到ExtJS,而且之前从未接触过,于是找资料开始搭建ExtJS,整理下构建步骤,用作记录。
在这里插入图片描述
参考文档地址:
https://cloud.tencent.com/developer/article/146124

官方网站:
https://www.sencha.com

在线文档:
http://docs.sencha.com/extjs/6.5.1/index.html

官方论坛:
https://www.sencha.com/forum/

在线演示:
http://examples.sencha.com/extjs/6.5.1/examples

一、准备工作

1.安装Cmd: SenchaCmd-6.7.0.63-windows-64bit
2.安装SDK:ext-6.2.0-gpl
在这里插入图片描述
Sdk 下载:https://www.sencha.com/products/extjs/evaluate/
Cmd 下载:https://www.sencha.com/products/extjs/cmd-download/

二、安装步骤

1.解压安装压缩包

SenchaCmd-6.7.0.63-windows-64bit
ext-6.2.0-gpl

2.安装SenchaCmd-6.7.0.63-windows-64bit,记住安装位置目录,我这里安装的目录地址是

D:\Users\Administrator\bin\Sencha\Cmd\7.0.0.40

在这里插入图片描述
3.window cmd切换到上述目录下,执行命令

sencha help

如果显示如图所示,就代表安装成功
在这里插入图片描述
三、配置环境变量

为什么要配置系统环境变量呢?为了接下来运行项目的命令不会报错。

运行项目的命令:sencha app watch

新建系统变量:EXTJS_CMD_HOME

路径就是:D:\Users\Administrator\bin\Sencha\Cmd\7.0.0.40
在这里插入图片描述
编辑系统变量Path
在这里插入图片描述
四、新建ExtJS项目

在路径 D:\Users\Administrator\bin\Sencha\Cmd\7.0.0.40下创建项目:

sencha -sdk [解压后的ext-6.2.0的位置] generate app [项目名称] [项目地址]

项目名称为ExtJSDemo

sencha -sdk F:\ExtJS\ext-6.2.0 generate app ExtJSDemo F:\ExtJSDemo

注:此处ext-6.2.0目录结构如下,此处因为解压时目录叠加报错。
在这里插入图片描述
在这里插入图片描述
如图所示,即为成功:
在这里插入图片描述
五、运行ExtJS项目

在你创建的ExtJs项目目录下执行命令:

sencha app watch

默认访问路径是:http://localhost:1841 如果你执行了多个extjs项目,端口会随机变化!
在这里插入图片描述
项目运行测试:
在这里插入图片描述
如下是ExtJS自带的demo工程
F:\ExtJS\ext-6.2.0\templates\admin-dashboard

运行命令: sencha app watch
在这里插入图片描述
运行结果:
在这里插入图片描述
项目目录结构:
在这里插入图片描述

Tomcat启动方式

1.将ext-6.2.0放入Tomcat的webapps目录下
在这里插入图片描述
2.启动tomcat
在这里插入图片描述
查看结果

访问地址:http://localhost:8080/ext-6.2.0
在这里插入图片描述

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值