这么潮的技术，你确定不看一眼再走？

大家好,我是前端实验室的大师兄！

vue3也出来了一段时间，现在风头正火最新潮流技术莫过于vite、typescript、pinia这些了，如果在找工作面试的过程中，或者在公司做项目的时候，稍微透露一下你做过相关的项目，相信老板也会对你刮目相看的

今天大师兄就给大家介绍一款，集vue3、typescript、pinia、element-plus等潮流技术于一身的项目，让大家看看有多潮

介绍

v3-admin-vite 是一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element-Plus、Pinia 和 Vite 等主流技术.

特性

• Vue3：采用 Vue3 + script setup 最新的 Vue3 组合式 API
• Element Plus：Element UI 的正统续作
• Pinia: 传说中的 Vuex5
• Vite：真的很快
• Vue Router：没啥好说的
• TypeScript：JavaScript 语言的超集
• PNPM：更快速的，节省磁盘空间的包管理工具
• Sass：和 Element Plus 保持一致
• ESlint：代码校验
• Prettier：代码格式化
• Axios：没啥好说的，已封装好 -注释：各个配置项都写有尽可能详细的注释

功能

• 用户管理：登录、登出演示
• 权限管理：内置页面权限（动态路由）、指令权限、权限函数、路由守卫
• 多环境：开发环境（development）、预发布环境（staging）、正式环境（production）
• 多主题：内置普通、黑暗两种主题模式
• 错误页面: 401、404
• Dashboard：根据不同用户显示不同的 Dashboard 页面
• 其他内置功能：SVG、动态侧边栏、动态面包屑、标签页快捷导航、Screenfull 全屏、自适应收缩侧边栏（兼容移动端）

安装

前置条件

1. 安装 .vscode 中推荐的插件
2. node v16.x
3. pnpm v6.x

都说pnpm 是yyds,以前没接触过的同学，这会可以试试喽~

# 安装依赖
pnpm i

# 初始化 husky
pnpm prepare

# 启动项目
pnpm dev

首页进行登录

全局有默认样式和暗黑模式两种

一键进入全屏模式

可进行页面以及权限管理

右侧可进行系统布局设置

配置

// 设置 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 ，按提示操作即可进群。