Extjs6 开发环境文档.docx

### Extjs6 开发环境构建知识点详解 #### 一、Extjs6简介及应用场景 Extjs 是一款基于 JavaScript 的开源框架，它提供了丰富的 UI 组件和强大的数据处理能力，适用于构建复杂的 Web 应用程序。Extjs6 版本更是加强了对现代 Web 技术的支持，包括对 HTML5 和 CSS3 的兼容性。 #### 二、搭建Extjs6开发环境所需工具介绍 1. **Sencha Cmd**：这是一个官方提供的命令行工具，用于管理 Extjs 应用程序的生命周期，包括创建、编译、打包等操作。通过 Sencha Cmd，开发者可以轻松地管理和部署 Extjs 项目。 - 版本：Sencha Cmd 6.7.0.63 (文中提到的版本) - 平台：Windows 64-bit 2. **Extjs SDK**：包含 Extjs 框架的所有核心文件和资源，是开发过程中必不可少的一部分。 - 版本：Extjs 6.2.0 GPL 版本 #### 三、安装步骤详解 ##### 1. 安装 Sencha Cmd - **下载**：首先从官网或其他可信来源下载 Sencha Cmd 的 Windows 64-bit 版本安装包。 - **安装**：按照安装向导的提示完成安装过程。注意记录安装路径，例如文中提到的安装路径为 `C:\Users\Arison\bin\Sencha\Cmd`。 - **验证安装**：打开命令提示符，切换到安装目录并输入 `senchahelp` 命令，如果能看到帮助信息，则表示安装成功。 ##### 2. 配置系统环境变量 - **添加环境变量**：创建新的系统变量 `EXTJS_CMD_HOME`，其值为 Sencha Cmd 的安装路径。 - **编辑 Path 变量**：在系统的 Path 环境变量中添加 `%EXTJS_CMD_HOME%`。 ##### 3. 安装 Extjs SDK - **下载**：下载 Extjs 6.2.0 GPL 版本 SDK。 - **解压**：将下载的 SDK 包解压到指定路径，例如文中提到的路径为 `C:\ExtJs\ext-6.2.0-gpl\ext-6.2.0`。 #### 四、创建并运行Extjs6项目 ##### 1. 创建项目 - **命令格式**：在命令行中输入以下命令创建项目： ```shell sencha-sdk [SDK路径] generate app [项目名称] [项目路径] ``` - **示例**：根据文中的例子，命令为： ```shell sencha-sdk C:\ExtJs\ext-6.2.0-gpl\ext-6.2.0 generate app extjsDemo C:\Project\ext ``` ##### 2. 运行项目 - **命令**：在项目目录下输入 `sencha app watch` 命令启动开发服务器。 - **访问地址**：项目运行后，默认访问地址为 `http://localhost:1841`，如果已有其他服务占用此端口，则会自动分配一个未被使用的端口。 #### 五、项目目录结构解析 项目创建完成后，通常包含以下主要文件和文件夹： - **app/**：存放应用程序的主要文件，如视图、控制器、模型等。 - **build/**：编译后的文件存放于此。 - **classic/**：经典主题的相关文件。 - **resources/**：存放项目所需的静态资源，如图片等。 - **src/**：源代码存放位置。 - **theme/**：主题相关的文件。 - **webpack.config.js**：Webpack 配置文件，用于构建项目。 #### 六、常见问题与解决方法 1. **无法启动开发服务器**：确保已正确配置环境变量，并且命令行输入无误。 2. **页面空白或加载失败**：检查网络连接和端口号是否正确。 3. **构建失败**：查看错误日志，检查是否有语法错误或依赖项缺失等问题。 通过上述步骤，您可以成功搭建 Extjs6 的开发环境，并能够创建和运行基本的 Extjs 项目。对于初学者来说，熟悉这些基本操作是十分重要的。同时，随着项目的复杂度增加，还可以进一步了解如何使用 Sencha Cmd 来优化构建过程，提高开发效率。