vue - vue2 升级到 vue3的步骤

refer to :

原则：

1. 能不动就别动

2. 一定要动的话，改动比较大。

3. 看：npm run dev 看能否能跑起来， 看报的是什么错

重新安排package.json

如果是大项目的话，建议慎重操作 如果是小项目的话，pacakge.json需要重新安排。否则会包莫名其妙的错误。基本都是由于第三方包版本不兼容造成的。

vue-router需要做改动

import Vue from 'vue'
import Router from 'vue-router'

改成：

import { createRouter, createWebHistory } from 'vue-router'
routes = []  // 这里是路由
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

VueResource 不要用了，使用Axios

import VueResource from 'vue-resource'

修改vue的初始化入口和方式

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

改成形如这样的形式：

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

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

不再暴露全局的Vue对象。

例如，Vue2.x

import vueConfig from './vue-config'
const configs = {
  api: 'http://shopweb.sweetysoft.com/interface/'
}

Vue.use(vueConfig, configs)

Vue3.x

....
const app = createApp({})
app.config.globalProperties.api = 'http://shopweb.sweetysoft.com/interface/'

Vuex的使用发生了变化。不但声明要改(src/vuex/store.js) ，其他代码也要改(使用vuex的地方)

import Vue from 'vue'
import Vuex from 'vuex'
export default new Vuex.Store({  ... }) 

vue3:

import { createStore } from 'vuex'
import { INCREASE } from '@/vuex/mutation_types'

export default createStore({

使用的页面，都要有 store: useStore(),  的声明

修改http的使用方式

vue2.x

this.$http.get 

vue3:

const axios = require('axios');
axios.get('/api/interface/blogs/all').then((response) => {
     response.data ...

检查router, 看是否有重名的内容

vue2中可以重名，vue3中不可以重名，否则报错：

[Vue Router warn]: No match found for location with path "/" 

 const routes = [           
     {
       path: '/',           
       name: 'Root',           // 这里不可以重名
       component: Index     
     },