vite-naive-template

🏄‍♂️ A Starter template built on Vite 5.x + TypeScript + TSX + Vue 3.5 + Naive UI + Pinia + UnoCSS + Unplugin Auto Import + Husky + lint-staged.

一个简洁的 Vite5 + Vue3.5 + TypeScript + TSX + ESLint(v9) 的 B 端后台原型 Naive UI 模板框架，内置 Pinia 模块化管理代码、路由鉴权、UnoCSS 暗黑模式、Unplugin 自动导入等, 开箱即用, 注重快速高效搭建实际业务场景, 持续更新最新技术栈 🎊

🔥 Live Demo 在线体验

账号：[email protected] (随意邮箱)

密码：123456 (随意)

🪄 使用不同的 UI 库

如果更偏好使用 Element Plus 2 作为 UI 库, 这里也为你准备了几个相应的模板项目，可在此基础上进行业务二次开发和定制：

• 🍍 Pinia + Element Plus + Vue3 + TS 版本

• ⚡️ Vuex + Element Plus + Vue3 + TS 版本

🎉 Features

• 支持 Vite 5 + Vue 3.5 + TypeScript + TSX
• UI 框架: Naive UI 2.x
• 状态管理: Pinia
• 单元测试框架: Vitest
• 代码规范化检测: Husky + lint-staged
• 内置 Unplugin Auto Import, 支持组件按需自动导入, 解放双手
• 内置 UnoCSS + Iconify, 可实现原子化样式内联、图标按需自动导入, 提升开发效率
• 内置 ESlint 和 Stylelint, 可在此基础上扩充你想要的 Lint 配置规范
• 内置封装了一个可能比较好用的 Axios , 需要时配合 Pinia Actions 一起食用
• 封装了 <IconFont /> 组件, 可直接使用 IconFont 图标
• 简化了 naive-ui 库中抽屉 drawer 的创建过程, 支持全局调用 window.$ModalDrawer.create 方法管理多个抽屉
• 服务式 service 挂载全局对象 window.$ModalXxxx 插件, 更方便的插件调用方式
• 路由鉴权已帮你封装好，同时配合 Nprogress, 只需要修改 permission.ts 文件即可
• 自带一个模块化的组件开发环境，可按照 modules 目录解耦页面组件、路由组件、样式等文件
• 高度封装但不失灵活，内部抽象出了一个完整的业务流程供你参考，涉及三个核心页面：登录、列表和明细
• 节省你配置的时间，因此该项目的轻量化致使你只需要专心编写自己的业务代码即可

前置条件

• Vue 3.5+
• Node >= 18.12.x
• Pnpm 9.x
• VS Code 插件 dbaeumer.vscode-eslint >= v3.0.5 (pre-release)

运行效果

安装和运行

• 安装依赖

pnpm i

• 本地开发

pnpm dev

单元测试

• 执行单测

pnpm test

• 执行覆盖率测试

pnpm test:coverage

💡 提示

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

pnpm run prepare

😎 Awesome

• awesome-vite

License

MIT License | Copyright © 2020-PRESENT Wisdom