vue3重构vue2后台管理系统

 1. vue2和vue3，vue3用vite的脚手架

1: vue-cli : 安装并执行 npm init vue@latest

选择项目功能时： 除了第一项的项目名字外，其他可以暂时No

cd <your-project-name>

npm install

npm run dev ：运行

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

1. 2 : vite: 使用vite 体验更快速

npm init vite-app <project-name>

cd <your-project-name>

npm install

npm run dev

v3可以采用v2的选项式api，但是v2不能使用v3的组合式api。

由于选项式api一个变量存在于多处，如果出现问题，就需要去涵盖多个函数。

 下载相应的版本，vite启动方式  npm run dev  

   一些要用到的插件  ui框架 axios vue-router路由    等等

2.配置跨域

 3.vue3选项式api 不同于vue2，vue3是只引入相应的属性，用到任何东西都需要单独引入，

        script新增了setup，这里边没有this，好多东西都获取不到，但是getCurrentInstance方法帮我们解决了这个问题，它里边有这个组件的所有东西。

4.响应式

        组合式api的普通变量不具备响应式，但是有四个方法来解决这个问题

        ref，reactive,toRef toRefs       

        声明的变量都用ref（）包裹一下 

  5.set会在初始化之前执行一次比beforeCreated更早执行，

       所以要获取dom的话要单独引入onMounted钩子函数，

        在dom挂载之后执行

6.ui框架也发生了变化，很多东西都需要更改，ui标签里边的方法也需要改变，有些就是用不了，按照文档更改一下就可以了。

7.起初遇见的问题就是发现给元素打上标识之后没有办法获取到，通过getCurrentInstance方法 获取到它里边的所有东西，包括refs，所有声明的数据都不是响应式的，需要单独挂上ref，当然标签里边可以直接获取到值，但是下边如果要获取的话就要.value才可以获取得到。

以上就是vue2到vue3获取的全部过程