下载ElementUI
- 推荐使用npm的方式安装,它能更好的和webpack打包工具配合使用
npm i element-ui -S
按需引入ElementUI
- 有时候只需要引入ElementUI中的几个组件,全局引入会增加项目的体积,所以按需引入更合适
例如:Message消息提示组件
- 在mian.js中引入并注册组件
import {Message} from 'element-ui'
- 在main.js注册,这里是挂载在Vue原型上的
Vue.prototype.$message = Message;
- 使用
<template>
<div id="app">
<el-button type="primary" @click='clickBtn'>主要按钮</el-button>
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
methods:{
clickBtn:function(){
this.$message({
message:'这是一条提示信息'
});
}
}
}
</script>
- 效果
全局引入
-
当我们在项目使用ElementUI组件比较多时,就可以全局引入,方便省事儿
-
在main.js中添加以下代码全局引入
//引入elementui
import ElementUI from 'element-ui'
//样式需要单独引入
import 'element-ui/lib/theme-chalk/index.css'
//挂载
Vue.use(ElementUI)
- 使用
在app.vue中
<template>
<div id="app">
<el-button type="primary" @click='clickBtn'>主要按钮</el-button>
</div>
</template>
- 相比按需引入,全局引入确实方便很多