dva+antd:按页面组织文件

作者:澳门银河娱樂城   来源:http://www.nanquanpc.com    栏目: 澳门银河娱樂城    日期:2019-10-10

  看了相关的文章,也看了相关的例子,最后终于明白,这是典型的“单页面系统”。平时工作中遇到的,使用情形有点特殊:这是前后端融合的模式,页面的跳转都在后端工程的以及导航菜单部分都在后端工程中的。前端开发的是页面中的内容。所以,本质上,架构就是可以理解为是“多页面系统”,并且

  按照官方文档,dva+antd框架下的应该是“单页面系统”,这才是主流方向。

  虽然是“单页面系统”,也是可以按照“多页面系统”系统的方式去命名文件夹和文件名。比如page-类别名称-页面名称-各种文件

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

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

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

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

  这个就是“单页面系统”,而且是按照“角色”归类文件的方式组织的。这是脚手架自动生成的,可以在这个基础上改成具体的业务页面。下面的例子非常好,可以做参考:

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

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

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

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

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

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

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

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

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

  Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...

  Ubuntu的发音 Ubuntu,源于非洲祖鲁人和科萨人的语言,发作 oo-boon-too 的音。了解发音是有意...

  初始化 安装 dva-cli 用于初始化项目: 创建项目目录,并进入该目录: 初始化项目: 然后运行 npm st...

  本文中我会介绍一下相应的dva的相应知识点和实战练习。同时我也会介绍使用dva的流程,以及介绍使用dva中的坑。希...

  最近学习没有什么动力,于是开始决定学习vim的使用,主要的参考材料是如下: VIM的历史介绍 COOLSHELL简...

上一篇:文件的物理结构直接与外存的组织方式有关       下一篇:没有了