vue3+vite +element plus calendar date picker Chinese display

Project Status

element-plus  defaults to English mode. If you need Chinese mode, you need to set it:

Project framework ( vue3 ): vite +JS + element-plus

Version: (Note that versions are compatible. The lower version of element plus: 1.xx.xx may not be suitable for this method.

"element-plus": "^2.4.4",
"vue": "^3.0.4"

element Plus is imported on demand and requires the use of el-config-provider.

nullA Vue 3 based component library for designers and developershttps://element-plus.gitee.io/zh-CN/guide/i18n.html

Use el-config-provider in App.vue to change the language effect

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import ElementPlus from "../src/core/element";

import 'element-plus/theme-chalk/index.css'
import locale from 'element-plus/dist/locale/zh-cn.mjs'

const  app=createApp(App)
 app.use(ElementPlus)


const vm= app.mount('#app')
console.log(app)
console.log(vm)

 vite. config.js

pnpm run dev will warn you about on-demand references. If you want to use zh-cn.mjs in main.js, you need to add vite.config.js in the project root directory (if not, create one) and add the include path.

module.exports = {
  lintOnSave: false,//关闭语法检查
  optimizeDeps: {
    include: ['element-plus/dist/locale/zh-cn.mjs'],
  }
}

APP.view 

<template>

  <el-config-provider :locale="locale">


    <img alt="Vue logo" src="./assets/logo.png"/>
    <el-divider></el-divider>
    <div class="block">
      <span class="demonstration">中文日历：</span>
      <el-date-picker
          v-model="value1"
          type="date"
          placeholder="Pick a day"
      />
    </div>
    <el-divider></el-divider> 
    <br/>
  
  </el-config-provider>

</template>

<script> 
import locale from 'element-plus/dist/locale/zh-cn.mjs'
import {ElConfigProvider} from 'element-plus'

export default {
  name: 'App',
  components: {
    
    ElConfigProvider,
  },

  setup() {

   
  }
  ,
  data() {
    return {
      locale: locale,

      value1: '',
      name: '张三',
      job: {
        type: 'engine'
        , salary: 12000,
        address: {
          query: {name: 'gz'}
        }
      },
      hobby: ['排球', '羽毛球', '爬山']
    }
  }
  ,

  methods: {
    
  }
}
</script>