🏄♂️ A Starter template built on Vite 5.x + TypeScript + Vue 3.4 + Naive UI + Pinia + UnoCSS + Unplugin Auto Import.
一个简洁的 Vite5 + Vue3.4 + TypeScript 的 B 端后台原型 Naive UI 模板框架,内置 Pinia 模块化管理代码、路由鉴权、UnoCSS 暗黑模式、Unplugin 自动导入等, 开箱即用, 注重快速高效搭建实际业务场景, 持续更新最新技术栈 💪
账号:
[email protected]
(随意邮箱)密码:123456 (随意)
如果更喜欢使用 Element Plus 2 作为 UI 库, 这里也为你提供了一个相应的模板项目:
- 支持 Vite 5 + Vue 3.4 + TypeScript
- UI 框架: Naive UI 2.x
- 状态管理: Pinia
- 单元测试框架: Vitest
- 内置 Unplugin Auto Import, 支持组件按需自动导入, 解放双手
- 内置 UnoCSS + Iconify, 可实现原子化样式内联、图标按需自动导入, 提升开发效率
- 内置 ESlint 和 Stylelint, 可在此基础上扩充你想要的 Lint 配置规范
- 内置封装了一个可能比较好用的 Axios , 需要时配合 Pinia Actions 一起食用
- 封装了 <IconFont /> 组件, 可直接使用 IconFont 图标
- 服务式 service 挂载全局对象 window.$ModalXxxx 插件, 更方便的插件调用方式
- 路由鉴权已帮你封装好,同时配合 Nprogress, 只需要修改 permission.ts 文件即可
- 自带一个模块化的组件开发环境,可按照 modules 目录解耦页面组件、路由组件、样式等文件
- 高度封装但不失灵活,内部抽象出了一个完整的业务流程供你参考,涉及三个核心页面:登录、列表和明细
- 节省你配置的时间,因此该项目的轻量化致使你只需要专心编写自己的业务代码即可
- Vue 3.4+
- Node >= 16.15.x
- VS Code 插件
dbaeumer.vscode-eslint
>= v3.0.5 (pre-release)
![image](https://private-user-images.githubusercontent.com/19891724/272239366-34fd01eb-758f-43cc-b5c2-8ec77629e94c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1NTY4NjUsIm5iZiI6MTcyNDU1NjU2NSwicGF0aCI6Ii8xOTg5MTcyNC8yNzIyMzkzNjYtMzRmZDAxZWItNzU4Zi00M2NjLWI1YzItOGVjNzc2MjllOTRjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDAzMjkyNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWNmZWE1ODJlNjQ2MDNhNDZmMmJlNDNmZDg1YzQzYjg3OWU5OTFhYTNhNDNiNjliNDYwNmQ1Mjk0ZDhjODI3NjAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.qPXlnCuHGslwKgITPbIiYlJdfZOJ6ORRRUNm9H5fSuo)
![image](https://private-user-images.githubusercontent.com/19891724/272238888-cdb35ee2-1943-4ab3-80ed-380d9cc60f51.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1NTY4NjUsIm5iZiI6MTcyNDU1NjU2NSwicGF0aCI6Ii8xOTg5MTcyNC8yNzIyMzg4ODgtY2RiMzVlZTItMTk0My00YWIzLTgwZWQtMzgwZDljYzYwZjUxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDAzMjkyNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPThmMDg4YmYxNmM4YjdhYjc5MmZlMzFlYmIyZTAxYjhlMjkwYjBmN2M0OWUwZGEzY2RhYjU5ZTkzY2QyMGYwZmQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.3VRktecComCdq6Ghi-DpJw6z9ArVP6MDvG14PVonjE8)
Install node dependencies in all packages
pnpm install
Local Development
pnpm dev
Unit Testing
pnpm test
Test code coverage
pnpm test:coverage