vue2项目升级vue3、vue-router3升vue-router4小记

之前的包版本

看视频的时候发现vue3的一些基础配置代码有变，比如出使用createApp，app.use(),app.mount(’#app’)等，跟我现在的vue2 new Vue以及vue-router的方法上都有不同，我一直以为自己是vue3，本着追求新事物的想法，下午心血来潮把项目的vue和vue-router版本升级了一下，这是之前的package.json

 "dependencies": {
    "@tweenjs/tween.js": "^18.6.4",
    "axios": "^0.21.1",
    "dat.gui": "^0.7.7",
    "element-ui": "^2.4.5",
    "stats.js": "^0.17.0",
    "three": "^0.124.0",
    "three.meshline": "^1.3.0",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "babel-plugin-component": "^1.1.1",
    "core-js": "^3.8.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^4.0.0",
    "less-loader": "^7.2.0",
    "vue-cli-plugin-element": "^1.0.1",
    "vue-template-compiler": "^2.6.11"
  },

注意一下vue，vue-router，element-ui 以及vue-template-compiler

更新版本嘛，多简单

vue来个3.0.0好了，vue-router来个4.0.0，保存package.json，npm install，走你~
好嘛，遇到了不少问题，这些问题主要在于配置而不是vue3代码方法名的改变，因为我在看教学视频，所以代码里的方法我已经改好了，甚至超前了版本，比如我老早就写好了路由里的

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
}) 

但是那时还是vue2，找不到createWebHistory这个方法，所以坑主要在于配置上面；

遇到的几个坑

1. vue2才有vue-template-compiler，前面我贴的pakcage.json里的开发依赖里最后一个，vue3里不需要了，改成了@vue/compiler-sfc，不然可能会报TypeError: Cannot read property ‘parseComponent‘ of undefined的错；另外，还需要安装 vue-loader，可以尝试这两行命令

npm i @vue/compiler-sfc@latest
npm i vue-loader@next

2. 再一个坑是element-ui的坑，到了vue3应该用element-plus，贴一个main.js里的全部引用方式，其实和element-ui一样，就是下载个新的包，代码里改下名字，不过如果是部分引用，改的就多一些了，这个自行谷歌吧

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

另外还有个问题，可能是element-plus的问题，之前页面是用element-ui写的，改了之后两个el-form-item里的两个按钮位置变了，好像是el-form-item加css的class没用，我的做法是在el-form-item下、也就是两个按钮的上面一层，加一层div，把class给div，就和原来一样了；在就是导航菜单出了问题，直接去官方文档看就可以；

3. 最后报了一个让我To install it, you can run: npm install --save core-js/core/object的错，但是运行这个命令总是也不行，最后发现是代码里不小心加了一行，好像是import {object } from 'core-js/core/object'，应该是自动补全的；
4. 再就是为了保证three.js页面的性能，vue2里在beforeDestory里把this.XXX都清空了，换成vue3之后页面好卡，结果这个方法根本没执行，原来是vue3的生命周期里这个方法改名成beforeUnmount了，害；

现在的package.json

"dependencies": {
    "@tweenjs/tween.js": "^18.6.4",
    "axios": "^0.21.1",
    "dat.gui": "^0.7.7",
    "element-plus": "^1.0.2-beta.55",
    "element-ui": "^2.4.5",
    "stats.js": "^0.17.0",
    "three": "^0.124.0",
    "three.meshline": "^1.3.0",
    "vue": "^3.1.4",
    "vue-loader": "^16.2.0",
    "vue-router": "^4.0.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.1.4",
    "babel-eslint": "^10.1.0",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-import": "^1.13.3",
    "core-js": "^3.15.2",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^4.0.0",
    "less-loader": "^7.2.0",
    "vue-cli-plugin-element": "^1.0.1"
  },

package.json前后git对比