Vue中如何引入ElementUI

使用vue-cli创建好test项目后，将element-ui引入到项目中

1. 使用npm 安装element-ui

跳转到test项目的根目录中

使用npm i element-ui -S进行安装

2. 引入整个 Element

打开main.js文件，将下面代码复制到js文件中，覆盖原来的内容

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

在引入element时，可以传入一个全局配置对象

该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）,修改vue.use(ElementUI,{ size: 'small', zIndex: 3000 })后，项目中size属性默认为：small，弹框初始为 z-index为3000，修改后的main.js如下所示

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI,{size:'small',zIndex:'3000'})

new Vue({
  el: '#app',
  render: h => h(App)
});

至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。

如果打开页面出现以下错误，该问题可能值vue版本与elementui版本不兼容，vue3使用element-plus版本

3. 国际化处理

element默认使用中文，需要使用其他语言，需要多语言处理，可以使用 vue-i18n进行多语言切换，可以在main.js文件中，添加多语言处理

(1) 使用npm安装i18n

查看i18n版本号: npm view vue-i18n versions --json

执行npm install vue-i18n@7.3.2

（2）在src下创建i18n文件夹，存在i18n的一些配置，创建i18n.js文件，写入内容,

如果需要使用其他语言，先import导入elementui的英语语言包，在国际化实例中message中添加该语言en:{...elementEN,}

// 进行多语言支持配置
import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入国际化的插件包
import locale from 'element-ui/lib/locale'
import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包

Vue.use(VueI18n) // 全局注册国际化包
 
// 创建国际化插件的实例
const i18n = new VueI18n({
  // 指定语言类型 zh表示中文 en表示英文
  locale: 'zh',
  // 将elementUI语言包加入到插件语言数据里
  messages: {
    // 中文环境下的语言数据
    zh: {
      ...elementZH,
    },
    // 英文环境下的语言数据
    en: {
      ...elementEN,
 
    },
  }
})
// 配置elementUI 语言转换关系
locale.i18n((key, value) => i18n.t(key, value))
 
export default i18n

将i18n.js引入到main.js文件中

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; 
import App from './App.vue';

import i18n from './i18n/i18n'

Vue.use(ElementUI,{size:'small',zIndex:'3000'})

new Vue({
  el: '#app',
  i18n,
  render: h => h(App)
});

在vue页面中使用 $t()方法引入，在methods方法中使用 this.i18n.locale='type'指定语言

<div>{{ $t('el.messagebox.title') }} </div>
<el-button @click="changeLanguage('zh')">中文</el-button></el-col>
<el-button @click="changeLanguage('en')">English</el-button></el-col>


methods:{
    changeLanguage(type){
      this.$i18n.locale = type;
    }
}

至此，在vue中引入elementUI已经完成，想了解更多关于elementUI中组件使用，访问element官网

代码地址：https://download.csdn.net/download/changwen17/87424807