vue2迁移vue3

1. vue2: v-on="$listeners"
   vue3:v-bind="$attrs"代替
2. 过滤器
   vue2:

	<p class="font-26 gray">金额{{ detail.money | currency('', 2) }}</p>
	import * as filters from './util/filter'
    Object.keys(filters).forEach((k) => Vue.filter(k, filters[k]))

vue3:

	<p class="font-26 gray">金额{{ $filters.currency(detail.money, '', 2) }}</p>
    import * as filters from './util/filter'
    import { createApp } from 'vue'
    const app = createApp(App)
	Object.keys(filters).forEach((k) => {app.config.globalProperties.$filters[k] = filters[k]})

3. 插槽
   vue2:const slots = this.$slots.default

   vue3:const slots = this.$slots.default()

4. $on，$off
   vue2:

	this.$on('form.addField', field => {
      if (field) {
        this.fields.push(field)
      }
	})

vue3:
util/mitt.js

	import mitt from 'mitt'
	const emitter = mitt()
	export default emitter

	import emitter from '@/utils/mitt.js'
	emitter.on('form.addField', field => {
      if (field) {
        this.fields.push(field)
      }
    })

5. vue2: 在这里插入代码片Vue.prototype.$cookie=cookievue3:‘app.config.globalProperties.$cookie = cookie`

6. vue2: Vue.use(Checkbox)
   vue3: app.use(Checkbox)

7. npm i vant@next -S(vant 升级到vue3可用的版本)

8. router
   main.js
   vue2:

	import Vue from 'vue'

vue3:

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

router/index.js
vue2:

	import Vue from 'vue'
	import Router from 'vue-router'
	const router = new Router(routerList)
	var routerList = {
  mode: 'history',
  base: '/keeper',
  routes: [
    {
      path: '/',
      redirect: '/login',
    },
  ],
}

vue3:

	import { createRouter, createWebHistory } from 'vue-router'
	const routerHistory = createWebHistory()
	const router = createRouter(routerList)
	var routerList = {
  history: createWebHistory('/keeper/'),
  routes: [
    {
      path: '/',
      redirect: '/login',
    },
  ],
}

9. vue2: Vue.component('svg-icon', BaseSvg)
   vue3: app.component('svg-icon', BaseSvg)
10. element-ui 升级 element-plus
11. vue-resource 改成axios
12. vue2:

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

vue3

app
  .use(router)
  .use(require('vue-wechat-title'))
  .use(ElementPlus)
  .use(ElCheckbox)
  .use(ElRadio)
  .use(Calendar)
  .use(Vant)
  .mount('#app')

13. vue-router to 不生效:最前面加一个反斜线
    vue2: <van-cell v-if="platformId === '1'" title="服务协议" is-link to="policies/newServer" />
    vue3: <van-cell v-if="platformId === '1'" title="服务协议" is-link to="/policies/newServer" />
14. 路由匹配的name不可以重名，否则重名的匹配不到
15. vue2: :value="" vue3:modelValue=""
16. vue2: this.$set(config, ‘defaultValue’, event) vue3:config.defaultValue = event