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
})
