大家好,我是前端实验室的大师兄！
vue3也出来了一段时间，现在风头正火最新潮流技术莫过于vite、typescript、pinia这些了，如果在找工作面试的过程中，或者在公司做项目的时候，稍微透露一下你做过相关的项目，相信老板也会对你刮目相看的
今天大师兄就给大家介绍一款，集vue3、typescript、pinia、element-plus等潮流技术于一身的项目，让大家看看有多潮
介绍
v3-admin-vite 是一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element-Plus、Pinia 和 Vite 等主流技术.
特性
Vue3：采用 Vue3 script setup 最新的 Vue3 组合式 APIElement Plus：Element UI 的正统续作Pinia: 传说中的 Vuex5Vite：真的很快Vue Router：没啥好说的TypeScript：JavaScript 语言的超集PNPM：更快速的，节省磁盘空间的包管理工具Sass：和 Element Plus 保持一致ESlint：代码校验Prettier：代码格式化Axios：没啥好说的，已封装好 -注释：各个配置项都写有尽可能详细的注释
功能
- 用户管理：登录、登出演示
- 权限管理：内置页面权限（动态路由）、指令权限、权限函数、路由守卫
- 多环境：开发环境（development）、预发布环境（staging）、正式环境（production）
- 多主题：内置普通、黑暗两种主题模式
- 错误页面: 401、404
- Dashboard：根据不同用户显示不同的 Dashboard 页面
- 其他内置功能：SVG、动态侧边栏、动态面包屑、标签页快捷导航、Screenfull 全屏、自适应收缩侧边栏（兼容移动端）
安装
前置条件
代码语言：javascript复制1. 安装 .vscode 中推荐的插件
2. node v16.x
3. pnpm v6.x
都说pnpm 是yyds,以前没接触过的同学，这会可以试试喽~
代码语言：javascript复制# 安装依赖
pnpm i
# 初始化 husky
pnpm prepare
# 启动项目
pnpm dev
首页进行登录
全局有默认样式和暗黑模式两种
一键进入全屏模式
可进行页面以及权限管理
右侧可进行系统布局设置
配置
代码语言：javascript复制// 设置 noRedirect 的时候该路由在面包屑导航中不可被点击
redirect: 'noRedirect'
// 动态路由：必须设定路由的名字，一定要填写不然重置路由可能会出问题
// 如果要在 tags-view 中展示，也必须填 name
name: 'router-name'
meta: {
// 设置该路由在侧边栏和面包屑中展示的名字
title: 'title'
// 设置该路由的图标，记得将 svg 导入 @/icons/svg
icon: 'svg-name'
// 默认 false，设置 true 的时候该路由不会在侧边栏出现
hidden: true
// 设置该路由进入的权限，支持多个权限叠加
roles: ['admin', 'editor']
// 默认 true，如果设置为 false，则不会在面包屑中显示
breadcrumb: false
// 默认 false，如果设置为 true，它则会固定在 tags-view 中
affix: true
// 当一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式
// 只有一个时，会将那个子路由当做根路由显示在侧边栏
// 若想不管路由下面的 children 声明的个数都显示你的根路由
// 可以设置 alwaysShow: true，这样就会忽略之前定义的规则，一直显示根路由
alwaysShow: true
// 当设置了该属性，进入路由时，则会高亮 activeMenu 属性对应的侧边栏
activeMenu: '/dashboard'
}
giHub地址：https://github.com/un-pany/v3-admin-vite
写在最后
欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~
进群方式：在下方公众号后台，回复 111 ，按提示操作即可进群。
