项目地址: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
相对应,一个是出口文件,一个是入口文件。
以下便是完善目录结构后的样子了: