**ttk前端框架目录结构**
![](https://box.kancloud.cn/9bc32ad2480ee67f42890e90446f22a5_301x643.png)
目录解析
1. index.js:工程的入口文件。
2. index.html:首页,设置项目的一些meta头信息和提供<div id="app"></div>用于挂载组件节点。我们开发的是单面应用。
3. app-loader文件夹:框架核心文件(封装了路由、状态管理等实现机制)
4. meta-engine文件夹:框架核心文件(页面解析引擎,支持将json转换成html)
5. componets文件夹:框架组件库(基于antd、fixed-data-table-2、echarts等组件的封装)
6. utils文件夹:存放开发过程中一些公共类库
7. dist 文件夹:默认 npm run build 命令打包生成的静态资源文件,用于生产部署。
8. node_modules:存放npm命令下载的开发环境和生产环境的依赖包。
9. assets文件夹:存放项目中需要用到的资源文件,css、js、images等。
10.
11. webpack.config.js:用于存放 webpack 相关配置和脚本。开发中用于配置 less、sass等css预编译库,或者配置一下 UI 库。
12. 其它根目录下的*.config.js:主要存放配置文件,用于区分开发环境、线上环境的不同。 常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩。
13. src下。
14. package.json:用于 node_modules资源部 和 启动、打包项目的 npm 命令管理。
- 序言
- 环境搭建
- node环境安装
- npm国内源切换
- git知识学习
- git安装
- git基本操作
- gitSSH配置
- vscode安装使用
- 安装
- git使用
- 前端开发环境
- 安装脚手架及创建页面
- 框架源码目录结构
- 相关API
- 项目启动
- 如何运行
- 如何兼容到IE8
- 启动参数说明
- IE8环境下兼容总结
- 注意的效率问题
- 框架亮点
- 相关技术栈介绍
- 功能强大的UI组件库
- 数据驱动视图
- 通用的公共类库
- 组件视图生成器
- 嵌入第三方站点
- 简单易用-react
- 简单易用-redux
- 1分钟入门示例(hello world)
- 高级概念
- 入门概念
- 高级概念-1
- 前后端联调
- 其它常用场景
- 详细介绍(action、data、reducer)
- action.js
- data.js
- reducer.js
- 进阶
- Mock数据
- 引入第三方插件
- 模块拆分
- iframe接入
- 页面模型生成器
- webpack@3升级到4.x
- 生产部署
- 生产打包
- nginx部署
- tomcat部署
- hbuilder打包部署
- nodejs部署
- docker部署
- 常见问题
- 兼容IE8
- 自动升级
- 贡献模板
- 浏览器支持统计
- 前端调试
- 注意事项(重要)
- 内存泄漏
- JavaScript内存那点事