## 安装Element UI Element UI 饿了吗团队开发 ``` npm i element-ui -S ``` ## 在项目中引入 element-ui 自动产生的main.js内容如下： ``` import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') ``` 添加Element UI， ``` import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` ## 使用Element UI 的组件 打开 src\components\HelloWorld.vue,增加以下代码 ``` <button>HTML普通按钮</button> <br> <el-button>这是一个Element UI的按钮</el-button> ``` Vue除了体现在创建的整体框架外，对于按钮的显示，可以分离视图和数据。 1. 在HelloWorld.vue中添加按钮， 按钮的显示使用变量的方式 ``` <button>{{ buttonMessage }}</button> ``` 2. 设置变量的值 ``` <HelloWorld msg="Welcome to Your Vue.js App" buttonMessage="Vue处理显示消息的按钮"/> ``` ## * Vue 是Web的框架，这里的框架就是正真的框架， 类似MVC框架。并不包含页面样式 * Element UI 是基于Vue框架的组件库，包含了很多美观、现成的组件， 拿来就可以使用，不需要在编写CSS。