一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。
前言
在上一章中我们完成了基本的vite配置以及项目环境的区分。在我们的常见的后台管理系统中，最重要的便是权限管理，我们就借鉴vue2版本的vue-element-admin来进行我们的开发。
系统权限分析
我们知道的根路由是"/"，那我们最基本的是登录功能，我们定义登录的路由为"/login"，每次将登陆成功的token存储在sessionStroage中，如果有需要登陆有效期的就将token存储到localStroage中，并定义有效时间。接下来我们需要分析的是用户能看到什么页面，假设A权限用户登陆想看到echarts图表页，B权限用户登陆只能看到系统配置页面，如果我们在登陆成功后再写跳转就显得过于麻烦，所以我们会统一写一个permission.js文件对跳转权限做统一判断处理。
页面分析
首先我们看登陆页面：
所需要的就是组件就是表单组件和按钮组件，我们统一使用element-plus
npm install element-plus --save
然后在main.js文件中引入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
后续项目中我们就使用element-plus组件。
其次我们来看首页：
一眼能够看见的就是layout，我们分析layout所需有哪些，首先是左侧菜单栏aside，右侧内容区，内容区又划分为头部header和主体main，为了减少复杂度，我们就去除tab标签栏。本次我们先分析左侧菜单栏，看似简单的菜单栏实际上涉及栏不少内容，我们统一使用svg图标，那在项目中如何使用svg图标呢？
svg图标
首先安装vite-plugin-svg-icons插件
npm i vite-plugin-svg-icons -D
其次从插件中导出createSvgIconsPlugin，再者需要在vite配置文件中注册插件并引入svg文件
最后因为我们是在vue模板中使用svg，所以需要自定义svg组件，我们在components文件夹中创建svgIcon.vue文件并且将写好的文件在main.js中注册为组件，通过vite-plugin-svg-icons中的virtual:svg-icons-register来解析svg
后续内容在下一篇中讲解。
