Sencha CMD 4- 安裝與首次使用

時間 2019-11-29

標籤 sencha cmd 安裝首次使用简体版

原文原文鏈接

哥英文很差，網上搜索好多中文教程都是抄來抄去沒有完整的介紹。因此寫出來讓與我同樣的小夥伴驚呆下！css

這篇主要是安裝，後續慢慢更新html

1、Sencha CMD是幹啥滴！？前端

它是服務使用EXTJS SDK開發前端的玩意，由於後續只介紹關於extjs相關的，煎茶觸摸相關的掠過，由於哥不須要，因此暫時不研究。java

它能幫你在開發中自動生成extjs應用程序框架；
能智能的感知你都使用了那些組件JS文件從而使發佈後的js最小化；
沒裝IIS沒關係，它能幫你簡歷本地累死http://localhost：****/app 這樣的web服務器
封裝、打包和分佈式開發
還能幫你實現瀏覽器兼容須要的切片功能。好比css3的圓角在不合適的瀏覽器中用切好的圖片代替
... ...
好東西，我之前開發直接在項目中引入ext-all.js壓縮後都要一兆多，css也幾百KB，若是互聯網上使用是比較杯具的，即便使用cdn加載下用戶也須要不少時間的！！小夥伴驚呆了，決定安裝學習下

2、準備工做。css3

下載 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 的命令幫助web
要更新到最新版本，使用 sencha upgrade 命令
提醒，下次運行sencha命令就直接在cmd命令行工具使用便可，不用定位了
下載EXTJS SDK並解壓

3、試手json

建立一個應用程序看看都有啥玩意，sencha cmd要建立一個測試用例app，必須得知道小夥伴把extjs sdk藏哪裏了，不然無法建立！瀏覽器

第一種方式，使用cd線定位到sdk解壓目錄，而後用下邊命令建立app
```
sencha ganerate app 名稱  app要放的地方路徑
```

第二種方式，更直接點

sencha -sdk sdk所在目錄路徑 generate app 名稱  app要放的地方路徑

生成的效果以下ruby

.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/                      # 編譯後的文件

4、使用虛擬機訪問下，運行下邊的命令建立虛擬目錄服務器

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

再續點東西

5、app生成

使用下邊的命令，可是必需要定位到你的應用程序根目錄才能夠/path/test1

sencha app build  //運行後主題和js將在build文件夾內，本身看結果

記得sencha cmd的命令格式，看下邊的東東就比較容易理解命令的使用了

sencha [類別] [命令] [選項...] [參數...]  // 例如： sencha  generate  app  myapp  路徑
sencha help [類別] [命令]   //尋求幫助的

6、擴展應用程序

命令必須執行定位在你的app目錄下

cd /path/to/MyApp  //命令的執行必須定位
sencha generate model User id:int,name,email  //生成model

sencha generate controller Central  //生成controller

sencha generate view SomeView  //生成view

7、自定義生成方式

若是一個解決方案就一個app，修改.sencha/app/sencha.cfg便可，不然也須要配置.sencha/workspace。 .cfg配置不生效的狀況下將選擇xml配置方式的ant腳本

app.classpath=${app.dir}/app,${app.dir}/app.js //告訴cmd應用程序的目錄和入口邏輯文件所在位置

不一樣級別的cfg文件具備不一樣的做用級別

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。