zoukankan      html  css  js  c++  java
  • 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文件具有不同的作用级别

    劳神费力的,点歌赞打赏打赏
  • 相关阅读:
    十 mybatis逆向工程
    九 spring和mybatis整合
    八 mybatis查询缓存(一级缓存,二级缓存)和ehcache整合
    七 mybatis的延迟加载
    利用游标循环删除数据
    oracle11g空表导不出来的解决办法
    关闭启动数据库AWR功能
    数据库维护操作
    开启和关闭oracle数据库中的审计功能
    Oracle序列
  • 原文地址:https://www.cnblogs.com/zfcflower/p/3361024.html
Copyright © 2011-2022 走看看