vue3+vite +element plus日历date picker中文显示

项目情况

element-plus 默认是英文模式,需要中文模式的话需要设置一下:

项目框架(vue3):vite +JS + element-plus

版本:(注意版本兼容,element plus 较低版本:1.xx.xx,不一定适合此法

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

element Plus是按需导入,需要使用el-config-provider.

nullA Vue 3 based component library for designers and developersicon-default.png?t=N7T8https://element-plus.gitee.io/zh-CN/guide/i18n.html

vue3+vite +element plus日历date picker中文显示_第1张图片

在App.vue中使用el-config-provider改变语言效果

vue3+vite +element plus日历date picker中文显示_第2张图片

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会警告按需引用,如要在main.js使用zh-cn.mjs,需要在项目根目录vite. config.js(如没有就创建一个),加下include路径加入。

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

APP.vue 




你可能感兴趣的:(vue.js,elementui,javascript)