今天开始，一点点记录一下使用extjs6.2.0搭建一个基础MVC结构的过程。没办法，记性差:)
这种结构的UI前端，主要是面向后台信息管理系统，可以最大限度的规范前端代码结构和数据结构。做网站 或者手机端，这种方式全引入了extjs,就不太合适了。
目标
- 左侧导航菜单+中间多页面布局，有header 有footer,SPA应用
- js文件动态加载、模块动态化按需加载
- 尽量多写点注释信息，哎，不得不说，还是....代码隔三日，如隔三秋啊！
开始.....
选个开发工具
结论:webstorm最新版。
比较了vscode 、sublime等等。最终选择了webstorm,咋办呢？idea的脑残粉，java开发一直用，习惯了，中毒太深。
extjs库准备
- 去官网下载一个gpl版本的压缩包,下载extjs.或者:extjs6.2.0度娘
- 新建一个目录extjs/6.2.0/拷贝相关目录和文件到这个目录下，具体是:
ext-all.js
build/classic/下面所有
build/packages/ux/classic/下面所有。
最终，看起来貌似如下：
建立项目
这个就不多说了，直接上图
目录和文件说明：
app/luter:extjs的app文件放这里，名字随意，随后会在入口app.js中配置动态加载路径用到
app/resource/css:放一些自定义样式
app/resource/images:放图！
app/vendor/:放第三方库
新建入口html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EXTJS6.2.0MVC</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入extjs的样式-->
<link href="app/vendor/extjs/6.2.0/classic/theme-crisp/resources/theme-crisp-all.css" rel="stylesheet">
<!--引入自定义样式-->
<link href="app/resource/css/style.css" rel="stylesheet">
</head>
</head>
<body>
<!--引入extjs相关js-->
<script src="app/vendor/extjs/6.2.0/ext-all.js"></script>
<script src="app/vendor/extjs/6.2.0/classic/theme-crisp/theme-crisp.js"></script>
<!--入口引入，整个应用在这个文件里初始化-->
<script src="app/luter/app.js"></script>
</body>
</html>
至此，基础骨架搭建完毕。
135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
