Element-ui入门

Element-ui是（饿了么团队）基于MVVM框架Vue开源出来的一套前端UI组件，类似的UI框架也非常多，例如i-view，Vuetify等。使用vue搭建前台页面，它会帮助我们进行视图的渲染，但是样式还是需要自己完成。而使用这些组件则可以非常方便完成这些工作，效率更高。
关于Element-ui的介绍官方也有比较详细的资料官方网站
安装的方式也比较多，这里推荐npm安装，它能更好地和 webpack 打包工具配合使用。终端执行命令

npm i element-ui -S

安装完成以后，我们主要在vue项目中使用相应的组件，这里为了方便，采用引入整个 Element，在main.js中添加一下内容

import Vue from ‘vue’;
import ElementUI from ‘element-ui’;
import’element-ui/lib/theme-chalk/index.css’;
import App from ‘./App.vue’;
Vue.use(ElementUI);
new Vue({
el: ‘#app’,
render: h => h(App)
});

需要注意的是，样式文件需要单独引入。当然了，除了常用组件，Element-ui还提供了动画，主题等其他效果。这里介绍几个自己常用的组件

基本按钮使用：

<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

<el-row>
  <el-button plain>朴素按钮</el-button>
  <el-button type="primary" plain>主要按钮</el-button>
  <el-button type="success" plain>成功按钮</el-button>
  <el-button type="info" plain>信息按钮</el-button>
  <el-button type="warning" plain>警告按钮</el-button>
  <el-button type="danger" plain>危险按钮</el-button>
</el-row>

<el-row>
  <el-button round>圆角按钮</el-button>
  <el-button type="primary" round>主要按钮</el-button>
  <el-button type="success" round>成功按钮</el-button>
  <el-button type="info" round>信息按钮</el-button>
  <el-button type="warning" round>警告按钮</el-button>
  <el-button type="danger" round>危险按钮</el-button>
</el-row>

<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>

效果如下图（实际项目可以按需自行增加或者删除）：

基本输入框及密码框使用：

<el-input v-model="input" placeholder="请输入内容"></el-input>

<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>

<el-input placeholder="请输入密码" v-model="input" show-password></el-input>

<script>
  export default {
    data() {
      return {
        input: ''
      }
    }
  }
</script>

InputNumber 计数器基本使用：

<template>
  <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num: 1
      };
    },
    methods: {
      handleChange(value) {
        console.log(value);
      }
    }
  };
</script>

更多组件效果可以前往官网查询。