vue项目构建

一、项目使用技术栈:

vue2、 vue-router、 vuex、 axios、关于ui的框架选取,依项目而定(例如pc版element ui,ivew ui,移动端 mint ui)。

二、项目的搭建:

个人习惯使用vue-cli脚手架构建项目,项目使用vue-cli脚手架工具生成项目结构如下:


同时,对于静态文件而言,可以放在static文件夹便于统一缓存处理,static文件夹目录如下:


对于项目结构而言,个人认为对于项目各功能模块的统一集中单一的设计划分便于维护管理,故src目录设计如下:


目录配置说明如下:

1、api接口文件,用来对请求接口进行统一的配置,便于维护;

2、config用来定义常用的配置

3、Filter用来定义过滤器

4、Http:用来定义请求拦截器,统一的请求拦截配置,如果对安全性要求较高也可以统一对请求加密。


5、Lang国际化多语言包(非国际化项目不需要此目录)

6、Router定义统一的路由文件,便于管理维护和监听。

7、store状态管理,对于大型项目而言,尽量在modules里面按功能划分不同的状态文件,而非耦合在一起,而且尽量只对数据的操作进行处理,对于其它的操作不建议放在vuex里面(例如axios数据请求),而保持单一的数据处理功能。


8、utils常用方法,功能的封装,高可用性,减少重复。

9、补充如果有需要自定义指令之类的,也可能新增指令文件。


配置功能组件Components功能模块划分设计如下:


说明:

1、common用来存放通用组件 ;

2、home组件用来分放各个功能模块,示例代码如下:


3、systemManage作为一个功能模块,通过index.vue文件进行本模块各功能的路由分放。切换不同的功能页面。Index.vue示例代码如下:


三、项目的注意事项:

1、对于通用组件的封装重构,可以提高复用性;

2、关于父子组件传参,尽量使用props,emit而非vuex,vuex用于多组件之间。

3、不建议使用scope,破坏了css的共享性;同时也不建议在组件里面style写样式,如果按需加载时,多组件共享样式。会发生样式未加载情况。

4、遵守项目的编码规范。

补充:

个人负责的vue项目的架构实际使用经验而言,项目在使用三百多个路由时,未发现问题,同时对于大型系统的项目,个人感觉可以拆分成不同的子系统进行组合,不过没有机会实践。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 目录 一、项目结构的核心思想 二、项目目录结构 三、资源路径编译规则 四、index.html 五、build目录...
    科研者阅读 11,492评论 0 40
  • 亲爱的的母校, 我们快要走了, 还记得曾经吗? 我们进入了这若大的学校, 行走在三栋楼之间,学习,成长。 亲爱的的...
    杨明昕阅读 313评论 4 3
  • 当我们发现真实的自己是那么的不好的时候,我们是羞于面对的,第一时间是本能地遮盖起来,但是对于照妖镜似的过来人或者是...
    朵朵颐阅读 179评论 0 2
  • 待约 花待开时烂漫开,君便来时款款来。 春风十里相依路,氤氲满目香满怀。
    闲梦远psm阅读 399评论 0 2
  • 姐姐还在人世的时候,有一阵情绪特别失控,姐妹俩轮着发作。那时候的姐姐,很是坚强,尽管她患着肠癌,作为妹妹,也许是那...
    敢说真话的妖精阅读 514评论 1 4