dva脚手架创建的项目目录结构分析

比眉伴天荒 2023-07-17 07:06 3阅读 0赞

安装dva脚手架：`npm install -g dva-cli`  
查看dva版本：`dva -v`  
使用脚手架构建项目：`dva new project`  
等待构建完成后，cd project中，执行npm start就可以运行dva项目了。

##### dva项目的目录结构如下 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3NzA3NA_size_16_color_FFFFFF_t_70]  
主要是public和src两个大目录  
public 文件夹中存放静态资源，比如图片，静态页面 html 等。  
src 文件夹是项目代码存放文件夹。重点文件

*  /assets :放置静态资源 比如图片;
 *  ./components :放置木偶组件，只负责从./routes的智能组件来读取props填充展示，一般来讲是纯函数的react书写方式;  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3NzA3NA_size_16_color_FFFFFF_t_70 1]
 *  ./models :是一个处理数据的地方，比如在model里面调用./service输出的方法来获取数据填充到store;其实我觉得就是store的整体的集合，以 namespace作为唯一标识进行区分；  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3NzA3NA_size_16_color_FFFFFF_t_70 2]
 *  ./routes :放置若干智能组件的地方，智能组件里一般通过dva的connect（(\{yourModle\})=>(\{yourModle\})）（yourComponent）方法来和你的组件来实现数据互通的，生成带数据的活组件；（一般来讲智能组件的样式也在这级目录，因为组件就近维护原则吧）;  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3NzA3NA_size_16_color_FFFFFF_t_70 3]
 *  ./services :负责向后台请求数据，在services里调用后台提供的api获取数据;  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3NzA3NA_size_16_color_FFFFFF_t_70 4]
 *  ./utils :放置工具类：比如常见的后台接口请求工具类；这里是默认封装了fetch数据交互的方法，直接入参调用即可;  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3NzA3NA_size_16_color_FFFFFF_t_70 5]
 *  index.css :index.html的样式
 *  index.js :主页的入口位置，也是初始化dva的位置；什么 app.use( )/app.model( )/app.router( )/app.start( )都是在这里的完成的;  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3NzA3NA_size_16_color_FFFFFF_t_70 6]
 *  index.html :入口挂载dom的html模板;（这个可能也放在public目录中）
 *  router.js :配置路由的地方，会从./routes文件夹下引入写好的智能组件来组装页面，export default 出一个方法来生成router结构。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3NzA3NA_size_16_color_FFFFFF_t_70 7]  
    后面分析antd4的目录结构，相比于dva+antd，antd4是antd+dva+umi，多了一层umi，可能会有点小小的不同

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3NzA3NA_size_16_color_FFFFFF_t_70]: /images/20230528/ec30948e757d479b8bb1a1c0cee686b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3NzA3NA_size_16_color_FFFFFF_t_70 1]: /images/20230528/20d31ac983af4ecda322e76f0731d560.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3NzA3NA_size_16_color_FFFFFF_t_70 2]: /images/20230528/04f7655685b74c498281dd85a46249ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3NzA3NA_size_16_color_FFFFFF_t_70 3]: /images/20230528/6421d7b782db4a7291965542bd488c1e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3NzA3NA_size_16_color_FFFFFF_t_70 4]: /images/20230528/7cf62e5c15ea41e99eab16d2fd4326c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3NzA3NA_size_16_color_FFFFFF_t_70 5]: /images/20230528/2618b8e9a3ff434ca9ed9adc7f36a903.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3NzA3NA_size_16_color_FFFFFF_t_70 6]: /images/20230528/124c2f3d61d34caab4f3cb684c7c7d96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3NzA3NA_size_16_color_FFFFFF_t_70 7]: /images/20230528/df6f5710916849d08fc406b3b1aee5e5.png