sencha touch 入门系列 （三）sencha touch 项目创建

　　通过上一章节的学习，我们的开发环境已经配置好了，接下来我们开始创建第一个sencha touch的项目，网络上很多sencha touch的教程都是手动搭建项目的，

　　不过手动搭建的项目缺少一些sencha cmd对项目代码打包压缩编译的关键文件，

　　所以在这里我们从创建项目开始都是使用sencha cmd工具，请确保上一章节中所有的环境配置都已经成功，

　　那么接下来我们开始我们的项目创建：

　　1.项目创建

　　　　在项目创建前，我们先确认下我们的sencha cmd的版本，

　　　　点击开始==》运行==》cmd,

　　　　键入sencha，会显示cmd的版本，

　　　　现在最新的是4.0，如果不是最新的版本，可以键入指令　　　　

　　　sencha upgrade

　　　　该指令会自动从远程服务器上更新sencha cmd的版本，

　　　　确认版本更新完毕后，我们来创建一个新的项目，

　　　　用cmd创建sencha touch的项目需要在sencha touch的sdk包的环境下进行，我们有两种方式：

　　　　1.1 在sencha sdk包目录下进行创建

　　　　点击开始==》运行==》键入cmd，

　　　　一般默认显示是系统用户文件夹路径下，，

　　　　我的sdk包被我拷到了iis的站点文件夹下D:\webtest\touch-2.3.1，

　　　　所以这里我输入d:,然后回车，

　　　　cd D:\webtest\touch-2.3.1，

　　　　进入到sdk包目录下，如图:

　　　　

　　　　这个时候，我们运行sencha cmd创建项目的指令

　　

　　  sencha generate app MyFirst ../MyFirst

 

　　　　generate app是创建一个新的项目，

　　　　第一个参数MyFirst对应的是项目的名称，

　　　　第二个参数../MyFirst对应是项目的输出地址，是相对路径，指向是cmd当前指定路径的上级目录，

　　　　有web开发经验的同学应该一眼就能看懂，

　　　　指令执行后，如图所示：

　　　　　

　　　　在不报错的情况下项目就创建成功了，

　　　　此时在我的D:/webtest目录下就会生成一个MyFirst项目文件，这就是我们新创建的sencha touch项目，

　　　　因为已经在服务站点路径下，如果生成的项目路径不在web服务站点路径下，可以把项目拷过去，

　　　　接着我们可以打开浏览器通过http://127.0.0.1/MyFirst/进行访问，

　　　　在等在文件载入完成后，我们便能看到我们第一个项目了，如图:

　　　　

　　　　 是不是很兴奋，你可以试着调整下浏览器的窗口大小，整个项目完全是响应式的，会根据你的窗口大小调整布局

 　　　　有些人可能想直接点击新建项目下的index.html文件运行项目，此时页面会卡在载入界面并报如下错误：

 

　　　　这是因为cmd创建项目的时候，会生成一个bootstrap.json文件，这个文件的访问是在development.js中通过xhr的方式实现的

　　  var xhr = new XMLHttpRequest();
     xhr.open('GET', 'bootstrap.json', false);
     xhr.send(null);

　　　　需要http请求，所以会报错，

　　　　不过整个项目完成后用cmd指令打包后，json文件都会被去掉，这个时候就不会出现该问题了，

　　　　接下来我们讲一下另一种创建方式

　　　 1.2 通过cmd指令直接指定sdk路径创建

　　　　该创建方式跟上一种大同小异，唯一的区别在于，不用先将指令指定到sdk包路径下了，我们可以直接用

　　

　　 sencha -sdk D:\webtest\touch-2.3.1 generate app MyFirst D:\webtest\MyFirst

　　　　 我们在generate app 前面加上了

　　　　-sdk D:\webtest\touch-2.3.1，

　　　　-sdk后面跟的就是我们的sencha touch的sdk包的路径，这样执行上面的指令，跟我们方法一里的效果是一样的，

　　　　指令执行后，我们的MyFirst项目就被创建完成了

 

　　

　　 　　下一章我们将对生成的项目结构做系统的分析