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

简介: 基于SenchaCmd搭建ExtJS 6.2版本开发环境(图文教程)
原文转载: https://www.yundashi168.com/322.html

因为各种原因,需要在extjs项目中开发点新功能,由于之前没好好接触过extjs,我前端领域主要学的是React技术栈。所以开始找资料搭建ExtJs运行环境。

说一段小插曲,由于看见extjs项目下有index.html文件,于是,在webstorm工程中用浏览器打开index.html文件,试图把项目跑起来,在浏览器中打开index.html的时候,是一片空白,活生生的打脸了。我潜意识的意识到,跑项目肯定需要搭建extjs的开发环境的。然而我也不知道需要用什么工具来搭建,没有关键字,搜索百度也是徒劳。我在项目代码中偶然看见了SenchaCmd这个关键字,于是百度下来,就能顺利找到资料了,知道要安装好SenchaCmd。

大家需要学习ExtJS可以上中文网站 http://extjs.org.cn/ 看这本书:《ExtJS 6.2实战》

安装软件

安装SenchaCmd-6.7.0.63-windows-64bit

  • 安装Cmd: SenchaCmd-6.7.0.63-windows-64bit

安装ext-6.2.0-gpl

  • 安装SDK:ext-6.2.0-gpl

安装步骤

解压安装压缩包

解压SenchaCmd-6.7.0.63-windows-64bit和ext-6.2.0-gpl

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

C:\Users\Arison\bin\Sencha\Cmd

window cmd切换到C:\Users\Arison\bin\Sencha\Cmd目录下,执行命令

sencha help

如果显示如图所示,就代表安装成功

配置系统环境变量

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

新建系统变量:EXTJS\_CMD\_HOME 路径就是:C:\Users\Arison\bin\Sencha\Cmd

编辑系统变量Path

新建环境变量:%EXTJS\_CMD\_HOME%

新建ExtJS项目

在路径 C:\Users\Arison\bin\Sencha\Cmd下创建项目:

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

创建项目 extjsDemo extjsDemo是我随便取的项目名。

sencha -sdk C:\ExtJs\ext-6.2.0-gpl\ext-6.2.0  generate app extjsDemo C:\Project\ext

运行ExtJS项目

项目路径执行:

sencha app watch

在你创建的ExtJs项目目录下执行命令: 默认访问路径是:http://localhost:1841 如果你执行了多个extjs项目,端口会随机变化!

项目运行如下:

然后我在sdk自带的项目目录下ext-6.2.0-gpl\ext-6.2.0\templates\admin-dashboard 执行命令 sencha app watch 运行sdk自带的demo工程 然后根据命令行提示,找到访问路径:http://localhost:57346

这是Ext JS Examples项目,项目路径位于: ext SDK ext-6.2.0目录下的templates下的admin-dashboard

C:\ExtJs\ext-6.2.0-gpl\ext-6.2.0\templates\admin-dashboard

项目目录结构

用WebStorm打开项目,项目目录文件结构如下:

原文地址:http://cloud.yundashi168.com/archives/708

相关文章
|
9月前
|
测试技术 Windows
umi如何配置环境变量
umi如何配置环境变量
498 0
|
存储
HTTP的PUT请求是干什么的?底层原理是什么?
HTTP的PUT请求是干什么的?底层原理是什么?
1583 3
|
Java 数据库连接 mybatis
【Spring常见错误】No qualifying bean of type
📋📋 精彩摘要:MyBatis 核心配置文件(xxxConfig.xml),该文件配置了MyBatis的一些全局信息,,包含数据库连接信息和MyBatis运行时所需的各种特性,以及设置和响应MyBatis行为的一些属性。本文将深入浅出的介绍MyBatis核心配置文件中常用的标签配置。
5645 0
|
前端开发 JavaScript 应用服务中间件
【Docker篇】vue前端项目部署
首先打包编译生成一系列的静态文件(dist),然后把这些文件scp(放)到远程部署的服务器中,放完之后配置nginx指向到你存放静态资源的目录,完成nginx指向才能保证请求能访问到相应的资源
796 0
【Docker篇】vue前端项目部署
|
移动开发 编译器
uni-app脚手架踩坑记(下)
最近在做跨平台框架的试点,选择了uni-app,并打算先在h5上开始试点。 由于uni-app提供的基于vue-cli的脚手架与我们内部的脚手架稍有些不同,直接使用稍微有点学习成本,所以fork了一下,稍作修改,做了一个内部版本的脚手架(主要就是将publicPath从manifest.json中拿出来,实现动态配置),目的就是让其用起来和我们自己的脚手架差不多。
|
Docker 容器
docker 设置国内镜像源
docker 设置国内镜像源
52932 1
|
SQL Java 数据库连接
mybatis+PageHelper分页查询及问题解决
mybatis+PageHelper分页查询及问题解决
275 0
|
存储 算法 Java
【小Y学算法】⚡️每日LeetCode打卡⚡️——38.环形链表
📢前言 🌲原题样例:环形链表 🌻C#方法:双指针 🌻Java 方法:哈希表 💬总结 🚀往期优质文章分享
【小Y学算法】⚡️每日LeetCode打卡⚡️——38.环形链表
|
监控 Kubernetes 容器
阿里云容器服务K8S Ingress Controller日志采集实践
Ingress作为所有集群服务请求的入口,其记录的请求日志对于整个请求跟踪链路至关重要,今天主要给大家分享下如何将K8S Ingress Controller日志采集到日志服务中,以便于检索分析服务请求情况。
26607 0

热门文章

最新文章