my helper

简介

基于 Vue3、Vite、ElementPlus、Pinia、VueUse 等的中后台模版，包括平常开发中常使用的功能函数和hooks以及实现思路，它使用了最新的前端技术栈，有着对应的代码规范和提交规范，开箱即用的模板，也可用于学习参考。

预览

my helper 预览地址

代码仓库

gitee.com/ch-ke/my-he…

功能介绍

基于vue3、vite、pnpm 进行构建
内置了暗黑主题切换
颗粒化的动态权限，动态菜单，全局页面状态管理等
对该系统做了性能监控和日志监控，也可用做数据埋点和用户行为监控等
对常用的组件进行了封装，包括有动态表单，动态表格，虚拟选择器，数据预览，树形分组等
封装常见hooks，包括有网络请求、表格、表单、定时轮询、并发任务、事件监听、socket通信等
使用keep-alive缓存配合组件name，记录回退时的页面状态，并动态控制
对element-puls二次封装并全局自动导入
对常用的第三方插件做了演示示例
提供了一些功能点的解决思路和方案
使用 mediainfo.js 读取视频的格式信息，video.js兼容m3u8播放
使用 dexie 做 indexDB数据库本地存储日志，批量上报
使用 eslint + prettier 做风格校验
使用 husky + lint-staged + cz-git 做提交校验

项目示例图

暗黑主题

性能和细节处理

纯前端版本更新通知，发生版本更新后，自动刷新页面获取最新资源
长表单、长列表使用帧渲染提升页面显示效率
去除生成环境的打印日志，减少打包体积

build: {
  minify: 'esbuild', // terser, esbuild
  terserOptions: {
    // terser时去除日志
    compress: { drop_console: true, drop_debugger: true },
  },
},
// esbuild时去除日志
esbuild: {
  drop: mode === 'production' ? ['console', 'debugger'] : [],
},

配置静态资源和第三方插件打包的输出配置

rollupOptions: {
  input: {
    index: resolve(__dirname, `index.html`),
  },
  output: {
    // 将稍微大且长时间不会改变的进行分包缓存区分，无需每次都拉去服务端的数据
    manualChunks: {
      'main/chunk-vue': ['vue'],
      'main/chunk-vue-router': ['vue-router'],
      'main/chunk-echarts': ['echarts'],
      'main/chunk-lodash-es': ['lodash-es'],
      'main/chunk-element-plus': ['element-plus'],
      'main/chunk-vue-virtual-scroller': ['vue-virtual-scroller'],
      'main/chunk-dexie': ['dexie'],
      'main/chunk-fingerprintjs': ['@fingerprintjs/fingerprintjs'],
      'main/chunk-sortablejs': ['sortablejs'],
      'main/chunk-vuedraggable': ['vuedraggable'],
    },
    chunkFileNames: 'assets/js/[name]-[hash].js',
    entryFileNames: 'assets/js/[name]-[hash].js',
    assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
  },
}

常量枚举，封装取值操作

// enums.js
export class EnumArray extends Array {
  getLabel(value) {
    return this.find((item) => item?.value === value)?.label || '';
  }

  getValue(label) {
    return this.find((item) => item?.label === label)?.value || '';
  }

  getValues() {
    return this.map((item) => item.value);
  }

  getLabels() {
    return this.map((item) => item.label);
  }

  getItem(value) {
    return this.find((item) => item?.value === value) || {};
  }
}

// 使用
const RoleType = new EnumArray(
  { label: '创建者', value: 1 },
  { label: '超级管理员', value: 2 },
  { label: '普通管理员', value: 3 },
);

安装使用

需要先安装pnpm

根据官方规定，使用vite3、vite4，node版本必须是14.18.0以上，指定版本依赖项报错，推荐重装vite。

vite安装

pnpm create vite@latest

安装依赖

pnpm install

运行

pnpm run dev

打包 (会自动更新版本号)

pnpm run build

vs code 插件安装

1. Prettier - Code formatter
2. Vue Language Features (Volar)
3. Vue 3 Snippets
4. ESLint

代码规范

eslint + prettier + stylelint

校验并修复代码

pnpm run lint

校验并修复暂存区的代码

pnpm run lint:lint-staged

提交规范

husky + lint-staged + cz-git + commitizen

代码推送时对代码进行校验，该命令包含了git add . 和 git commit

pnpm run commit
git push origin dev

声明

日常学习记录使用，所使用到的图片素材均为学习使用, 请勿用于商业用途；

vue3 admin后台管理模版 从0到1搭建指南 简约的页面风格 支持主题切换