【SpringBoot+Vue】002-Vue整合饿了么UI_vue饿了么框架

1. ElementUI官方文档

饿了么UI官方文档https://element.eleme.cn/#/zh-CN

2. 安装

npm i element-ui -S

依赖会被添加至package.json中

 3. 引入elementUI

在main.js文件中加入下面语句

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

Vue.use(ElementUI);

4. 小试牛刀

在AboutView.vue页面加入可以提示消息的el-button

参考：ElementUI - 消息组件

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <el-button :plain="true" @click="open2">成功</el-button>
  </div>
</template>
 
<script>
export default {
  methods: {
    open2() {
      this.$message({
        message: '恭喜你，这是一条成功消息',
        type: 'success'
      });
    }
  }
}
</script>

运行项目，可以看到About页面多了一个按钮，点击按钮弹出提示信息，与ElementUI文档上展示的效果一致

至此，Vue项目已经可以使用ElementUI进行开发！