Sencha CMD 4- 安装与首次使用

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

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

一、Sencha CMD是干啥滴！？

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

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

二、准备工作。

1. 下载 Java Runtime Environment 版本需要大于1.6，并安装，因为Sencha CMD是java编写滴
2. 从 rubyinstaller.org 下载Ruby，版本小于1.9.3，并安装
   
   编辑扩展主题样式需要compass，运行安装好的ruby下的命令行工具，输入下边的命令慢慢等待远程安装完成

   gem install compass

3. 下载 Sencha CMD，安装目录默认在本地用户文件夹下，你可以改变，但是装多个版本，必须在同一个地方哦，官方是这么说滴：（
   安装完成后，第一次使用CMD命令行工具的 cd命令先定位的Sencha CMD的安装目录运行下边的命令，看看都有啥，不多解释了

   sencha help [命令参数--可以看到每个命令的帮助，这个玩意很有用啊，见五大条后介绍哦]

   例子  sencha help  web  你就能看到 shencha web 的命令帮助

   要更新到最新版本，使用  sencha upgrade 命令
   提醒，下次运行sencha命令就直接在cmd命令行工具使用即可，不用定位了

4. 下载EXTJS SDK并解压

三、试手

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

1. 第一种方式，使用cd线定位到sdk解压目录，然后用下边命令创建app

   sencha ganerate app 名称  app要放的地方路径

2. 第二种方式，更直接点

   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文件具有不同的作用级别