哥英文不好,網上搜索好多中文教程都是抄來抄去沒有完整的介紹。所以寫出來讓與我一樣的小伙伴驚呆下!
這篇主要是安裝,后續慢慢更新
一、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命令就直接在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文件具有不同的作用級別