大家好，图标在UI设计中占了一席之地，不同风格的图标会影响页面整体风格效果。前面2篇文章分别介绍了《线性图标》、《面性图标》，今天我跟大家分享一下线面结合图标的一些设计样式。

于Element UI

Element UI是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开 发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计 资源，帮助网站快速成型。

Element UI的官方网址是：https://element.eleme.cn/

Element UI预定义了几乎所有标签的常规设计样式，在绝大 部分情况下，你不需要考虑例如按钮的宽度、高度、背景颜色、文本大小、 文本颜色等样式规则，只需要直接使用即可，例如Element UI提供的按 钮：

当然，除了按钮以外，对于表格、表单、表单中各控件、弹出框等常见的 页面元素，Element UI都设计了非常简约美观的样式，例如：

Element UI之所以被称之为“组件库”，是因为它不再使用传统的HTML 标签，而是自行定制了一系列的标签（包括 标签属性），以按钮为例， 其源代码大概是这样的：

<el-button type="primary">主要按钮</el-button>

除了样式以外，Element UI还提 供了便利的表单控件的验证方式， 执行效果例如：

由于Element UI定义了大量的组件，每个组件都有许多属性，所以，学 习Element UI时需要记忆大量的组件特征，这将是一个非常漫长的过程， 通常不建议刻意的死记硬背，应该重点关注Element UI可以做到什么， 例如有哪些样式，各组件的核心属性等用法，然后结合官方文档 （https://element.eleme.cn/#/zh-CN/component/）进行开发。

安装Element UI

• 首先进入工程文件夹（如果使用IntelliJ IDEA打开了此工程，直接点击 IntelliJ IDEA下面的Terminal即可）：

//我的项目是放在这个位置，你们根据自己项目进入工程即可
cd d:/Vue-Workspace/vue-project-02

• 然后使用npm命令安装Element UI，以下2条命令是等效的（注意：以下 命令区分大小写，例如最后的-S的字母是大写的）

//推荐第一种安装命令
npm i element-ui -S
//或者下面这种写法
npm install --save element-ui

• 安装完成后，在工程的main.js中导入并使用Element UI：

// main.js  文件配置中加入下面三行
import ElementUI from 'element-ui'; 
import 'element-ui/lib/theme-chalk/index.css'; 
Vue.use(ElementUI);

在页面中显示Element UI组件

1)：通过此前的学习，你应该知道有些文件在此工程中是可以不必保留的，应该将这些文件删除，例如：

• – 删除router/index.js中不必要的配置，

– 删除import HomeView from '../views/HomeView.vue'

– 删除routes常量中各对象（值为空数组即可）

• – 删除src/components/HelloWorld.vue
• – 删除src/views/HomeView.vue
• – 删除src/views/AboutView.vue

2)：如果你认为这些页面元素占据了100%宽度，并且默认是靠左对齐的 （当占据100%宽度时你可能看不出来），这样的显示效果不够美观，你可 以自行做一些调整：

//使用你已经掌握的CSS样式进行调整，例如：
<div style="width: 500px; margin: 0 auto;"> <!-- 页面元素 --> </div>
  //学习更多的Element UI的做法，例如：
  <div style="width: 500px; margin: 0 auto;"> 
    <!-- 页面元素 --> 
    </div> 
<el-row type="flex" justify="center"> 
  <el-col :span="12"> 
    <!-- 页面元素 --> 
    </el-col> 
</el-row>

设计登录视图Demo

修改APP.vue页面，代码如下：

<template>
  <div id="app">
    <el-row type="flex" justify="center">
      <el-col :span="8">
        <h3>用户登录</h3>
<el-divider></el-divider>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="ruleForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
  <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>

<script>
      export default {
data() {
  var checkUsername=(rule, value, callback)=> {
    if (!value) {
      return callback(new Error('用户名不能为空'));
    }
    callback();
  };
  var validatePass=(rule, value, callback)=> {
    if (value==='') {
      callback(new Error('请输入密码'));
    }
    callback();
  };
  return {
    ruleForm: {
      pass: '',
      username: ''
    },
    rules: {
      pass: [
        { validator: validatePass, trigger: 'blur' }
      ],
      username: [
        { validator: checkUsername, trigger: 'blur' }
      ]
    }
  };
},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid)=> {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  }
}
  </script>

学习记录，如有侵权请联系删除