老项目 Vue2.6.0 升级 Vue3

为什么升级

1. Composition-api解决了以前data中写数据，method中写方法，各种杂七杂八的逻辑混合在一起的问题

2. 能够只对部分数据进行监听和更新指定dom（个人理解）

3. 对typescript支持更好，eslint+typescript+husky（pre-committed检测）+prettier

4. 对新技术的尝鲜

升级步骤

1. 拉一个新的分支

2. 删除当前node-modules中的文件

3. 安装最新的vue-cli

4. 升级vue，vue-router，vuex，vant等ui库

接下来的事情就比较繁琐了

因为Treeshaking所以vue3中所有的api都是需要引入的

main.js

首先进行更改的就是main.js中的文件

//before

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#app')

//now

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

//before
Vue.prototype.$a = aa //自定义全局属性
//now
const app = createApp(App)
app.config.globalProperties.$a = aa
app.use(store).use(router).mount('#app')

router

接下来就是router中的变化

src/router/index.js

因为vue-router采用了es modules模块化，以及自身的tree shaking特性所以也需要通过es6+中的解构赋值的方式进行引入createRouter，如果需要使用history模式，还需要引入createWebHistory

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/s',
    name: 's',
    component: () => import('@/views/sample/index'),
    children: [
      {
        path: 'list',
        component: () => import('@/views/sample/list')
      },
    ]
  },
]

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

export default router

现在存在的问题

1. html-webpack-externals-plugin因为vue不再向以前的方式引入一个Vue的全局变量，导致无法进行node_modules忽略

2. jsbridge会存在WebViewJavascriptBridge.init called twice的问题

3. standard规范中使用vant3.0版本时，popup组件，需要绑定show属性，eslint会报错