vue2升级vue3

// main.js (Vue 2)
import Vue from 'vue';
import App from './App.vue';

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

// main.js (Vue 3)
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

// 解释说明：
// 在Vue 2中，我们使用Vue构造函数来创建一个新的Vue实例，并通过`$mount`方法将其挂载到DOM元素上。
// 在Vue 3中，我们使用`createApp`函数来创建一个应用实例，并通过`mount`方法将其挂载到DOM元素上。这种方式更加直观和简洁。

// components/MyComponent.vue (Vue 2)
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue 2'
    };
  }
};
</script>

// components/MyComponent.vue (Vue 3)
<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue 3');
    return { message };
  }
};
</script>

// 解释说明：
// 在Vue 2中，我们使用`data`选项来定义组件的状态。
// 在Vue 3中，我们使用`setup`函数和组合式API（Composition API）中的`ref`函数来定义响应式状态。这种方式提供了更好的逻辑复用和代码组织方式。

// plugins/vuex.js (Vue 2)
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

// plugins/pinia.js (Vue 3)
import { createPinia } from 'pinia';

const pinia = createPinia();

export default pinia;

// store/counter.js (Vue 3)
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

// 解释说明：
// 在Vue 2中，我们使用Vuex作为状态管理库，通过`Vue.use`注册Vuex插件，并创建一个新的Vuex Store实例。
// 在Vue 3中，推荐使用Pinia作为状态管理库。Pinia的API更加简洁和灵活，通过`defineStore`函数定义存储模块，并返回一个存储实例。

// router/index.js (Vue 2)
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
});

// router/index.js (Vue 3)
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
});

export default router;

// 解释说明：
// 在Vue 2中，我们使用`vue-router`并通过`Vue.use`注册路由插件，创建一个新的路由实例。
// 在Vue 3中，我们使用`createRouter`和`createWebHistory`函数来创建路由实例。这种方式更加模块化和灵活。