Vue2后台管理重构Vue3

1.创建项目

        1-1：两种创建方式

                  ①vue-cli:安装

                        npm init vue@latest

                        cd <your-project-name>

                        npm install

                        npm run dev ：运行

                        npm run build: 打包 (生成一个dist文件夹)

                ②vite:安装                       

                        npm init vite-app <project-name>

                        cd <your-project-name>

                        npm install

                        npm run dev

                    我用的是vite。 因为vue-cli在启动之前，要把所有代码打包成Bundle再启动服务 ，这也是为什么一个些大型项目 启动时，特别慢的原因。这一点在Vite做了大幅度改善，通常包含一些并非直接是js的文件，需要转换，时常被编译。同时，并不是所有的源码都需要同时被加载。这就是vite启动快的原因。

        1-2 重构路由，axios,element-plus,@vitejs/plugin-vue,font-awesome等项目所需的依赖

                把vue2的项目迁移过来第一问题就是路由之类的路径问题，如果要使用@/的路径的时候就要先npm i vite-aliases安装之后在vite.config.js中配置就可以使用了。或者可以使用../相对路径

         2.迁移到vue3的时候虽然能显示出来了但是侧边的收缩效果没有了，这就是elementUi的问题了，vue2和vue3的一些组件使用不一样比如：

 

 报这种警告的都是Element Ui 框架的问题

 数据概览更改方法、计算属性

 

 vue3里是不可以使用this指向的，获取值的时候用value获取

vue2中用elementui中的插槽vue3中可以用template模板中用#就可以解决