Vue中如何引入ElementUI
使用vue-cli创建好test项目后,将element-ui引入到项目中
使用npm 安装element-ui
跳转到test项目的根目录中
使用npm i element-ui -S进行安装
引入整个 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版本
国际化处理
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
Vue中如何引入ElementUI相关推荐
- Vue中import引入模块路径时的@符号
Vue中import引入模块路径时的@符号 1.ES6 模块主要有两个功能:export 和 import export:用户对外输出本模块(一个文件可以理解为一个模块,比如 aaa.js bbb.j ...
- Jhipster生成前端为Vue的项目引入Element-UI
Jhipster生成前端为typescript 的Vue的项目引入Element-UI 在main.ts /* 引入element-ui */ import * as ElementUI from ' ...
- vue中如何引入指定字体并且使用
vue中如何引入指定字体并且使用 步骤一:在src下建立文件夹fonts fonts下引入字体文件且建立一个css文件 在css中定义字体样式 @font-face { font-family: '字 ...
- vue中图片引入问题以及实现openlayers地图标记
最近因为工作需要,在研究openlayers地图的使用,但是卡在了地图标记这块,不论我怎么尝试,标记就是不会显示在地图上,反反复复看了很多博客,也研究了文档,都觉得没有问题,也用html尝试了,标记可 ...
- vue中怎么引入字体包(超详细)
vue中怎么引入字体包 一.创建文件并添加字体包 1.在src里面的assets文件中创建text文件(没有assets文件可以自己创建一个,也可以不用此命名): 2.把字体包放入text文件,并创建 ...
- flask template中使用Vue,遇到引入element-ui无效问题,Unknown custom element did you register the component correc
本人最近在将A项目中的一个flask template页面前后端代码,迁移至B项目的中. A项目 template页面中使用了Vue,使用了element-ui组件.B项目也是flask 框架,之前没 ...
- Vue中怎样引入Element
引入Element 完整引入 在vue项目下的src下的main.js中加入 import Vue from 'vue'; import ElementUI from 'element-ui'; im ...
- 创建vue项目(二)引入elementUi、axios、准备静态资源、封装组件(.vue,js代码等)
下载安装node -> vue-cli -> 配置路由 -> 引入elementUi -> 公共组件 一.引入elementUi 顺便一提axios使用说明 和axios在vu ...
- Vue项目搭建 + 引入ElementUI
初始化单页系统 在学习Vue的过程中,官方网站都是给了非常详细的介绍,所以初始化大型单页应用,官网给的参考资料地址:https://cn.vuejs.org/v2/guide/installation ...
最新文章
- php HASHTABLE 实现
- linux 系统装中文输入法 fcitx
- 关于ConcurrentHashMap在jdk1.7的升级到1.8中的变化
- TMDS——最小化传输差分信号及其协议
- 3085 吃遍赴丝码(分治)
- Apache Spark机器学习3.3 特征准备
- bwlabel和bwconncomp区别
- APMCM亚太地区数学建模历年赛题
- 高效文件搜索工具Everything/Listary
- [趣味文学]“帅气”的莎士比亚
- 所有的伟大都源于一次勇敢的开始
- 制作一款Jframe窗口游戏原来这么简单,我抚摸着光头禁不住惊叹!!开始、暂停、重新开始事件必须有,线程也加入下充充面子,背景更换和移动也需要,一首背景音乐当然更适合游戏。
- 计算机丢失系统文件如何找回,电脑引导文件丢失怎么办 引导文件丢失恢复方法...
- Chromedriver各个版本浏览器驱动下载地址
- PyGobject(十九)布局容器之Alignment
- 关于网络硬件配置出现问题,无法上网问题的解决
- 购物网站 mysql设计_购物网站数据库设计
- Golang源码中xmm0寄存器
- 巴菲特弃用 20 美元的三星翻盖,换上了 iPhone
- 通过Trie实现违禁词过滤