使用Vite创建完整的后台管理系统
前言
项目主要技术栈使用的是Vue3.0+Typescript+Element-plus+Vue全家桶+axios+扩展插件，例如path/NProgress/vuex-persistedstate等
一.环境配置
- 如果想使用Vite官方要求Node版本 （12.0，∞]。
- 安装yarn资源管理器，vite也支持npm，但是建议使用yarn。
二.创建项目
1.创建命令 yarn create vite
注意：命令执行后会依次让你填入项目的名称，使用的技术栈，这里选择的是vue => vue-ts，如图：
2.安装依赖 yarn install
步骤一创建完项目，整个项目是没有node依赖的，需要安装下依赖安装成功后，就可以启动服务了
3.项目启动 yarn dev
VITE相比webpack真的快了很多，可以理解的就是Vite会将依赖的重新挂在交给浏览器，它只需要精准的找出更新的文件源码就可以了。按需办事。
打开页面是显示的一个Vue官方的demo，包括源码也基础hello-world
三.配置项目
1. 安装插件Http请求插件-axios yarn add axios and yarn add vue-axios
yarn安装成功后，需要再main.ts注册插件,因为axios并不是vue的一个插件，所以在vue2.x版本中大部分是采用prototype进行全局挂载，vue3.0版本比较友好的注册就是通过安装vue-axios进行注册插件。 axios安装成功后还要进行基础的请求封装，新建utils文件夹>request.ts。在封装的过程中是需要对接的后端人员进行配合；请求封装分为3步：
1.1 interceptors.request-请求封装
1.2 interceptors.response-响应封装
1.3 新建api文件>api.ts
在页面调用
3.请求方式的封装
2.安装element-plus yarn add element-plus,安装icon库yarn add @element-plus/icons-vue
在main.ts 注册element-plus周边
3.安装路由 yarn add vue-router@4
新建router文件夹>index.ts，主要是存放项目路由路径的向外暴露
在utils文件夹>reute.ts配置路由守卫
4.安装vuex yarn add vuex and yarn add vuex-persistedstate
新建store文件>index.ts
5.安装path插件 yarn add path
这个插件主要是用项目路径的一些封装，是官方推荐的 在vite.config.ts 引入配置路径，在tsconfig.ts里响应下配置路径
6.安装NProgress插件 yarn add nprogress 加载滚动条插件
7.新建layout文件夹>index.vue
这个文件可以理解成是项目页面布局的主文件，可以通过组件引入注册到route里，在你需要的页面通过component挂载上组件layout
8.配置env文件-环境文件和proxy返代理
新建.env.development 和 .env.production
配置的参数比较灵活但是必须要用VITE_XXXX 命名不然是无效的，需要注意的是反向代理的key值要与dev环境里配置的key值相同
9.对element-plus组件进行二次封装，例如面包屑-table-分页
