vue3 + vite 项目搭建 - 引入ElementPlus及配置国际化

element提供了完整引入和按需引入的方案，并且使用dayjs国际化

完整引入 + 普通国际化

新建 elementPlus.ts文件，并在main.ts中引入

// elementPlus.ts
import { App } from 'vue'

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const install = (app: App) => {
  app.use(ElementPlus)
}
export default install

import { createApp } from 'vue'
import App from './App.vue'

import elementPlus from '@/vab/elementPlus'

const app = createApp(App)
app.use(elementPlus)
app.mount('#app')

在App.vue中使用el-config-provider控制国际化

<template>
  <el-config-provider :locale="localLanguage">
    <hello-world @change="changeLanguage" />
  </el-config-provider>
</template>
<script lang="ts">
import HelloWorld from '@/components/HelloWorld.vue'
import { computed, defineComponent, ref } from 'vue'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import en from 'element-plus/lib/locale/lang/en'
type localType = 'zhCn' | 'en'
export default defineComponent({
  components: {
    HelloWorld
  },
  setup () {
    const local = ref<localType>('zhCn')
    const localLanguage = computed(() => {
      switch (local.value) {
        case 'en':
          return en
        case 'zhCn':
          return zhCn
      }
    })
    return {
      local,
      localLanguage
    }
  },
  methods: {
    /**
     * 切换语言
     * @param type
     */
    changeLanguage (type: localType): void {
      this.local = type
    }
  }
})
</script>

在HelloWord组件中切换语言

<template>
  <el-button>按钮</el-button>
  <el-date-picker
    v-model="value1"
    type="date"
    placeholder="选择日期"
  >
  </el-date-picker>
  <el-dropdown @command="changeLanguage">
    <el-button type="primary">
      切换语言<i class="el-icon-arrow-down el-icon--right" />
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="zhCn">
          中文
        </el-dropdown-item>
        <el-dropdown-item command="en">
          英文
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

type localType = 'zhCn' | 'en'

export default defineComponent({
  setup () {
    return {
      value1: ''
    }
  },
  methods: {
    /**
     * 切换语言
     * @param type
     */
    changeLanguage (type: localType): void {
      this.$emit('change', type)
    }
  }
})
</script>

按需引入 + 普通国际化

安装 vite-plugin-components sass

"devDependencies": {
	"vite-plugin-components": "^0.13.2",
    "sass": "^1.37.2"
   }

配置按需引入

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

import ViteComponents, { ElementPlusResolver } from 'vite-plugin-components'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 组件自动导入
    ViteComponents({
      customComponentResolvers: [
        // 自动导入饿了么组件
        ElementPlusResolver({
          // 是否导入样式
          importStyle: true
        })
      ]
    })
  ],
  resolve: {
    alias: {
      '@': resolve('src'),
      '*': resolve('')
    }
  }
})

App.vue及HelloWord.vue同上

引入i18n

本来我是按照官方文档，直接配置element和i18n同步更改，但是发现element组件中的i18n不生效，我找不出哪里出了问题，所以先使用了替代方案，使用el-config-provider来控制组件的国际化，使用i18n控制自定义的消息，当用户更改语言时，分别去更改el-config-provider的local和i18n的local属性

创建i18n.ts文件

// i18n.ts
import { App } from 'vue'

import { createI18n } from 'vue-i18n'

const install = (app: App) => {
  const messages = {
    en: {
      // 定义你自己的字典，但是请不要和 `el` 重复，这样会导致 ElementPlus 内部组件的翻译失效.
      message: {
        hello: 'hello world'
      }
    },
    zhCn: {
      // 定义你自己的字典，但是请不要和 `el` 重复，这样会导致 ElementPlus 内部组件的翻译失效.
      message: {
        hello: '你好，世界'
      }
    }
  }

  const i18n = createI18n({
    locale: 'zhCn',
    fallbackLocale: 'en',
    // @ts-ignore
    messages
  })
  app.use(i18n)
}
export default install

在main.js中引入
element按需引入或者整体引入同上，只需在切换语言的方法新增一步

/**
     * 切换语言
     * @param type
     */
    changeLanguage (type: localType): void {
      this.local = type
      this.$i18n.locale = type
    }

总结

当前vue3的生态变化还是比较快的，多数还是beta版本，所以大家在遇到问题时还是要多做尝试