1. 步骤
先去除冗余代码增加提交规范新增路由权限逻辑, 左侧菜单也要加入鉴权逻辑(跳转两种情况,无权访问和页面不存在, 权限标识加到meta里面,includes判断)配置 axios环境变量配置 title信息升级vue-router, 配置全局组件, icon等打包环境移除console注入时间和版本信息
2.细节优化
package.json 脚本优化
"serve": "vue-cli-service serve", // 加yarn install
"serve": "yarn install && vue-cli-service serve",
表格部分 2.1 查询条件
查询条件用el-form包起, 加入 @keydown.enter.native 回车事件,加入ajaxPendingloading一般加到:disabled="ajaxPendingloading"上就可以input 加入 clearable , select 加 filterable clearable表格数据左对齐日期选择器加,快捷选项, 快捷项js单独抽出引入 2.2 列表部分请求数据过程加 ajaxPendingloading数据左对齐(默认是左对齐)使用 v-slot 代替 slot-scope图片音频下载默认打开的问题 戳格式化时间工具函数(使用频率高,可以直接绑定到 Vue.prototype上,页面直接使用)导出列表, 如果不需要token,直接拼接window.location.herf=url或者window.open(url),如果需要token, 可以先让后台下载到本地,然后返回给你新的连接地址前端导出,如果数据量过大,会出现卡死状态,一般不考虑
export const exportTable = (params:any) => {
const query = Object.keys(params).map(key => {
return key + '=' + encodeURIComponent(params[key])
}).join('&')
return `${process.env.VUE_APP_BASE_API}xxxx/xxx?${query}`
}
删除,启用,禁用等操作要加二次提示,是否确定该操作,无数据情况列表展示状态 2.3 分页封装成固定组件调用,注意加ajaxPendingloading 一般加到 :disabled="ajaxPendingloading"上就可以,防止重复加载 2.4 弹窗一般用作新增和编辑必填要加rules 和 prop手机限制11位input 加 clearable ,其他 filterable看情况加resetFields方法绑定了prop才有用,建议自己重置数据
// 手机正则(1开头,11位就行,粗略版)
pattern: /^1[0-9]{10}$/,
// 邮箱正则
pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
提交新增等按钮增加防抖 debounce 函数数据深拷贝 cloneDeep
多条数据同时加载 使用 Promise.all([async1,async2])页面复用较多多的接口数据(类似组织机构)放vuex里面 和 获取用户信息一起加载await-to-js 优雅的处理 async await 再也不用每次都 try catch了countup.js 数值动画效果qs 处理url, 传参register-service-worker 实现pwa
// TODO 未完…
