Vue中elementUI的使用

官方文档：https://element.eleme.cn/#/zh-CN/component/installation
npm安装

npm i element-ui -S

在vue中进行引入
在main.js中：

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import 'element-ui/lib/theme-chalk/display.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
Layout 布局
通过基础的 24 分栏，迅速简便地创建布局
基于断点的隐藏类
参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。
额外的引入一些样式在main.js入口里：
import ‘element-ui/lib/theme-chalk/display.css’;
组件的使用具体看官方文档即可
简单操作练习：

<el-radio-group v-model="radio1">
    <el-radio-button label="上海"></el-radio-button>
    <el-radio-button label="北京"></el-radio-button>
    <el-radio-button label="广州"></el-radio-button>
    <el-radio-button label="深圳"></el-radio-button>
  </el-radio-group>
<br/>
<i class="el-icon-user-solid"></i>
<el-button type="primary" class="hidden-lg-only">主要按钮</el-button>

根据官方文档进行修改即可
Icon图标，直接改变class属性值即可
Drawer 抽屉

<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
  点我打开
</el-button>
<script>
  export default {
    data() {
      return {
        drawer: false,
        direction: 'btt',
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>
//看参数，该默认值