vue项目结构

前言

我在 搭建vue项目环境 简单说明了项目初始化完成后的目录结构。
但在实际项目中,src目录下的结构需要跟随项目做一些小小的调整。

目录结构

├── src                          项目源码目录
│   ├── api                      所有请求
│   ├── assets                 静态资源
│   ├── components        全局公用组件
│   ├── filtres                   全局 filter
│   ├── router                  路由
│   ├── store                   全局 store管理
│   ├── styles                  全局样式
│   ├── utils                    全局公用方法
│   ├── views                  views
│   ├── App.vue              入口页面
│   ├── main.js                入口js文件

api 和 views

上图是我在项目api文件下截的图,只是众多模块中的一部分。随着项目的逐渐完善,模块可能会越来越多。
因此,根据业务模块来划分views,将views和api一一对应,更方便维护。


components

我在components里面放置的是全局公用的组件,如收费组件,上传组件等等。页面级的组件放在各自views文件下。如下图所示:

store

官网 Vuex 是什么? 详细说明了Vuex的使用场景等。
使用场景说明:

  1. 多组件依赖于同一个数据:例如有柱状图和条形图两个组件都是展示的同一数据;
  2. 公用依赖的数据:一个组件的行为→改变数据→影响另一个组件的视图;
    如果有个别的需要从父组件传到子组件的数据或属性,可以使用Vue的props传递;使用Vue.$emit方法可以从子组件传值到父组件。
    个人建议不要为了使用Vuex而使用Vuex。

关于目录结构个说明,暂时只说到这里吧,如果有额外需要注意的地方,我会再来补充的。

posted @ 2018-01-19 16:36 桃之夭夭~ 阅读(...) 评论(...) 编辑 收藏