VUE 3.0代码结构框架
VUE结构框架
VUE脚手架目前采用VUE全家桶的基础套餐，然后各个项目在此 基础上可添加项目所需要的库和依赖，此脚手架的基础套餐为：VUE+ Element+Webpack+axios，VUE采用的是2.0版本。
其脚手架的结构如下：
├── public // 资源目录, 类似 static, 存储 lib
├── src // 系统业务相关代码
│ ├── common // 公共的代码、资源、工具
│ │ ├── assets // 多媒体资源存储位置，建议文件夹下再按模块划分，一般存放100K以内的图片，编译打包时候进行压缩
│ │ ├── constant // 一些常量定义, 都用大写字母，相关规范请参考我们的代码规范
│ │ ├── filter // Vue 过滤器, 可以参考 vue 的 filter
│ │ ├── style // 全局样式相关处理
│ │ ├── icons // 需要变色处理的svg icon图片
│ │ └── utils // 通用的工具 js 方法
│ ├── components // 系统业务公共组件
│ │ ├── .vue // 组件内容写法
│ │ ├── .less // 组件要用到的样式, 在组件内import导入
│ │ └── .md // 每个公共组件必须有组件的介绍【用法、API、功能说明】
│ ├── mock // 简单 mock 数据, 通过 export 抛出, 可查看具体 demo 抛出的方法
│ ├── pages // 业务路由及页面
│ │ └── module // 小驼峰命名, 按功能模块或业务模块划分文件夹, 如 login、roleManage，模块文件夹深度划分层次建议不超过三层
│ │ ├── components //各业务模块的组件文件夹
│ │ ├── .vue // vue 页面
│ │ ├── .service // 网络请求服务，一模块文件夹只需一个service，不宜多建
│ │ └── route.js //业务模块路由， 一模块文件夹内只定义一个模块路由
│ ├── App.vue // vue 首屏
│ ├── main.js // 入口文件
│ ├── router.js // 路由权限汇总管理, 各业务模块路由在此文件汇总, 同时作菜单及路由导航守卫管理
│ └── store.js // vuex 存储, 用 setVars 定义根 state
├── static // 资源目录，一般超出100K的资源，编译打包时不会压缩
└── tests // vue 单元测试目录
```
VUE项目框架重要的部分描述‘
1、项目的axios请求处理方式
项目的 axios 封装如下:
基于 axios 进行了超时, 请求封装, 最终按照后端返回的 responseCode 自动抛出 data，格式如下，如果后台返回格式不一致，记得和后台讨论尽量保持一致的格式。
{
"responseCode": "10001",
"responseMsg": "success",
"data": {
"menus": []
}
}
在 promise `.then()` 中接收到的值
promise.then(data => {
console.log(data)
// data 直接等于 { menus: [] }
})
错误的 responseCode 在 catch 里面捕获
写法例如:
(1)、 在项目 pages 的目录页面 apiMock.js 里定义方法, 通过 export 抛出
(2)、在 .vue 页面 import 进来, 通过 async await 将异步转化为同步
如想捕获后端错误的responseCode作特殊处理可以使用
try { ... } catch (e) {
// e 判断e.responseCode作特殊处理
}
(3)、axios在请求时可以配置参数:
/**
* @param {string} url - 请求路径
* @param {any} data - 请求参数
* @param {string} type 'post'(默认值) 'get' 请求方式
* @param {Boolean} showError true(默认) false 后端错误情况下是否自动 $message错误
* @param {Boolean} showLoading true(默认) false 是否在请求时展示全屏 loading
* @param {string} specialCode 特殊的 code 码用于后端特殊情况下的非错误 code
* @param {Boolean} returnAll 是否全量‘抛出’接口返回（后端特殊情况下，某些接口不返回data数据，但前端需要根据状态码做某些交互逻辑的控制 且/或 specialCode不能满足控制时可用）
*/
(4)、具体可以参考以往项目中 apiMock.js 和 login.vue 里的写法
更多axios资料可前往官网了解更多知识
2、项目的本地数据存储
项目里存储本地数据, 如 localStorage sessionStorage 采用 vue-ls.set vue-ls.get 具体可以看 vue-ls 的文档
// 备注下vue-ls 用法
Vue.ls.set(string, string) 存数据
Vue.ls.get(name, def) 拿数据
Vue.ls.remove(string) 删数据
Vue.ls.clear() 清除所有数据
Vue.ls.on(string, callback) 监听然后触发回调函数
Vue.ls.off(string, callback) 取消监听
3、项目中的svg图片变色处理
项目的 svg 图片如果需要切换颜色及字体大小, 可以通过找 UI 或者
将UI提供的svg图片放置在 common/icons/svg目录下，然后npm run svg 生成 icon.js
然后 VUE项目框架注意事项
store的state vars需要对应清理，特别是大数据量的临时存储，如果用完不释放清除掉，会占用缓存，造成性能影响； 建议以模块或页面为单位进行state块存储和清除处理，当退出某个菜单模块或页面时就可以开始清空下该模块下的vuex state。
组件封装建议不超过三层，具体取决于业务封装
非必要情况不要用eslint-disabled，不知道怎么去掉报错，可以先问同事，后续会全局检查代码中eslint-disabled量
想使用弹性布局的, 建议使用 el-row el-col 自带的 flex 属性
VUE项目框架书写要求
axios 请求已经做了封装, 请求 url 及方法统一放在 service 中, 页面内用 async await 来实现, 都要加上 try {} catch () {} 来捕获请求错误或语法错误
static 目录内的文件要通过 ~@static 来取用，例如 import xx from ‘~@static/’
修改 element默认样式的统一放在 style 的 element-reset 内, 按照 element的组件划分对应文件夹，可参考脚手架对应文件夹
用vue-ls做前端的本地数据存储, 可以监听变化触发回调
初始加载js时增加一个loading,在index.html中, 缓解白屏现象
小图片在assets里, 大图片在static里，一般以100K为区分线
组件书写vue文件和less文件分开, vue文件内引入对应 less, less 可加: global作为全局样式, 加组件的使用说明, 使用场景等在.md内, 后续其他人修改及查看可用
简单的mock数据用于前期未联调时使用, 放在mock文件夹内, 建立自己的目录, 采用promise实现, 调用也用async await后期只要换个方法名就行
javascript
getData () {
return new Promise(resolve => {
resolve(data)
})
}
router规则, 除首屏要渲染的组件之外, 全采用 import引入的方式 按需加载
在各业务模块目录下各只定义一个route.js 控制整个模块的路由，各业务模块目录下无需再细分子菜单的route.js
API请求服务一个业务模块目录也只定义一个文件作为公共存储，无需在子目录再细分，如果API请求过多，可在文件内用长/********/符号区分各个小业务块；文件顶部存放API请求的url地址，下面书写各个请求服务的export function 定义
一般来说，对系统通用性的组件放在src＞components下，各业务模块可根据需要在业务模块目录下再建components
组件复杂的话 需要写一个readme.md 内置属性，使用例子、API、功能说明
业务场景：从列表进入详情或编辑页，如果再从详情或编辑页返回到列表页，那么请问是回到初始化的第一页，还是保留之前的分页信息（分页码、分页条数、过滤条件、排序条件），从用户体验上说，建议采用后者，可采用两种处理方法：
1、把对应的信息存储到vuex中，返回列表时再从vuex获取对应的信息，作为筛选列表的条件
2、另一种采用keep-alive方式去存储，但记得注意keep-alive的缺陷，不可滥用
form 表格的初始化数据通过 vuex 的数据放进 form 的 initialData 中, 这样 form 表单不会出现渲染报错, 每个表单单独传自己的字段