【Hello VUE】暴学VUE之基础篇（五）

这篇文章主要内容来源开源项目vue-element-admin的教程：https://juejin.im/post/59097cd7a22b9d0065fb61d2#heading-2。我发现写得挺好的，就直接照搬了，原作者如果介意的话，请通知我哈。

目录结构

├── build                      // 构建相关  
├── config                     // 配置相关
├── src                        // 源代码
│   ├── api                    // 所有请求
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── filtres                // 全局 filter
│   ├── icons                  // 项目所有 svg icons
│   ├── lang                   // 国际化 language
│   ├── mock                   // 项目mock 模拟数据
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── styles                 // 全局样式
│   ├── utils                  // 全局公用方法
│   ├── vendor                 // 公用vendor
│   ├── views                   // view
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   └── permission.js          // 权限管理
├── static                     // 第三方不打包资源
│   └── Tinymce                // 富文本
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置项
├── .gitignore                 // git 忽略项
├── favicon.ico                // favicon图标
├── index.html                 // html模板
└── package.json               // package.json

这里来简单讲一下src文件

api 和 views

简单截取一下公司后台项目，现在后台大概有四五十个 api 模块

如图可见模块有很多，而且随着业务的迭代，模块还会会越来越多。
所以这里建议根据业务模块来划分 views，并且 将views 和 api 两个模块一一对应，从而方便维护。如下图：

如 article 模块下放的都是文章相关的 api，这样不管项目怎么累加，api和views的维护还是清晰的，当然也有一些全区公用的api模块，如七牛upload，remoteSearch等等，这些单独放置就行。

components

这里的 components 放置的都是全局公用的一些组件，如上传组件，富文本等等。一些页面级的组件建议还是放在各自views文件下，方便管理。如图：

store

这里我个人建议不要为了用 vuex 而用 vuex。就拿我司的后台项目来说，它虽然比较庞大，几十个业务模块，几十种权限，但业务之间的耦合度是很低的，文章模块和评论模块几乎是俩个独立的东西，所以根本没有必要使用 vuex 来存储data，每个页面里存放自己的 data 就行。当然有些数据还是需要用 vuex 来统一管理的，如登录token,用户信息，或者是一些全局个人偏好设置等，还是用vuex管理更加的方便，具体当然还是要结合自己的业务场景的。总之还是那句话，不要为了用vuex而用vuex！

说明

上面介绍的内容是项目vue-element-admin的，不是我们当前用到的项目vue-elementui。为啥我要使用项目vue-element-admin的介绍呢。因为，我个人觉得项目vue-elementui在规范方面确实有不少问题，当然这也是仁者见仁智者见智。可以肯定的是，有规范比没规范好很多。后续我会按照项目vue-element-admin的规范，对项目vue-elementui进行整改。

后续

往后的文章我会对项目vue-elementui的程序做详细的介绍。包括：

1. vue整体框架介绍，element-ui的介绍
2. vue-router路由功能的说明
3. 登录流程的说明，未登录判断拦截
4. 权限控制，不同用户显示不同菜单
5. axios的封装，api请求统一封装
6. vuex的封装，vuex状态控制是否显示头部文字
7. 列表数据展示，分页功能

【Hello VUE】暴学VUE之样式优化（六）