dvaJS安装以及脚手架生成的目录讲解

首先我们要安装dva-cli

$ npm install dva-cli -g
$ dva -v

如果dva-v后出现了版本号说明已经安装dva的脚手架已经成功了。

而后我们就可以使用dva-cli来快速生成dvaJS项目结构了

在命令行dva new yourProjectName
而后当它问你Do you insist on using dva-cli?(y/N)的时候输入 y，回车 就可以了
当看到下面这个界面的时候说明项目创建成功了：

接下来我们来一起分析dva-cli生成的项目结构：

1. node_modules文件夹里面的内容是根据你的package.json所安装的依赖包，当你的项目目录中没有node_modules文件夹的时候可通过npm i 或者cnpm i亦或者是yarn install来进行安装

2. public文件夹里面有一个index.html，我们来看一下index.html
   
   里面就只是很普通的html，里面有一个div，id是root，请记住这个id，待会在别的文件里是会再次见到它的。

3. src目录分析：
   

   1. assets文件夹
      打开assets文件夹会发现只有一个yay.jpg图片，其实这个文件夹就是专门用来放置图片和icon图标的。将这个项目的图片和图标都放置在这个文件夹进行管理。
   2. components文件夹
      components文件夹里面有一个Example.js文件，这就是dvaJS提醒你放组件的位置，项目中所有可复用的组件都应到放到components文件夹里面进行管理。
   3. models文件夹
      models文件夹里面就是用来管理全局的状态的，就是redux里面的store，如果你不知道也没关系，笔者在之后会单独整理这方便的博客。
   4. routes文件夹
      routes文件夹里面专门用来放置你的路由页面文件。
   5. services文件夹
      services文件夹里面的文件配合utils文件夹里面的方法进行你的ajax请求。
   6. utils文件夹
      放置你的全局共用的方法。
   7. index.js文件
   8. index.less文件 - - 这个应该不用说了。。就是css样式表
   9. router.js文件 - - 配置路由的文件，关于路由的配置可参考笔者的React路由配置：https://blog.csdn.net/weixin_43606158/article/details/90239415

4. .editorconfig文件 - - 编辑器的配置

5. .eslintrc文件 - - ESLint的配置

6. .gitignore文件 - - 上传到远程仓库需要排除的文件定义

7. .roadhogrc.mock.js文件

8. .webpackrc文件是用来配置项目的，比如antd的按需加载之类的，可观看笔者dvaJS分类的其他文章进行配置。

• 前后端配合的配置：前端代码访问后端数据库
• 配置antd以及按需引入：dvaJS配置antd

9. package.json文件 - - 项目的启动命令打包命令等配置以及查看开发环境和生产环境的依赖。

未完待续。。。