【Hello VUE】暴学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的程序做详细的介绍。包括:
- vue整体框架介绍,element-ui的介绍
- vue-router路由功能的说明
- 登录流程的说明,未登录判断拦截
- 权限控制,不同用户显示不同菜单
- axios的封装,api请求统一封装
- vuex的封装,vuex状态控制是否显示头部文字
- 列表数据展示,分页功能