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

时间:2024-03-13 19:32:12

由于工作中可能会用到ExtJS,而且之前从未接触过,于是找资料开始搭建ExtJS,整理下构建步骤,用作记录。
基于SenchaCmd搭建ExtJS 6.2版本开发环境(图文教程)
参考文档地址:
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
基于SenchaCmd搭建ExtJS 6.2版本开发环境(图文教程)
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

基于SenchaCmd搭建ExtJS 6.2版本开发环境(图文教程)
3.window cmd切换到上述目录下,执行命令

sencha help

如果显示如图所示,就代表安装成功
基于SenchaCmd搭建ExtJS 6.2版本开发环境(图文教程)
三、配置环境变量

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

运行项目的命令:sencha app watch

新建系统变量:EXTJS_CMD_HOME

路径就是:D:\Users\Administrator\bin\Sencha\Cmd\7.0.0.40
基于SenchaCmd搭建ExtJS 6.2版本开发环境(图文教程)
编辑系统变量Path
基于SenchaCmd搭建ExtJS 6.2版本开发环境(图文教程)
四、新建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目录结构如下,此处因为解压时目录叠加报错。
基于SenchaCmd搭建ExtJS 6.2版本开发环境(图文教程)
基于SenchaCmd搭建ExtJS 6.2版本开发环境(图文教程)
如图所示,即为成功:
基于SenchaCmd搭建ExtJS 6.2版本开发环境(图文教程)
五、运行ExtJS项目

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

sencha app watch

默认访问路径是:http://localhost:1841 如果你执行了多个extjs项目,端口会随机变化!
基于SenchaCmd搭建ExtJS 6.2版本开发环境(图文教程)
项目运行测试:
基于SenchaCmd搭建ExtJS 6.2版本开发环境(图文教程)
如下是ExtJS自带的demo工程
F:\ExtJS\ext-6.2.0\templates\admin-dashboard

运行命令: sencha app watch
基于SenchaCmd搭建ExtJS 6.2版本开发环境(图文教程)
运行结果:
基于SenchaCmd搭建ExtJS 6.2版本开发环境(图文教程)
项目目录结构:
基于SenchaCmd搭建ExtJS 6.2版本开发环境(图文教程)