vue3+elementplus+ts搭建权限管理系统--2

*****************此文仅用于个人记录学习vite创建vue3项目过程，请勿转载或转发******************

1、原生样式重叠

主要用于减少不同浏览器的样式的差异

安装normalize.css

yarn add normalize.css

安装成功后在package.json中可以看到normalize.css版本号

在main.js中引入

只要在网站任意网页查看html元素有和Normalize.css样式一致的代码则表明已经正常引入Normalize.css

运行时如果报错：

此错误是由于element-plus版本过高导致

将导入方式由" import zhCn from 'element-plus/lib/locale/lang/zh-cn' "改成

"import zhCn from 'element-plus/es/locale/lang/zh-cn' "

这样错误就会消失

2、设置页面初始布局

使用Flex纵向布局方式

设置header和sidebar的页面布局

新建layout文件夹，在文件夹下创建index.vue文件

return !['Login', 'NotFound'].includes(routName) && !/^Personal/.test(routName);这句代码用于判断页面是否是login，NotFound和Personal开始的，如果是则不显示左侧菜单栏。

配置页面路由，更改router->index.js文件如下

错误信息：提示unCaught error:process is not defined

因为在vite项目中process已经被移除了，可以自己在vite.config.js文件中加入如下代码即可解决

引入方式：