vue-cli3和vue-cli2区别

vue-cli3和vue-cli2标签使用区别

1.插槽（具名插槽提供内容）

vue2 直接在标签上设置slot的名称。eg： <span slot='logo' class="head_logo" ></span>

vue3 在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。eg:<template v-slot:logo>
                 <span class="head_logo"></span>
            </template>

2.vue-router

在router文件中

vue2.0

 

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) 
const routes = [
    {
		path: '/', 
		redirect: '/home'
	},
	{
		path: '/home',
		name: 'home',
		component: () => import('@/views/home/home.vue')
	}, 
]
const router = new VueRouter({
	routes,
	mode: routerMode,
	strict: process.env.NODE_ENV !== 'production',
	scrollBehavior (to, from, savedPosition) {
	    if (savedPosition) {
		    return savedPosition
		} else {
			if (from.meta.keepAlive) {
				from.meta.savedPosition = document.body.scrollTop;
			}
		    return { x: 0, y: to.meta.savedPosition || 0 }
		}
	}
})
export default router

vue3 .0

import { createRouter, createWebHashHistory, useRouter } from 'vue-router';
const routes = [
    {
		path: '/', 
		redirect: '/home'
	},
	{
		path: '/home',
		name: 'home',
		component: () => import('@/views/home/home.vue')
	}, 
]
const router = createRouter({
    routes,
    history: createWebHashHistory(),
	mode: routerMode,
	strict: process.env.NODE_ENV !== 'production',
	scrollBehavior(to, from, savedPosition) {
		if (savedPosition) {
			return savedPosition
		} else {
			if (from.meta.keepAlive) {
				from.meta.savedPosition = document.body.scrollTop;
			}
			return {
				x: 0,
				y: to.meta.savedPosition || 0
			}
		}
	}
})
export default router

在main.js

vue2.0

import routerfrom './router/index.js'
new Vue({
	router,
	store,
}).$mount('#app')

vue3.0

const app=createApp(App);

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