Vue UI 组件库

移动端常用组件库

1.Cube UI
2.Mint UI
3.NutUI
4.VantUI
5.Bootstrap Vue
6.VUX

PC端常用UI组件库

1.Element
2.VIew UI
3.Ant
4.Material
5.bootstrap可视化工具
6.vue-element-admin
7.Variant Form低代码表单，可视化设计
8.Vuetify
9.Naive UI
10.vxe-table

个人强推

1.Tailwind CSS
2.svg插图

element-ui基本使用 示例

1.安装element-ui:npm i elelment-ui -S
2.src/main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'; // 引入ElementUI组件库
import 'element-ui/lib/theme-chalk/index.css'; // 引入ElementUI全部样式
Vue.config.productionTip = false
Vue.use(ElementUI) // 使用ElementUI
new Vue({
 el:"#app",
 render: h => h(App),
})

3.src/App.vue

<template>
 <div>
 <br>
 <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>
 </div>
</template>
<script>
 export default {
 name:'App',
 }
</script>

element-ui按需引入

1. 安装 babel-plugin-component npm i babel-plugin-component -D

2. 修改 babel-config-js

   module.exports = {
    presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
    ],
    plugins: [
    [
    "component",
    {
    "libraryName": "element-ui",
    "styleLibraryName": "theme-chalk"
    }
    ]
    ]
   }

   3.src/main.js:

   import Vue from 'vue'
   import App from './App.vue'
   import { Button,Row } from 'element-ui' // 按需引入
   Vue.config.productionTip = false
   Vue.component(Button.name, Button);
   Vue.component(Row.name, Row);
   /* 或写为
    * Vue.use(Button)
    * Vue.use(Row)
    */
   new Vue({
    el:"#app",
    render: h => h(App),
   })

Element 表单校验

校验必要性
在向后端发请求调用接口之前，我们需要对所要传递的参数进行验证，来把用户的错误扼杀在摇篮之中。

校验内容
● 内容不能为空（*）
● 密码长度必须多少位
● 手机号的格式要合规
● 邮箱的格式要合规
● ...

校验方式

● 不依赖于任何组件的验证
○ 在做提交之前，自己把数据分析处理一下。
● 基于具体组件的验证（不同的组件库，它的验证方式可能也各有不同


基本步骤

1. 定义验证规则。data()中按格式定义规则
2. 在模板上做属性配置来应用规则（三个配置）
   给表单设置 rules 属性传入验证规则
   给表单设置model属性传入表单数据
   给表单项（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名
   3.手动兜底验证
   
   

定义表单验证规则

格式

data() {
  return {
    rules: {
        // 字段名1：表示要验证的属性
        // 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。
        //     数组中的多条规则会按顺序进行
        字段名1: [
          { 验证规则1 },
          { 验证规则2 },
        ],
        字段名2: [
          { 验证规则1 },
          { 验证规则2 },
        ], 
        }
  }
}

示例

  { required: true, message: '请输入验证码', trigger: 'blur' },
  { pattern: /^\d{6}$/, message: '请输入合法的验证码', trigger: 'blur' },
  { min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' }

实操

data () {
    return {
      // 表单验证规则，整体是一个对象
      // 键：要验证的字段, 值：是一个数组，每一项就是一条规则
      
      rules: {
        // 字段名：mobile就表示要验证的 属性
        // 值: 是一个数组。数组中的每一项表示一条规则。
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ]
      }
    }
  },

注意

rules中的属性名与表单数据项中的属性名必须是一致的。

模板中的配置
内容:

1. 给 el-form 组件绑定 model 为表单数据对象
2. 给 el-form 组件绑定 rules 属性配置验证规则
3. 给需要验证的表单项 el-form-item 绑定 prop 属性，注意：prop 属性需要指定表单对象中的数据名称

<el-form label-width="80px" :model="form" :rules="rules">
  <el-form-item label="手机号" prop="mobile">
    <el-input v-model="form.mobile"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="code">
    <el-input v-model="form.code"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button @click="onCancel">取消</el-button>
  </el-form-item>
</el-form>

手动兜底验证

element-ui的表单组件.validate(valid => {
    if(valid) {
       // 通过了验证
    } else {
         // 验证失败
    }
})

element-样式重置

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

// 全局重置 element-ui 组件库的基础样式
.el-input__inner,
.el-button,
.el-link,
.el-menu-item,
.el-submenu__title,
.el-form-item__label {
  font-size: 12px;
}

// 重置菜单的基础样式
.el-menu.el-menu--horizontal {
  height: 60px;
  border-bottom: none;
}

// 重置卡片的基础样式
.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-size: 13px;
}