[Ext JS 7]基于NPM的开发| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS 7]基于NPM的开发

## [Ext JS 7]基于NPM的开发
### NPM是什么？
NPM，Node package manager，翻译过来是节点包管理器，是JavaScript的包管理工具， 类似Java语言的Maven，NPM作为Node.js的默认包管理工具， 通过安装Node.js就可以使用了。
### Ext JS对NPM的支持
Ext JS提供了对NPM的支持，也就是可以作为一个独立的包通过NPM进行管理，不同的是，因为是收费软件，　Sencha并没有将此包免费的放在共用的库中，而需要使用账号、密码登录，登录后通过NPM安装Ext JS的应用生成命令行工具（ext-gen），再使用该命令工具即可产生Ext JS类型项目的脚手架。所以，要使用NPM创建一个Ext JS类型的项目需要有以下步骤：
在Ext JS官方网站注册用户以下载Ext JS相关的工具及包
安装Ext JS的应用生成器
创建项目
启动项目
### 1. 申请试用账号
申请页面需要进入以下地址：
https://www.sencha.com/products/extjs/evaluate/
页面如下：
![](/upload/picture/2022-09-30/upload_b42456092cffcd941063124b1053e839.png)

输入完成之后，页面会跳出给出使用的用户名和密码， 这个试用账号的时间是30天。比如
```
npm username:chenoscarnpm password:sencha
```

### 2.使用账号、密码登录
在命令行终端输入以下命令进行登录。
```
npm login --registry=https://sencha.myget.org/F/trial/npm/ --scope=@sencha
```

登录需要输入用户名、密码和Email地址。

登录成功会显示如下信息
```
Logged in as chenoscar to scope @sencha on https://sencha.myget.org/F/trial/npm/
```

注意：https://sencha.myget.org/F/trial/npm/ 是试用版本的地址，如果已经购买了正式版，有正式的账号，则试用地址https://npm.sencha.com进行登录， 命令行如下：
```
npm login --registry=https://npm.sencha.com --scope=@sencha
```

### 3. 安装应用生成器（命令行：ext-gen）
应用生成器用于快速产生应用的脚手架，使用npm进行安装， 命令如下：
npm install -g @sencha/ext-gen

安装的效果页面如下：
![](/upload/picture/2022-09-30/upload_7c77b77981d51866da4d20599ad343cb.png)
npm install 是npm的模块安装命令
-g 全局安装
默认安装的最新版
### 4. 使用ext-gen创建项目
ext-gen app -n MyNpmExtApp

这个命令会创建一个名字是MyNpmExtApp应用，创建的目录名会自动设置为my-npm-ext-app。
创建完成的目录结构如下：
![](/upload/picture/2022-09-30/upload_54aa257477a081bba112d12311e1e789.png)
切换到项目目录， 使用npm命令启动项目
cd my-npm-ext-appnpm start
启动成功命令行会输出服务的端口（1962），

在浏览器输入http://localhost:1962/，页面载入效果如下：
![](/upload/picture/2022-09-30/upload_53647a2e71c3077ba454407e0f86087a.png)
### ext-gen 完整命令参考
ext-gen的完整命令参数如下：
ext-gen app (-h) (-d) (-i) (-t ‘template’) (-m ‘moderntheme’) (-c ‘classictheme’) (-n ‘name’) (-f ‘folder’)
![](/upload/picture/2022-09-30/upload_765c2be4f2306e5cb41f2a48013b03fc.png)

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS 7]基于NPM的开发

网站导航