升级到@vue-cli3之后element-ui 也做了相应的升级,这里的版本是:"element-plus": "^1.0.2-beta.44",可能后面的版本不适用此分享出来的方法了。

npm 安装

npm install element-plus --save

*这里讲的是按需引入

//element.js

import { ElButton,ElTabs,ElInput,ElForm} from 'element-plus'

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

const components = [ElButton,ElTabs,ElInput,ElForm]

export default (Vue) => {

  components.forEach(item => {

    Vue.use(item)

  })

}
//main.js

import {createApp} from 'vue'

import initElement from './utils/element'

const app = createApp(App)

initElement(app)

app.use(store)
  .use(router)
  .mount('#app')

到这里 element 组件按需引入就完成了

但是这里会出现一个 默认语言是英文的问题,如果不需要修改可以忽略,如果需要修改成中文,在 element.js 文件多引入一个 loacle

//element.js

import { ElButton,ElTabs,ElInput,ElForm,locale} from 'element-plus'

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

import lang from 'element-plus/lib/locale/lang/zh-cn'//国际化

locale(lang)//国际化

const components = [ElButton,ElTabs,ElInput,ElForm]

export default (Vue) => {

  components.forEach(item => {

    Vue.use(item)

  })

}

import lang from 'element-plus/lib/locale/lang/zh-cn'//可以根据自身需求来引入对应的语种

可以查看 Element Plus 内置的语言:element-plus国际化 

Logo

前往低代码交流专区

更多推荐