vue admin后台管理系统搭建(基于element

vue admin后台管理系统搭建(基于element

1. 步骤

1. 先去除冗余代码
2. 增加提交规范
3. 新增路由权限逻辑, 左侧菜单也要加入鉴权逻辑(跳转两种情况,无权访问和页面不存在, 权限标识加到meta里面,includes判断)
4. 配置 axios
5. 环境变量配置 title信息
6. 升级vue-router, 配置全局组件, icon等
7. 打包环境移除console
8. 注入时间和版本信息

2.细节优化

1. package.json 脚本优化

 "serve": "vue-cli-service serve", // 加yarn install"serve": "yarn install && vue-cli-service serve",

2. 表格部分
   2.1 查询条件

• 查询条件用el-form包起, 加入 &#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 `${v.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

3. 多条数据同时加载 使用 Promise.all([async1,async2])
4. 页面复用较多多的接口数据(类似组织机构)放vuex里面 和 获取用户信息一起加载
5. await-to-js 优雅的处理 async await 再也不用每次都 try catch了
6. countup.js 数值动画效果
7. qs 处理url, 传参
8. register-service-worker 实现pwa

// TODO 未完…