Vue3与Vue2用法区别

vue2 vue的引入以及创建：

import Vue from 'vue'
import App from './App.vue'
new Vue({    
    render: h => h(App)  
}).$mount('#app')

vue3 vue的引入以及创建：

import { createApp } from 'vue'  
import App from './App.vue'  
const app = createApp(App)  
app.mount('#app')

vue2 store的引入和创建：

store.index.js中设置

Vue.use(Vuex)  
export default new Vuex.Store({  
  state: {},  
  getters: {},  
  mutations: {},  
  actions: {},  
  modules: {}})  

main.js中引入

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

vue3 store的引入和创建：

store index.js中设置

import { createRouter, createWebHashHistory } from "vue-router"  
export const router = createRouter({  
    history: createWebHashHistory(),  
    routes: routes,  
    })  

main.js中设置

import { createApp } from 'vue'
import App from './App.vue'
import store from './store/index'
const app = createApp(App)
app.use(store)//先use后mount不然报错
app.mount('#app')

vue2 router的引入和创建：

router index.js中设置

import VueRouter from 'vue-router'  
Vue.use(VueRouter)
const router = new VueRouter({  
    mode: 'hash',  
    base: process.env.BASE_URL,  
    base: './',  
    routes  
})  
export default router  

main.js中设置

import router from './router'
new Vue({  
    router
    render: h => h(App)  
}).$mount('#app')  

vue3 router的引入和创建：

router index.js中设置

import { createRouter, createWebHashHistory } from "vue-router"
export const router = createRouter({
    history: createWebHashHistory(),
    routes: routes,
    })

main.js中设置

import { router } from './router/index'
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.use(router)
app.mount('#app')