Sencha CMD 4- 安装与首次使用

时间 2019-11-29

标签 sencha cmd 安装首次使用繁體版

原文原文链接

哥英文很差，网上搜索好多中文教程都是抄来抄去没有完整的介绍。因此写出来让与我同样的小伙伴惊呆下！css

这篇主要是安装，后续慢慢更新html

1、Sencha CMD是干啥滴！？前端

它是服务使用EXTJS SDK开发前端的玩意，由于后续只介绍关于extjs相关的，煎茶触摸相关的掠过，由于哥不须要，因此暂时不研究。java

它能帮你在开发中自动生成extjs应用程序框架；
能智能的感知你都使用了那些组件JS文件从而使发布后的js最小化；
没装IIS没关系，它能帮你简历本地累死http://localhost：****/app 这样的web服务器
封装、打包和分布式开发
还能帮你实现浏览器兼容须要的切片功能。好比css3的圆角在不合适的浏览器中用切好的图片代替
... ...
好东西，我之前开发直接在项目中引入ext-all.js压缩后都要一兆多，css也几百KB，若是互联网上使用是比较杯具的，即便使用cdn加载下用户也须要不少时间的！！小伙伴惊呆了，决定安装学习下

2、准备工做。css3

下载 Java Runtime Environment 版本须要大于1.6，并安装，由于Sencha CMD是java编写滴
从 rubyinstaller.org 下载Ruby，版本小于1.9.3，并安装

编辑扩展主题样式须要compass，运行安装好的ruby下的命令行工具，输入下边的命令慢慢等待远程安装完成
```
gem install compass
```
下载 Sencha CMD ，安装目录默认在本地用户文件夹下，你能够改变，可是装多个版本，必须在同一个地方哦，官方是这么说滴：（
安装完成后，第一次使用CMD命令行工具的 cd命令先定位的Sencha CMD的安装目录运行下边的命令，看看都有啥，很少解释了
```
sencha help [命令参数--能够看到每一个命令的帮助，这个玩意颇有用啊，见五大条后介绍哦]
```
例子 sencha help web 你就能看到 shencha web 的命令帮助web
要更新到最新版本，使用 sencha upgrade 命令
提醒，下次运行sencha命令就直接在cmd命令行工具使用便可，不用定位了
下载EXTJS SDK并解压

3、试手json

建立一个应用程序看看都有啥玩意，sencha cmd要建立一个测试用例app，必须得知道小伙伴把extjs sdk藏哪里了，不然无法建立！浏览器

第一种方式，使用cd线定位到sdk解压目录，而后用下边命令建立app
```
sencha ganerate app 名称  app要放的地方路径
```

第二种方式，更直接点

sencha -sdk sdk所在目录路径 generate app 名称  app要放的地方路径

生成的效果以下ruby

.sencha/                    # 特定文件，例如配置
    app/                    # 应用程序内容配置文件夹
        sencha.cfg          # app生成等相关配置
        build-impl.xml      # 标准生成脚本
        plugin.xml          # 插件配置
    workspace/              # 解决方案（工做空间）配置文件夹
        sencha.cfg          # 解决方案级别配置
        plugin.xml          # 解决方案级别插件配置

ext/                        # 拷贝过来的extjs SDK
    cmd/                    # 
        sencha.cfg          # 框架制定内容配置
    packages/               # 框架的功能包，如主题包和本地话js功能包
        ext-theme-classic/  # 
        ext-theme-neptune/  # 
        ...                 # 
    src/                    # sdk源文件
    ext-*.js                # 其余压缩包文件
    ...

index.html                  # app入口文件
app.json                    # app的配置文件
app.js                      # app入口逻辑
app/                        # MVC模式的主要应用程序部分
    model/                  # 
    store/                  # 
    view/                   # 
        Main.js             # 默认的view
    controller/             # 
        Main.js             # 默认的controller

packages/                   # Sencha Cmd 功能包包放的地方

build/                      # 编译后的文件

4、使用虚拟机访问下，运行下边的命令建立虚拟目录服务器

sencha web start -map test1=app路径,abc=app2路径...

这样就能够经过http://localhost:1841/test1 或者http://localhost:1841/abc访问了，直接 sencha web start默认的是Sencha Cmd安装目录

看效果

可使用CTRL+c中止虚拟机服务或者从新打开一个命令行，输入 sencha web stop便可

再续点东西

5、app生成

使用下边的命令，可是必需要定位到你的应用程序根目录才能够/path/test1

sencha app build  //运行后主题和js将在build文件夹内，本身看结果

记得sencha cmd的命令格式，看下边的东东就比较容易理解命令的使用了

sencha [类别] [命令] [选项...] [参数...]  // 例如： sencha  generate  app  myapp  路径
sencha help [类别] [命令]   //寻求帮助的

6、扩展应用程序

命令必须执行定位在你的app目录下

cd /path/to/MyApp  //命令的执行必须定位
sencha generate model User id:int,name,email  //生成model

sencha generate controller Central  //生成controller

sencha generate view SomeView  //生成view

7、自定义生成方式

若是一个解决方案就一个app，修改.sencha/app/sencha.cfg便可，不然也须要配置.sencha/workspace。 .cfg配置不生效的状况下将选择xml配置方式的ant脚本

app.classpath=${app.dir}/app,${app.dir}/app.js //告诉cmd应用程序的目录和入口逻辑文件所在位置

不一样级别的cfg文件具备不一样的做用级别