总结 vue3 一些写法上的改变

前一段时间咋们的尤雨溪大大 发表了vue3 beta版本，我花了时间看了一下，见得总结了一下！

1.首先在咋们的mian.js中引入的一些改变。

在vue2版本中我们是这样引入的

   //vue2
   important Vue from 'vue';
   important App from './App.vue';
   important router from './router';
   important store from './store';

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

而在vue3中我们得这样引入

 //vue3
 important { createApp} from 'vue';
 important App from './App.vue';
 important router from './router';
 important store from './store';

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

2.路由router引入的一些改变

在vue2中

  //vue2
  important Vue from 'vue';
  important VueRouter from 'vue-router';
  important Home from '../views/Home.vue';

  Vue.use(VueRouter);
  
  const routers = [
    {
       path: '/',
       name: 'Home',
       component:Home
   }
];

export default new VueRouter({
       routes
})

现在的vue3

  //vue3
  important {createRouter,createWebHashHistory} from 'vue-router';
  important Home from '../views/Home.vue';

  const routes = [
   {
     path: '/',
     name: 'Home',
     component : Home
     }
  ];

  export default createRouter ({
     history: createWebHashHistory(),
     routes
  })

3.vuex中的一些改变

在vue2中

  //vue2
  important Vue from 'vue';
  important Vuex from 'vuex' ;
  
  Vue.use(Vuex);

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

vue3中

  important { createStore } from 'vuex'

  export default createStore({
    state:{},
    mutations: {},
    actions: {},
    modules: {}
 })

报错 Resolve error : Cannot find module 'vue-loader-v16/package.json' -更新node到最新版本
热更新有问题，需要及时手动刷新页面

总结一下学习经验
学习vue3需要对比vue2来学习，这样的话学的更快，记得更佳清晰，小伙伴们抓紧学习起来吧。