目录架构

assets：

静态资源存放目录。主要就是存放系统需要用到的一些静态资源文件，如果有需要的情况下可以在里面建立子文件夹，便于区分静态资源属于哪个页面或者哪个模块。

components：

组件存放目录。主要存放各个模块需要用到的vue组件，组件的划分应该有：公共组件、模块组件，命名规则可以如下：

+components
    -common

    -module(模块名称,如：login)

组件的命名规则应该让人能很容易判断出来该文件的类型属于组件，如：HelloWorldComponent.vue。

consts：

静态变量存放目录。主要存放系统需要利用到的各种静态变量，如：后台请求的路径。在其他语言开发中，有一点是非常忌讳的，那就是魔法值，魔法值会使代码的可读性降低，增加维护成本；而且一旦变量不只在一个地方用到，在多处或者多个文件，一旦涉及到该变量的变更就会导致多处修改，又增加了维护成本，容易导致新的Bug出现。

libs：
库文件存放目录。在开发过程中总会遇到需要引入一些其他外部的库，而这些库在npm仓库中却又不存在，这个目录的用处就主要用来放置这些库文件。

mock：

mock模拟数据接口目录。用于提供模拟数据，方便测试。

plugins：

vue插件存放目录。主要存放一些比较通用的插件，命名规则可以如下：

插件用途+Plugin，如：ErrorMsgPlugin.js

router：

vue路由文件存放目录。一般一个就够，当然，如果系统够大，那么拆分也是有必要的，如果拆分路由文件的话，建议采用模块名+Router的方式。

services：

业务逻辑层。这层的主要目的就是为了将视图层与业务逻辑层解耦而划分出来，因为vue所代表的视图层已经承担了不少视图层的工作，不应该还让视图层承担业务逻辑层的工作，

store：

vuex状态管理器。如果模块较多可以按模块划分子文件夹，子文件较多的情况下命名规则建议：模块名+Store

utils：

工具类存放目录。主要放一些系统需要用到的通用小工具。如：http请求工具类、日期格式化工具类等。

views：

视图文件存放目录。如果视图较多可以划分模块子文件夹。