Awesome
vue-boilerplate-i18n
🌏 Starter using Vite 5 + Vue 3.3 + Pinia + TypeScript + i18n + UnoCSS + Unplugin + Element-Plus 2.x to fast build a prototyping
一个适用国际化多语言(i18n)扩展、帮助你快速开发 B 端 🚀🚀🚀 Vue3 + Vite5 + TS + Pinia 中小型后台管理系统的原型模板项目框架，集成 vue-i18n-next 💪
🌱 不同版本
目前一共有以下五个不同技术栈的仓库模板在持续维护，请尝试后选择适合自己的模板使用
(推荐基于在当前仓库基础上二次开发)
-
💥 (推荐) TS + Pinia + 🌐 低耦合(i18n)多语言 Vite5 + Vue3 + UnoCSS + Element-Plus2 + vue-i18n@next
-
⚡️ TS + Pinia 版 Vite5 + Vue3 + TS + Pinia + Element-Plus2 + useLocale + i18n
-
⚡️ JS + Pinia 版 Vite5 + Vue3 + Pinia + Element-Plus2 + useLocale + i18n
-
⚡️ TS + Vuex4 版 Vite5 + Vue3 + TS + Vuex4 + Element-Plus2 + useLocale + i18n
-
⚡️ JS + Vuex4 版 Vite5 + Vue3 + Vuex4 + Element-Plus2 + useLocale + i18n
🪄 使用不同的 UI 库
如果更偏好使用 Naive UI 作为 UI 库, 这里也为你准备了几个相应的模板项目，可在此基础上进行业务二次开发和定制：
🎉 Features
- 支持 Vite 5 + Vue 3 + TypeScript
- UI 框架: Element Plus 2.x
- 状态管理: Pinia
- 自动导入，解放双手: Unplugin Auto Import
- 原子化 CSS: UnoCSS
- 单元测试框架: Vitest
- 代码规范化检测: Husky + lint-staged
- 内置 ESlint 和 Stylelint, 可在此基础上扩充你想要的 Lint 配置规范
- 内置封装了一个可能比较好用的 Axios , 需要时配合 Pinia Actions 一起食用
- 封装了 <IconFont /> 组件, 可直接使用 IconFont 图标
- 内置全局 $ModalDialog 插件, 支持使用 service 式地动态调用此插件来显示任意组件
- 内置 vue-i18n-next, 支持到 VueRouter 路由级别切换语言，可编写国际化配置文件及扩展其他语言
- 路由鉴权已帮你封装好，同时配合 Nprogress, 只需要修改 permission.ts 文件即可
- 自带一个模块化的组件开发环境，可按照 modules 目录解耦页面组件、路由组件、样式等文件
- 高度封装但不失灵活，内部抽象出了一个完整的业务流程供你参考，涉及三个核心页面：登录、列表和明细
- 节省你配置的时间，因此该项目的轻量化致使你只需要专心编写自己的业务代码即可
前置条件
- Vue 3.2.x
- Node >= 18.12.x
- Pnpm 9.x
- VS Code 插件
dbaeumer.vscode-eslint>= v3.0.5 (pre-release)
运行效果
<img width="1440" alt="image" src="https://user-images.githubusercontent.com/19891724/154831095-32a64eee-01ce-49be-ad64-626f0d276559.png"> <img width="1440" alt="image" src="https://user-images.githubusercontent.com/19891724/168773776-2d43c03d-54dd-4364-8830-0bba65603ef4.png">安装和运行
- 安装依赖
pnpm i
- 本地开发
pnpm dev
单元测试
- 执行单测
pnpm test
- 执行覆盖率测试
pnpm test:coverage
💡 提示
- 若 Husky 未生效，可能是由于未完成初始化，尝试执行以下命令进行初始化:
pnpm run prepare