小说排行榜完结版_Ext JS開(kāi)發(fā)基本環(huán)境準備與項目創(chuàng )建| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

Ext JS開(kāi)發(fā)基本環(huán)境準備與項目創(chuàng )建

## Ext JS開(kāi)發(fā)基本環(huán)境準備與項目創(chuàng  )建
Ext JS是前端開(kāi)發(fā)框架， 其可以整合到后端，也可以完美的作為前后端分離的前端。前端可以獨立開(kāi)發(fā)，與后端整合時(shí)只需要切換數據源即可。 這里為了簡(jiǎn)化介紹，搭建一個(gè)不依賴(lài)后端的應用，重點(diǎn)放在前端項目的介紹上。本篇示例的環(huán)境及工具包括：
OS，　Windows 10 , 64位
Sencha Cmd , 7.0.0.40
Ext JS SDK ,7.0.0
JDK 1.8
### 需要的軟件和工具
Ext JS相關(guān)的文件和工具
Ext JS開(kāi)發(fā)基本開(kāi)發(fā)環(huán)境至少需要以下兩個(gè)部分:
Sencha Cmd： 初始化項目、編譯項目或啟動(dòng)項目的工具。
這里使用Windows 64位的7.0版,下載的文件名是SenchaCmd-7.0.0.40-windows-64bit.zip。
Ext JS SDK：開(kāi)發(fā)工具包， 包括Ext JS的源碼等。
這里使用試用版，官方現在的文件名是 ext-7.0.0-trial.zip。
這兩個(gè)文件可以到 https://pan.baidu.com/s/1Gmj6QZ2JJXrMg-J4mK7Bdw 中下載。
### 工具安裝
JDK 安裝
Sencha Cmd需要JDK的支持，所以需要安裝JDK， JDK的版本使用 1.8 或11都可以， 這里使用1.8。
Sencha Cmd 安裝
解壓 SenchaCmd-6.6.0.13-windows-64bit.zip，解壓后的文件時(shí).exe后綴的可執行文件，文件名是：SenchaCmd-7.0.0.40-windows-64bit.exe， 雙擊安裝， 一直下一步即可，其中可以選擇安裝目錄，這里安裝到 D:\install\Sencha\Cmd\7.0.0.40目錄下，設置頁(yè)面如下：
![](/upload/picture/2022-10-10/upload_51a53851be4bedcbda1dcb05490572d0.png)

一直下一步安裝后， 開(kāi)啟一個(gè)命令行窗口， 輸入sencha或是 sencha help 命令回車(chē)后會(huì )顯示當前的版本信息以及Sencha Cmd命令的幫助。
![](/upload/picture/2022-10-10/upload_5351a2573e5a0939e15886f88b56c1b6.png)

一直下一步安裝后， 開(kāi)啟一個(gè)命令行窗口， 輸入sencha或是 sencha help 命令回車(chē)后會(huì )顯示當前的版本信息以及Sencha Cmd命令的幫助。
![](/upload/picture/2022-10-10/upload_c5b2805d3a8f229c34a3f53b866e9bcd.png)
Ext JS SDK 解壓
Ext JS SDK不需要安裝，直接解壓即可。在使用Cmd創(chuàng  )建項目的時(shí)候需要指定這個(gè)目錄。這里解壓到 D:\install\ext7。
![](/upload/picture/2022-10-10/upload_24b370cc37b40191fcfe9e976e8d203d.png)

解壓后的路徑結構如下：
![](/upload/picture/2022-10-10/upload_f70ff1b7c36d8bbdd9c28afbfd36bcbd.png)
使用Sencha Cmd創(chuàng  )建項目
這里將項目創(chuàng  )建到D:\demoworkspace\extjs 目錄中， 項目名為Ext7Demo。創(chuàng  )建步驟如下：
建立目錄D:\demoworkspace\extjs\ext7-demo-app，新開(kāi)命令行窗口，并切換到該 目錄。
d:cd D:\demoworkspace\extjs\ext7-demo-app
![](/upload/picture/2022-10-10/upload_166aff93f01d2dd9d05c6cefd833760d.png)
使用sencha generate 創(chuàng  )建項目
sencha -sdk D:\install\ext7 generate app  Ext7DemoApp ./

對以上命令參數說(shuō)明如下：
·-sdk D:\install\ext7 指定Ext JS SDK的目錄
generate app 初始項目
Ext7DemoApp 項目的名稱(chēng)，這個(gè)和項目的目錄名可以不一樣。 項目名稱(chēng)習慣使用駝峰法命名。（這里項目的目錄是ext7-demo-app）。這個(gè)項目名稱(chēng)會(huì )反應在產(chǎn)生的代碼中。
./ 項目代碼產(chǎn)生在當前路徑
命令執行的頁(yè)面如下：
![](/upload/picture/2022-10-10/upload_9b413162d1d1a63611155763f41ea8ce.png)

執行完成后項目的目錄結構如下圖所示。
![](/upload/picture/2022-10-10/upload_b5d1a1cbaf5cc387541bc01b1408b4dc.png)
### 啟動(dòng)項目
Web應用一般需要放入Web服務(wù)器中（比如Apache、Tomcat或IIS等），部署并啟動(dòng)服務(wù)器后通過(guò)瀏覽器進(jìn)行訪(fǎng)問(wèn)。如果安裝了Node.js 則不需要部署到Web服務(wù)器， 因為Node.js是基于 Chrome V8 引擎的 JavaScript 運行環(huán)境，看上去的效果是Node.js包含了一個(gè)Web服務(wù)器， 同樣，安裝了Sencha Cmd，也可以直接通過(guò)相關(guān)的命令啟動(dòng)應用并查看，不需要將應用部署到Web服務(wù)器。
確保命令行窗口在 D:\demoworkspace\extjs\ext7-demo-app路徑下，輸入命令：
sencha app watch

命令執行的輸入如下：
![](/upload/picture/2022-10-10/upload_65f2c7f9dd1e08675b399b2e7ae2710d.png)
從以上輸出可以看到， 應用啟動(dòng)了，訪(fǎng)問(wèn)的路徑是：http://localhost:1841。在瀏覽器中輸入這個(gè)地址，頁(yè)面效果如下：
![](/upload/picture/2022-10-10/upload_a30e70f99ceea8b903cb63f8ddaecf49.png)
### 項目說(shuō)明
通過(guò)Cmd可以快速創(chuàng  )建的一個(gè)項目的腳手架，這里創(chuàng  )建的項目包括經(jīng)典(classic)和現代（modern）兩種模式，關(guān)于classic和modern后面會(huì )介紹。
這兩種模式可以使用參數訪(fǎng)問(wèn)，經(jīng)典模式可以不需要加參數（默認），也可以帶上參數：
 http://localhost:1841?classic

現代模式訪(fǎng)問(wèn)通過(guò)如下地址：
http://localhost:1841/?modern

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

Ext JS開(kāi)發(fā)基本環(huán)境準備與項目創(chuàng )建

網(wǎng)站導航