Skip to content

🌏 基于 Vue3 + Vite 5 + Pinia 2 + TypeScript + Element-Plus + Vue Router 4 + UnoCSS + Unplugin + ESLint(v9) + Vitest 的原型 Web 端模板框架, 支持路由切换国际化语言, 自动导入 🚀🚀🚀 适合快速开发 B 端模块化产品的中小型后台管理系统,基于 vue-i18n-next 💪 Starter using Vite5 + Vue 3 + Pinia + TS + i18n to fast build a admin prototyping(附示例截图)

License

Notifications You must be signed in to change notification settings

pdsuwwz/vue-boilerplate-i18n

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-boilerplate-i18n

Deploy GitHub Workflow Status (branch) thanks License

🌏 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 💪

💻 Live Demo 在线体验

🌱 不同版本

目前一共有以下五个不同技术栈的仓库模板在持续维护,请尝试后选择适合自己的模板使用

(推荐基于在当前仓库基础上二次开发)

🪄 使用不同的 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
  • 内置 ESlintStylelint, 可在此基础上扩充你想要的 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)

运行效果

image

image

安装和运行

  • 安装依赖
pnpm i
  • 本地开发
pnpm dev

单元测试

  • 执行单测
pnpm test
  • 执行覆盖率测试
pnpm test:coverage

💡 提示

  • 若 Husky 未生效,可能是由于未完成初始化,尝试执行以下命令进行初始化:
pnpm run prepare

😎 Awesome

License

MIT License | Copyright © 2020-PRESENT Wisdom

About

🌏 基于 Vue3 + Vite 5 + Pinia 2 + TypeScript + Element-Plus + Vue Router 4 + UnoCSS + Unplugin + ESLint(v9) + Vitest 的原型 Web 端模板框架, 支持路由切换国际化语言, 自动导入 🚀🚀🚀 适合快速开发 B 端模块化产品的中小型后台管理系统,基于 vue-i18n-next 💪 Starter using Vite5 + Vue 3 + Pinia + TS + i18n to fast build a admin prototyping(附示例截图)

Topics

Resources

License

Stars

Watchers

Forks

Contributors 4

  •  
  •  
  •  
  •