### 本節將介紹如何在項目中使用TTK框架
按國際慣例,首先,我們從hello world開始。

1. 用腳手架提供的指令`ttk app`來新增一個空白頁
如:`ttk app test/helloworld`
注:上述命令中helloworld為空白頁的名稱,test是模塊名稱(注意:test屬于模塊名稱,在website/apps下面有個test的文件夾,如果該文件夾不存在,會引發一些異常)
```
如果test文件夾不存在,可以在根目錄下執行 ttk modules test命令在創建新的模塊。
```
創建后,空白頁目錄結構說明:
:-: 
*****
頁面文件結構說明:
文件名 | 備注
---|---
`index.js` | 空白頁描述頁
`data.js` | 頁面模型元數據、初始化頁面state
`action.js` | 頁面模型的事件
`reducer.js` | 頁面state管理,負責渲染頁面
`webapi.js` | 調用后端服務配置文件
`component.js`| 頁面渲染入口
`config.js` | 本頁配置文件
`mock.js` | 本地模擬數據
`style.less` | 樣式文件
創建成功后使用npm run start即可預覽
### 視頻介紹
- 序言
- 環境搭建
- 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內存那點事