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

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

dva项目的目录结构如下

主要是public和src两个大目录
public 文件夹中存放静态资源，比如图片，静态页面 html 等。
src 文件夹是项目代码存放文件夹。重点文件

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

后面分析antd4的目录结构，相比于dva+antd，antd4是antd+dva+umi，多了一层umi，可能会有点小小的不同

dva脚手架创建的项目目录结构分析相关推荐

vue 目录名称详解_使用脚手架创建vue项目目录详解
1.目录 build 构建脚本目录: 配置了webpack的基本配置.开发环境配置.生产环境配置等: 2.目录 config 构建配置目录: 配置了路径端口值等 3.目录 lib-img 我自己建的, ...
vue项目结构php写哪里,Vue项目的创建,以及项目目录结构的分析
Vue项目环境搭建""" node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内源 ...
nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案
nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案参考文章: (1)nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案 (2)https://www.cnblogs.com/jk ...
基于脚手架创建react项目
React(一)使用脚手架创建React项目: 转自: https://www.cnblogs.com/yulingjia/p/9583244.html D:\workbench_ws>npm ...
Vue脚手架创建的项目的启动流程
Vue脚手架创建的项目的启动流程当利用vue脚手架创建项目之后利用 npm run serve 启动开发环境,我们就从这里来开始分析. 入口分析首先从package.json中的脚本配置来看,np ...
猿创征文｜【Vue五分钟】 Vue Cli脚手架创建一个项目
目录前言一.创建项目的操作步骤选择路由模式选择CSS预编译器选择如何存放配置自动下载项目所需的包文件二.启动vue项目 1.项目目录 2.启动项目 3.浏览器打开项目首页界面三.项目的 ...
使用vite脚手架创建vue项目
选择列表方式创建项目 npm init vite # 等价于 npm create vite # 使用yarn yarn create vite # 使用pnpm pnpm create vite 会 ...
我的Android进阶之旅------Android项目目录结构分析
此文章来自"博客园"博主,仅在此借鉴,学习 1.HelloWorld项目的目录结构 1.1.src文件夹 1.2.gen文件夹 1.3.Android 2.1文件夹 1.4.ass ...
Android项目目录结构分析
此文章来自"博客园"博主,仅在此借鉴,学习 1.HelloWorld项目的目录结构 1.1.src文件夹 1.2.gen文件夹 1.3.Android 2.1文件夹 1.4.ass ...

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

dva项目的目录结构如下

dva脚手架创建的项目目录结构分析相关推荐

最新文章

热门文章