[TOC]
### 1. 全局安裝 dva-cli 用于初始化項目:
~~~
方法一:npm install -g dva-cli
方法二:yarn global add dva-cli
~~~
### 2. 創建項目目錄,并進入該目錄:
~~~
創建dva項目:mkdir your-projectcd
進入dva項目:cd your-project
~~~
初始化項目:
~~~
dva init
~~~
### 3. 運行
>`npm start`或`yarn start`即可運行項目。
### 4. 可能存在的錯誤
1. 'roadhog' 不是內部或外部命令,也不是可運行的程序 或批處理文件
~~~
npm i roadhog -g
~~~
2. 使用yarn啟動時版本太低(warning Your current version of Yarn is out of date. The latest version is "1.15.2", while you're on "1.12.3".
info To upgrade, run the following command:)
~~~
npm install yarn@latest -g
yarn upgrade v1.21.3 //升級到指定版本
~~~
3.Module not found: Can't resolve '@babel/runtime/helpers/esm/extends
~~~
1.在package.json中替換版本"roadhog": "^2.5.0-beta.4"
2.刪除node_modules文件夾
3.npm i 然后 npm start
~~~
### 5. 項目目錄結構

### 6.使用yarn進行項目初始化
~~~
// 安裝依賴
$ yarn
// 啟動
$ yarn start
// 打包
$ yarn build
// 打包帶圖形化分析
$ yarn build --analyze
~~~
### 開啟mock服務以及運行項目
~~~
yarn?mock?
yarn?start
~~~
- 第一章 起步
- 第1節 創建react項目
- 第2節 hello world
- 第3節 數據綁定+事件處理
- 3.1 for循環事件處理中的傳參寫法、條件渲染
- 第4章 點擊切換文字
- 第5章 使用html寫react
- 第二章 運用
- 第1節 循環
- 第2節 實現一個簡單的TodoList
- 第2.1節 刪除
- 第3節 父子組件傳參
- 1. 父組件向子組件傳參
- 2. 子組件向父組件傳參
- 第4節 react-router實現一個簡單路由
- 第5節 生命周期
- 第6節 取數據
- 第 7節 獲取dom節點
- 第8節 雙向數據綁定
- 第三章 redux
- 第1節 介紹
- 第2節 安裝redux
- 第3節 使用
- 3.1 action
- 3.2 使用redux實現 todolist
- 第4節封裝redux中的action
- 第5節 redux-thunk中間件
- 5.1介紹
- 5.2使用
- 第四章 ant-design前端ui
- 第一節 安裝
- 第2節 使用
- 2.1 ant-design實現todoList增刪功能
- 第3節 使用整理
- 第五章 vue和react的比較
- 第六章 dva.js輕量級應用框架
- 第1節 介紹
- 第2節 安裝dva
- 第3節 頁面跳轉
- 1. 事件路由跳轉
- 2. 通過路由跳轉
- 第4節 組件之間通信
- 1. 父組件向子組件傳參
- 2. 子組件向父組件傳參
- 第5節 事件處理
- 第6節 發送請求
- 1. 通過路由判斷頁面渲染數據
- 2. 通過事件發送請求
- 第7節 運用
- 1. TodoList
- 1.添加數據
- 1.2輸入框敲回車觸發事件
- 2.刪除數據
- 3. 總結
- 第8節 配合antd使用
- 1. 引入antd
- 2.dva 使用antd注意事項
- 3. 知識點整理
- 第七章 dva后臺項目實戰
- 第1節 登錄加密
- 1.具體實現
- 第2節 知識點
- 第3節 樹結構
- 第八章 react新特性 hooks
- 第1節 hooks介紹
- 第2節 useState的使用
- 第3節 useEffect的使用
- 第4節 dva+antd+hooks企業后臺項目開發流程
- 第 5節 hooks 使用
- 運用
- 第6節 hook整理
- 第7節 react memo
- 第九章 react中使用Echarts
- 知識點
- react中使用mobx
- 知識點
- react中使用rem
- 遞歸實現目錄數
- react使用圖表
- react 同步更新策略
- antd tree默認展開無效
- ts中lint修復篇
- React-query方案
- 高階組件