## 安裝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。