看了相关的文章，也看了相关的例子，最后终于明白，这是典型的“单页面系统”。平时工作中遇到的，使用情形有点特殊：这是前后端融合的模式，页面的跳转都在后端工程的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，保持不变。
网友评论