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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM