extjs创建html模板,sencha cmd创建extjs admin-dashboard模板前端项目

1.下载extjs

右键打开index.html,或者放到tomcat中去访问，打开后直接看到的是extjs的案例文档。

位置1标的就是今天的主角，位置2就是全部的案例，这就是ext超级强大的地方，代码不会写，大量的案例再这里直接复制。

直接打开admin dashboard案例。

简直太惊艳了，太喜欢了，和普通的extjs界面不一样，这个太漂亮了，这就是我想要的界面，用手机访问一下，还支持自适应。

3.下载sencha cmd

其实我有时候是直接引入js文件做extjs项目，有时候是用这个工具构建。个人喜欢直接引入，简单直接。构建麻烦的感觉。但是有这么方便的工具，

extjs又一次震撼到我了。

下载好了，安装，一直next,安装完。

4.使用admin dashboard模板构建extjs 项目

打开window命令行工具cmd。

输入一下 sencha,一般都会输出版本号，没有的话还得配置一下环境变量。

切换目录到刚才第2步解压的目录中。

然后输入命令：

sencha generate app -s templates/admin-dashboard/ app app

解释：sencha generate app(使用sencha构建一个app) -s templates/admin-dashboard/(使用这个位置得模板) app(构建应用得名称) app(构建应用存放得地址)

等运行完，就会看到解压得目录中多了一个app文件夹

文件夹中得内容如下：

直接打开index.html,发现和刚才看得admin dashboard得案例界面一摸一样。

到这里extjs 使用admin-dashboard模板创建web前端项目就完成了。

你自己的代码可以直接写再这app文件夹里面了

5.build项目

继续再命令行输入

sencha app build

执行完成后，看了输出的日志，

发现把我build的项目默认输出到ext-6.2.0\build\examples\admin-dashboard。你也可以更改你app文件夹中的app.json,修改输出路径。需要找到下面的参数修改：

"output": {

"base": "${ext.dir}/build/examples/admin-dashboard/${build.id}",

"page": "../index.html",

"manifest": "../${build.id}.json",

"appCache": {

"enable": false

}

},

然后整个就完成了，build后的这个才是我们开发完成了，真正生产环境要用到的最终项目代码。

每次发布项目新版都要build一下？是呀 我也觉得好麻烦啊。但是可以结合jenkins一起来打包发布就方便很多。