官網(wǎng)：鏈接
安裝：推薦使用 npm
npm i element-ui -s
ElementUI 為新版的 vue-cli 準(zhǔn)備了相應(yīng)的 Element插件泽论，可以快速搭建一個基于 Element 的項目闷游。
引入 Element
可以引入整個 Element，或者根據(jù)需要引入部分組件封寞。
- 完整引入
在 vue-blog main.js 中寫入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
這里需要注意的是 樣式文件 需要單獨(dú)引入。
- 按需引入
借助 babel-plugin-component 可以只引入需要的組件，以達(dá)到減小項目體積的目的餐茵。
首先應(yīng)該安裝 babel-plugin-component：
npm install babel-plugin-component -D
然后將 .babelrc 修改為：
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
接著把希望引入的部分組件寫入 main.js：
import { Button, Select } from 'element-ui'; // 比如：Button 和 Select
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或?qū)憺? * Vue.use(Button)
* Vue.use(Select)
*/
有一些常用的組件已經(jīng)綁定到 Vue 的原型上，可以使用 this.$組件 來使用這些常用組件述吸，或者寫 組件.something 忿族。
詳細(xì)情況如下：
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
使用組件
在文檔中找到需要使用的組件的相應(yīng)代碼，加入到 vue 文件中：
<el-button @click="onClick1">Button 組件測試</el-button>
可以使用 Element 中的默認(rèn)樣式蝌矛，也可以通過修改底層代碼或者CSS覆蓋樣式的方式來修改 Element 組件的樣式道批。
在 js 文件中綁定事件：
export default {
data() {
},
methods: {
onClick1() {
this.$message('這是我使用的第一個 Element 組件')
}
}
}
效果如下：
組件測試.PNG
