一、项目简介
这基于的vue框架的颜值,真的爱了!最新开源免费的后台管理框架
二、实现功能
Vue3.4 + TypeScript: 你选择使用 Vue 3.4 和 TypeScript 进行开发,这是一种流行的前端框架和静态类型检查工具的组合。
单文件组件 <script setup>: 你使用 Vue 3 的新特性 <script setup> 来编写单文件组件,这可以简化代码结构并提高开发效率。
Vite5: 你选择使用 Vite 5 作为项目的开发和打包工具。Vite 是一个现代化的构建工具,具有快速的冷启动、模块化的开发方式和按需编译等特点。
Pinia: 你使用 Pinia 来替代 Vuex,Pinia 是一个轻量、简单且易于使用的状态管理库,用于管理应用程序的状态。
Pinia 持久化插件: 你集成了 Pinia 的持久化插件,这可以帮助你将应用程序的状态持久化到本地存储中,以便在刷新页面后可以恢复状态。
TypeScript 对 Axios 的二次封装: 你对 Axios 进行了二次封装,并使用 TypeScript 来提供类型检查。这可以帮助你更好地管理和处理网络请求,包括请求拦截、取消请求和常用请求的封装。
基于 Element 的二次封装 ProTable 组件: 你对 Element UI 的 ProTable 组件进行了二次封装,使其更适应你的项目需求。你可以通过配置项 Columns 来自定义表格页面的展示。
Element 组件的大小切换、多主题布局、暗黑模式和 i18n 国际化: 你的项目支持 Element 组件的大小切换,可以根据用户的偏好调整组件的大小。同时,你还支持多主题布局,暗黑模式和国际化,以提供更好的用户体验。
VueRouter 配置动态路由权限拦截、路由懒加载和页面按钮权限控制: 你使用 VueRouter 对动态路由进行配置,实现了权限拦截、路由懒加载和页面按钮权限控制。这可以帮助你根据用户的权限限制页面的访问和操作。
KeepAlive 页面缓存和多级嵌套路由缓存: 你使用 KeepAlive 对页面进行缓存,以提高页面的加载速度和用户体验。同时,你还支持多级嵌套路由的缓存,使得在路由之间切换时可以保持页面状态。
常用自定义指令开发: 你开发了一些常用的自定义指令,包括权限指令、复制指令、水印指令、拖拽指令、节流指令、防抖指令和长按指令。这些指令可以帮助你实现一些常见的功能和交互效果。
使用 Prettier 统一格式化代码,集成 ESLint、Stylelint 代码校验规范: 你使用 Prettier 来统一格式化代码,确保团队成员的代码风格一致。同时,你还集成了 ESLint 和 Stylelint,用于进行代码质量和风格的静态检查。
使用 husky、lint-staged、commitlint、czg、cz-git 规范提交信息: 你使用了一系列工具来规范提交信息,包括 husky、lint-staged、commitlint、czg 和 cz-git。这些工具可以帮助你在提交代码时遵循一定的规范,以提高代码质量和团队协作效率。
三、技术选型
html+css+js
vue
element
typescript
vite
四、界面展示五、源码地址
私信回复:23