步骤一:使用babel-plugin-component插件。
运行命令行
npm install babel-plugin-component -D
2、修改babel.config.js文件
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
]
]
}
3、为了方便管理,建议在src文件夹下创建element-ui文件夹,并在里面创建index.js文件配置需要的组件。
import { Button, Option, Select, Switch, MessageBox, Message } from 'element-ui'
const element = {
install: function(Vue) {
Vue.use(Button)
Vue.use(Switch)
Vue.use(Select)
Vue.use(Option)
// 往vue实例原型里添加消息提示,方便全局调用
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$message = Message
//使用:this.$message('这是一条消息提示');
}
}
export default element
4、在 main.js 中引入组件
//element-ui样式引入
import 'element-ui/lib/theme-chalk/index.css'
//element-ui文件夹下
import element from './element-ui/index'
Vue.use(element)
测试:
<template>
<div id="index">
<dv-full-screen-container class="bg">
<dv-loading v-if="loading">Loading...</dv-loading>
<div v-else
class="host-body">
<el-select v-model="value"
placeholder="请选择">
<el-option v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</dv-full-screen-container>
</div>
</template>
<script>
export default {
data () {
return {
loading: true,
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
};
},
components: {
},
mounted () {
this.cancelLoading();
},
methods: {
cancelLoading () {
setTimeout(() => {
this.loading = false;
}, 500);
}
}
};
</script>
<style lang="scss">
@import "../assets/scss/index.scss";
</style>