L-ADMIN-VUE

一个基于 Antd 中后台前端解决方案，提供通用性封装及规范，让开发者更加专注于业务

介绍

l-admin-vue 是 l-admin 基于 vue3 和 ant-design-vue 的实现

特性

• 代码校验
• git 提交校验
• git commit message 校验
• 在线主题色切换
• 在线多语言切换
• 懒加载
• 基础路由
• 动态路由（用户有多少菜单，则挂多少路由）
• 登录跳转控制
• 操作权限控制
• 路由动画
• 路由组件 keep-alive
• axios 封装
• 按模块拆分 serve
• 订阅发布
• pinia store
• localforage
• LESS
• TSX
• Typescript
• 对接云服务

关于路由动画（根据前进后退自动切换动画），由于浏览器的限制，popstate | hashchange 事件仅能知悉历史记录有变化，无法知悉用户到底点击了浏览器的前进还是后退按钮；已处理过的方案：url 上携带 query 唯一标识（支持 hisotry 模式或 hash 模式），在内存中维护一份路由历史，在路由跳转时（结合路由库 vue-router@4.2.0的 beforeEach, react-router@6.11.2的 subscribe, @angular/router@16.1.0的 RouteReuseStrategy），去路由历史中查找是否存在该 url，如果有为后退操作，如果没有为前进操作并加入路由历史并在 sessionStorage 中存一份，在浏览器刷新时还原路由历史；该方案缺点：url 上会携带额外 query

在线预览

预览

开始使用

# 克隆项目
git clone https://github.com/lb1129/l-admin-vue.git

# 进入项目目录
cd l-admin-vue

# 安装依赖
npm install

# 启动服务
npm run dev

浏览器访问 http://localhost:5173

发布

# 构建生产环境
npm run build

权限控制流程

详细文档

样式校验

基于stylelint进行样式校验，支持校验 .css .less .vue，结合vscode-stylelint插件在vscode中实时对样式错误或警告进行提示

下述命令行可对所有样式文件（忽略的排除在外）进行校验并对错误及警告尝试修复

npm run lint:style

脚本校验

基于eslint进行代码校验，结合vscode-eslint插件在vscode中实时对脚本错误或警告进行提示

下述命令行可对所有脚本（忽略的排除在外）进行校验并对错误及警告尝试修复

npm run lint

代码美化

基于prettier进行代码美化，结合prettier-vscode插件在vscode中对文件进行保存时自动美化代码

下述命令行可对所有文件（忽略的排除在外）进行代码美化

npm run format

TodoTree

基于vscode插件todo-tree

// BUG ...
// FIXME ...
// TODO ...
// HACK ...
// XXX ...
// TAG ...
// DONE ...
// NOTE ...
// INFO ...

Git Commit Message 规范

Commit Message 包括 type、scope、subject 三部分，其中 type、subject 是必须的，而 scope 是可选的。

<type>(<scope>): <subject>

type 用于说明 commit 的类型，只允许使用下面几个标识：

• feat 新功能
• fix 修复 bug
• docs 仅包含文档的修改
• style 格式化变动，不影响代码逻辑。比如删除多余的空白，删除分号等
• refactor 重构，既不是新增功能，也不是修改 bug 的代码变动
• perf 性能优化
• test 增加测试
• build 构建工具或外部依赖包的修改，比如更新依赖包的版本等
• ci 持续集成的配置文件或脚本的修改
• chore 杂项，其他不修改源代码与测试代码的修改
• revert 撤销某次提交

环境变量

文档

• .env 基础环境
• .env.development 开发环境
• .env.production 生产环境
• .env.github-pages github-pages 环境

License

MIT