项目地址：https://github.com/PassionZale/3Years

上一篇，使用 webpack-simple 初始化项目后，整个项目结构非常简单。现在，还需要完善整个项目的目录结构。

对于 vue-project 来讲，整个项目的源码，均会放在 /src/ 中，我通常将其分成 9 个部分：

静态文件

/src/assets/：你可以在其中放入需要单独使用的一些图片，或 libraries。

组件 vue-component

/src/components/：存放所有的组件。

指令 vue-directive

/src/directives/：存放所有的自定义指令。

过滤器 vue-filter

/src/filters/：存放所有的自定义过滤器。

路由 vue-router

/src/routers.js：整个项目的路由，若不是很复杂，用一个 *.js 文件即可，甚至你可以写到主入口文件中，如：main.js。但请不要这么做

状态管理 vuex

/src/vuex/：存放所有的状态管理。

工具函数

/src/utils/：例如平时会写一些工具函数，都可以放在这里，例如使用 axios 发送 HTTP 请求，便可以封装一些工具方法，这样在写交互时会非常方便。

视图目录

/src/views/：将一些无状态，没有关联性质的视图放在其中，最常见的有 404 视图、注册视图、登录视图。

自定义常量

/src/constants/：例如一些操作反馈的提示语，我通常都会设置为常量，以此让整个项目的提示语统一起来，大概像这样：

需要注意的是，/dist/ 和 /src/main.js 需要和 webpack.config.js 相对应，一个是出口文件，一个是入口文件。

以下便是完善目录结构后的样子了：