vue使用element-ui

### 如何在 Vue 项目中集成和使用 Element-UI 组件库

#### 安装依赖包
为了能够在 Vue 项目中使用 Element-UI，首先需要安装对应的 npm 包。可以通过命令行工具执行如下指令来完成安装：

npm install element-ui --save

#### 导入样式文件与插件注册
打开 `src/main.js` 文件，在其中导入并配置 Element-UI 的样式表以及将其作为全局组件挂载至 Vue 实例上。

import Vue from 'vue';
import App from './App.vue';

// 引入 Element UI 及其默认主题样式
import ElementUI from 'element-ui'; 
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false;

// 使用 Element UI 插件，并设置消息提示方法为静态属性方便调用
Vue.prototype.$message = ElementUI.Message;
Vue.use(ElementUI);

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

此时已经完成了基本的初始化工作[^1]。

#### 创建页面结构
创建一个新的 `.vue` 单文件组件用于展示具体业务逻辑下的界面布局设计；按照标准模板编写 HTML 结构、JavaScript 行为定义及 CSS 样式声明等内容。

<template>
  <div id="example">
    <!-- 这里放置具体的 DOM 元素 -->
    <el-button @click="showMessage">点击显示消息</el-button>
  </div>
</template>

<script>
export default {
  name: 'ExampleComponent',
  
  methods:{
      showMessage(){
          this.$message('这是一条测试信息！');
      }
  }

}
</script>

<style scoped lang="scss">
/* 自定义样式 */
#example{
    
}
</style>

上述代码片段展示了如何利用 `<el-button>` 来实现按钮控件的功能，并且绑定了一个简单的事件处理器用来触发弹窗通知效果[^2]。