Vue3 业务落地全景:脚手架、权限、国际化、微前端、跨端与低代码 50 条实战心法

写给架构师、TL、全栈工程师的“踩坑地图”

(零)阅读指南
• 不贴源码,用伪代码 + 流程图 + 决策树。
• 50 条心法分 6 大篇章,可跳跃阅读。


(一)脚手架与工程化 8 条
心法 1:用 create-vue 而不是 vue-cli 开启新项目,Vite 冷启动 300 ms vs Webpack 30 s。
心法 2:eslint-config-prettier + @vue/eslint-config-typescript 一键集成,团队争议减少 80%。
心法 3:monorepo 选 pnpm workspace,配合 changesets 实现“子包独立发版”。
心法 4:环境变量分层:.env.local → .env.development → .env.staging → .env.production,防止测试配置泄漏。
心法 5:引入 unplugin-auto-import/unplugin-vue-components,模板中无需手写 import,Tree-Shaking 仍然生效。
心法 6:husky + lint-staged 提交前跑 eslint --fix + prettier --write,MR 只关心业务逻辑。
心法 7:CI/CD 用 GitHub Actions:

  • build → vitest unit → cypress component → lighthouse → docker build → deploy preview。
    心法 8:Docker 镜像多阶段构建:

  • FROM node:18-alpine AS deps → FROM nginx:alpine AS runtime,镜像体积 < 20 MB。

(二)权限系统 7 条
心法 9:RBAC + 前端守卫双保险。后端返回 roles 与 permissions,前端用 vue-router meta + 全局 beforeEach 做路由级守卫。
心法 10:按钮级权限用自定义指令 v-can="'user.delete'",内部调用 usePermission() 判断。
心法 11:权限缓存策略:登录后写入 Pinia + localStorage;刷新 token 后增量更新,避免全量拉取。
心法 12:动态路由 addRoute 后需调用 router.replace(),否则 404。
心法 13:刷新页面后动态路由丢失,用 vite-plugin-pages 自动生成路由表,再合并后端返回的权限路由。
心法 14:权限表达式支持 AND/OR/NOT,用 @casl/ability 解析 AST,防止手写 if 地狱。
心法 15:管理员模拟用户登录,用 JWT extra payload 标记 proxyUser,前端弹层提示“当前为模拟视图”。

(三)国际化 6 条
心法 16:vue-i18n@9 + Composition API:useI18n() 直接返回 t/rt/d 函数,支持

你可能感兴趣的:(前端,低代码)