前一段时间咋们的尤雨溪大大 发表了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来学习,这样的话学的更快,记得更佳清晰,小伙伴们抓紧学习起来吧。