Lei Zhang

时光已逝永不回,
往事只能回味。
... ...
春风又吹红了花蕊,
你已经也添了新岁。

▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 96%



3Years-6 目录结构

2018-04-16 » 没填完的坑 / 3Years , Tutorial , Vuejs , 环境搭建

项目地址: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 相对应,一个是出口文件,一个是入口文件。

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

展开选填信息