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