element-plus 将语言设置为中文

1.0.2-beta.59 之前

import lang from 'element-plus/lib/locale/lang/zh-cn'
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale'
locale.use(lang)

1.0.2-beta.59及之后版本（目前到1.0.2-beta.70）

主要是在 App.vue 设置 el-config-provider，将语言设置为中文。

<!-- App.vue -->
<template>
  <el-config-provider :locale="locale">
    <router-view/>
  </el-config-provider>
</template>

<script lang="ts">
  import { ElConfigProvider } from 'element-plus'
  import zhCn from 'element-plus/lib/locale/lang/zh-cn'

  export default {
    components: {
      [ElConfigProvider.name]: ElConfigProvider
    },
    setup() {
      
      // 切换为中文
      let locale = zhCn

      return {
        locale
      }
      
    }
  }
</script>

最新版 1.2.0-bata.1 使用方式

1、安装

yarn add element-plus

2、按需引入

Vue.config.js：

const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  lintOnSave: false, // eslint 报错
  configureWebpack: {
    plugins: [
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  }
}

3、国际化转为中文

App.vue：

<template>
  <el-config-provider :locale="locale">
    <router-view />
  </el-config-provider>
</template>

<script>
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    // 切换为中文
    let locale = zhCn;

    return {
      locale,
    };
  },
});
</script>