关于vue项目的文件组织

最近参与了好几个项目，都是以vue-cli脚手架生成的项目，参与完成之后，有点关于项目文件组织的看法，很想聊聊。

关于目录

由vue-cli脚手架生成的项目，都会生成一个基本的目录格式。

类似于这种，项目中我们还会用到vuex，所以多数情况下，我们会在src目录下，创建一个store文件夹，存放关于vuex数据。
然后就是项目文件了。

项目中，会创建如下多个目录，进行业务组织
- api: 存放所有接口调用的文件
- assets: 图片、css等
- components: 组件，纯组件，基本上不包含业务代码
- icons：存放项目中用到的icon图标，svg文件
- plugins：存放第三方插件，诸如UI插件element-ui, 图标插件echarts等等
- resource: 存放一些额外的资源文件（很多项目未必会有），类似于echarts绘制地图所需的json文件
- utils：工具存储，axios拦截器，常量文件等等
- vendor: 基本上很少用到，我仅仅存放了一个table2excel的js导出文件，也可以存入utils
- view或者pages：存放真正的业务文件

如此，基本上够项目使用了，至少到目前为止我是够用的。
关于业务代码文件view，还需要多说一下，一定不能所有业务组件直接就丢在view里面，会在下面的关于代码风格细说。

关于代码风格

vue.js官方其实推出了官方风格指南，不知道是不是vuer是不是都看了，或者看了之后，是否去遵守。即使不遵守他官方风格指南，那是不是理解了他出这一份指南的良苦用心，而形成了自己独特的代码组织风格。
如果什么都没做，依然属于随心所欲，那么还是去看看，仔细看看。

介绍一下我的代码组织，基本上以业务导航为基本的指导方向，每一个菜单为一个独立文件夹，文件夹首字母大写
- User: 用户管理模块，基本上包括登录、注册、找回密码
- 404：提供一个404页面，属于业务友好
- Home: 首页，基本上每个项目都必然有首页的存在，不管首页内容是啥
- ...

剩下的就是每一个菜单一个文件夹，点击该菜单所进入的页面，命名为index.vue，唯一的首字母小写的.vue文件，其他的所有vue文件组织，遵循官方风格指南。

关于代码规范

既然说到了代码风格，那么必然涉及到代码规范的问题，尤其是在多人协同开发的情况下，如果每个人所用的ide不一样，又没有统一的代码规范，那么利用svn或者git做代码托管之后，更新别人的代码和提交自己的代码，将是一种无比痛苦的事情。

举一个简单的例子，关于代码缩进，有人用两个空格，有人用4个空格，然后拉去代码之后，在自己的ide打开，遇到安装了prettier插件，那是不是想死？

所以有必要统一代码规范，尤其是同一个公司的项目。

那么，不得不说eslint了，项目启动之初，安装eslint，并修正ide的prettier插件的格式化规则，必不可少，虽然这必然是一个痛苦的过程，但是好在只要遵守同一份代码规范，那么这就是一劳永逸的工作。

转载于:https://www.cnblogs.com/zhuhuoxingguang/p/11504396.html