Sencha CMD 4- 安装与首次使用

哥英文不好，网上搜索好多中文教程都是抄来抄去没有完整的介绍。所以写出来让与我一样的小伙伴惊呆下！

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

一、Sencha CMD是干啥滴！？

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

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

二、准备工作。

下载 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 的命令帮助
要更新到最新版本，使用 sencha upgrade 命令
提醒，下次运行sencha命令就直接在cmd命令行工具使用即可，不用定位了
下载EXTJS SDK并解压

三、试手

创建一个应用程序看看都有啥玩意，sencha cmd要创建一个测试用例app，必须得知道小伙伴把extjs sdk藏哪里了，否则没法创建！

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

第二种方式，更直接点

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

生成的效果如下

.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/                      # 编译后的文件

四、使用虚拟机访问下，运行下边的命令创建虚拟目录

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即可

再续点东西

五、app生成

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

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

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

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

六、扩展应用程序

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

cd /path/to/MyApp  //命令的执行必须定位

sencha generate model User id:int,name,email  //生成model

sencha generate controller Central  //生成controller

sencha generate view SomeView  //生成view

七、自定义生成方式

如果一个解决方案就一个app，修改.sencha/app/sencha.cfg即可，否则也需要配置.sencha/workspace。 .cfg配置不生效的情况下将选择xml配置方式的ant脚本

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

不同级别的cfg文件具有不同的作用级别

巴特西

Sencha CMD 4- 安装与首次使用

最新文章

热门文章