vue2升级到vue3

1、vue-i18n

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  // something vue-i18n options here ...
})

const app = createApp({
  // something vue options here ...
})

app.use(i18n)
app.mount('#app')

2、require

vue 2.0写法
require.context('./modules', true, /\.js$/)

vue3.0写法
import.meta.globEager("./module/*.js") 

3、Vue.prototype

vue 2.0写法
Vue.prototype.$t = xxxxxx;

vue3.0写法
app.config.globalProperties.$t = xxxxxxxx;

4、Vue.set()和Vue.delete()

Vue.set(this.addModel.attr, this.attr, 'aa')
this.addModel.attr[this.attr] = 'aa'


Vue.delete(this.addModel.attr, this.attr)
delete this.dictAddModel.attr[this.attr]

5、实现模块自动引入 require

image.png

import.meta.glob 为过动态导入，构建时，会分离为独立的 chunk

import { createStore } from 'vuex'

const files = import.meta.glob('./modules/*.js')
const modules = {}
for (const key in files) {
    files[key]().then(res=>{
        modules[key.replace(/^\.\/modules\/(.*)\.\w+$/, '$1')] = res.default
    })
}

Object.keys(modules).forEach(item => {
    modules[item]['namespaced'] = true
})

export default createStore({
    modules
})

import.meta.globEager 为直接引入

const files = import.meta.globEager('./modules/*.js')

const modules = {}
for (const key in files) {
    modules[key.replace(/^\.\/modules\/(.*)\.\w+$/, '$1')]=files[key].default
}

Object.keys(modules).forEach(item => {
  // 为每个模块添加一个前缀名，保证模块命明不冲突 
    modules[item]['namespaced'] = true
})