dva+antd：按页面组织文件

看了相关的文章，也看了相关的例子，最后终于明白，这是典型的“单页面系统”。平时工作中遇到的，使用情形有点特殊：这是前后端融合的模式，页面的跳转都在后端工程的vm中，页面的title以及导航菜单部分都在后端工程中的。前端开发的是页面中的内容。所以，本质上，架构就是可以理解为是“多页面系统”，并且router部分基本就不需要了。
按照官方文档，dva+antd框架下的应该是“单页面系统”，这才是主流方向。
虽然是“单页面系统”，也是可以按照“多页面系统”系统的方式去命名文件夹和文件名。比如page->类别名称->页面名称->各种文件
这里的各种文件，可以分为model, component,等等。
dva+antd项目实战

环境准备

安装node

• node可以上官网安装，用最新版本的就行
• npm可以用，node自带的。如果想要速度快一点，可以安装比如tnpm之类的

安装 dva-cli

npm install dva-cli -g

查看是否安装成功，看下版本：

dva -v

创建新项目，用dva的new命令。这个就相当于脚手架了，整个工程框架都搭好了，比较省心。

dva new 工程名字

切换到工程目录下，启动npm，就会启动页面。默认是有一个欢迎页面的。Chrome中输入http://localhost:8000 就可以看到了。

正式使用的时候，这个默认的欢迎页面是要删掉的，或者从route.js里面去掉。

安装 antd

dva是一个框架，而antd是一些封装好的组件。需要用npm安装。babel-plugin-import是按需加载插件，最好也装一下。

npm install antd babel-plugin-import --save

编辑.roadhogrc，使 babel-plugin-import 插件生效。.roadhogrc是配合dva的一个配置管理工具

"extraBabelPlugins": [
   ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
],

工程目录

脚手架会自动生成目录，一般是这样的

目录结构.png
这个就是“单页面系统”，而且是按照“角色”归类文件的方式组织的。这是脚手架自动生成的，可以在这个基础上改成具体的业务页面。下面的例子非常好，可以做参考：
12 步 30 分钟，完成用户管理的 CURD 应用

在我们的实际使用中，成员习惯了按照“页面”的维度去组织文件，将一个页面要用到的东西都放在同一个文件中，不用四处切换了。所以，要对上面的目录结构进行重新组织

• mock：这里可以根据后台接口，自己写json文件，用来调试前端页面。应该有些作用吧，先留着。不过我们一直没有使用，这么折腾，还不如直接写死调页面来得方便。

• public：基本没用，也是一个空文件夹，在WebStorm中可以看到有个.gitkeep隐藏文件。这个隐藏文件只是个占位符，让Git仓库能够保存这个空文件夹。可以删除，像public、common这种都不是好的命名方式。

• src-assets：资源文件夹。这种复数命名方式很多地方用，也是不错的方式。不过我们更愿意用单数。这里改为image，放图片。如果涉及的音频，视频，到时候再添加同级的audio、vedio。图片这种并不是每个页面都要用到的，集中起来还是方便的。当然页面私有的图片放页面自己单独的文件夹里，也是可以的。这里至少可以放一些多个页面共用的图片。

• src-components：名字改为component，放公共控件，类型只能是UI Component，采用函数式的写法。

• src-models：去掉，每个页面文件夹下新增一个mode.js文件就可以了。namespace可以和页面同名。如果页面复杂，需要有多个的话，增加一个model文件夹，文件名和namespace按照业务需要来取

• src-routes：去掉。这个其实是需要connect的container component。可以放在每个页面文件夹中，名字和页面一致，用ES6 class的风格来写。如果是组件，可以再加一级文件夹，以组件名字当文件夹名字。以页面为单位，安组件思想来组织就可以了。

• src-sevices：改为service。各个页面公用的服务写在这里。一般以类的方式导出，哪种有自己状态，有业务内容的，跟界面无关的内容。

• src-utils：改为util。各个页面公用的工具函数写在这里。一般以对象的方式导出，没有自己的状态。将功能类似的一组函数集合在一个对象中，方便使用。

• src-index：工程入口，保持不变

• src-router.js：路由表，保持不变

• src-：目录下新增page，放页面，可以有模块子目录，每个页面至少一个目录。新增constant，放公共常数，按照对象方式组织，小驼峰命名。当然，每个文件的常数可以用大写命名，放各自文件中。

• 其他隐藏文件和package.json，保持不变。