组件库和使用流程了解常见组件库及使用流程目标了解一些常见的Vue组件库前端项目分类移动端（h5页，小程序） P

了解常见组件库及使用流程

目标

了解一些常见的Vue组件库

前端项目分类

移动端（h5页，小程序）

PC端

常见的vue技术栈组件库

移动端（Vant, Cube-UI, NutUI ）
PC端（ element-ui, Ant Design of Vue, iView）
小程序: uniapp

组件库的基本使用流程

根据项目的实际情况，进行技术选型：用什么技术栈，用什么组件库
去对应的官方上查文档
遇到困难时：

1. 在官网上找 常见问题(一般在网页的最底部)
  下图是element官网上的截图

1. 在社区/搜索引擎找答案
2. 去提issue ，面对面直接向组件的作者提问
3. 改源码

小结

vue技术栈有很多的组件库（一般大厂才会维护组件库）
组件库要分移动端和PC端
学习组件库的基本方法是查文档，遇到困难时提 issue

创建项目并引入element组件库

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

官方地址：element.eleme.cn/#/zh-CN

ElementPlus(适配Vue3.0的版本)官方地址： element-plus.org/#/zh-CN

目标

用vue-cli脚手架工具创建项目，并在项目中引入elementUI组件库

思路

用vue create 命令创建项目；根据elementUI官网中的说明来安装和使用组件

用vue-cli创建vue项目

vue create

找一个合适的文件夹，打开cmd窗口，用vue create 创建项目

vue create element-demo
-------------------------------
? Please pick a preset:
> Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

注意：

vue create 命令会自动创建文件夹，这样就不需要我们手动创建了
选择Vue2 版本的默认配置
如果vue create 命令不能正常运行，要先安装脚手架工具，对应的命令是： npm i -g @vue/cli

cd 项目名再启动

上一步的命令做了两件事：创建文件夹，把示例项目的代码下载到这个文件夹中，为了运行项目，我们还需要进入项目目录下，并运行命令。对应的命令是：

cd element-demo # 进入项目目录
npm run serve # 运行命令

查看效果

http://localhost:8888

把ElementUI添加到项目中

参考官网文档，按全局引入的方式，一共分成两步：

安装 elementUI
在项目的main.js中引入使用

在项目中安装elementUI

npm i element-ui -S

-S: 是--save的简写，表示这个包是生产依赖，表示项目上线也要使用这个包。

-S: 是可以省略不写的。

如果要安装开发依赖，则要加 -D。

main.js中引入并注册

官网参考

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

上面的写法是固定模式，可随时去官网查看。

使用elementUI组件

使用组件的基本思路是：在官网上进行 cv操作。这里找一个最简单的button组件进行尝试使用。

在app.vue中

<template>
  <div id="app">
    <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>
  </div>
</template>

注意:

组件名前面有el这个关键字
type属性决定了按钮的样式风格

效果预览

如果打开浏览器预览，没有效果，那么一切ok~

小结

elementui是做PC项目的首选
组件库一般都会有配套使用教程，基本套路是：

1. npm i 安装
2. 在main.js中导入，并使用

我们即将要开的人资项目是基于elementUI重度使用的一套架构，我们把后台管理系统一类的项目中高频使用的组件依次学习一下，方便大家更容易的接受业务的顺利进行

table组件-基础使用

用表格来显示数据，是一PC后台管理系统中一个非常常见的需求。

目标

能通过分析官网中的代码，把表格数据（文本数据）展示出来

思路

从官网上cv代码到项目中；

学习相关属性的使用；

基础demo

复制官方demo中的第一个基础demo，先把我们的组件跑起来运行

<template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }]
    }
  }
}
</script>

效果如下

学习组件的使用

数据源由table组件的data属性来指定（不需要我们自己用v-for指令来循环）

行(data)，决定表格的数据。它是数组，数组中的每一个元素是一个对象，表示一行。
列，决定表格结构。列由el-table-column决定，下面有三个属性需要掌握

- label：决定当前列显示出的标题
- prop：决定当前列数据的来源。对于表格来说，它的数据是一个数组，每一个元素是一个对象，这里的prop值就是这个对象中的属性名

prop="date"。这里的prop就是用来从每一个对象中取出属性名为date的属性值。

- width: 用来设置列的宽度。如果不设置，它会自适应。

小结

在el-table使用data属性

在el-table-item上使用prop属性

table组件-自定义列-插槽

场景

有时候我们的表格单元格中，不光想要渲染文本，可能会渲染一些自定义的内容: 图片，操作按钮

目标

掌握自定义列的用法，能在表格单元格中显示自定义的内容。

需求描述：我们想在最后一列渲染出一个删除按钮

思路

官网：自定义列模板

代码

我们需要在对应的列中，使用template标签包裹我们自定义渲染的内容，其实用的就是插槽的机制

// 省略其它....
<el-table-column label="操作" width="100">
    <template>
      <el-button size="small" type="danger">删除</el-button>
    </template>
</el-table-column>

小结

要自定义内容：

删除prop属性
用插槽

table组件-自定义列-作用域插槽

需求说明

后端返回的数据中，只有一个指代性别的编码，为了方便用户查看，需要我们把1转换成男，0转换成女。

数据如下：

tableData: [{
       date: '2016-05-02',
       name: '王小虎',
       address: '上海市普陀区金沙江路 1518 弄',
  		 gender: 0
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        gender: 1
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        gender: 1
      }]

解决思路

用作用域插槽拿到数据（官网），再使用函数做转换输出即可

<el-table-column label="性别">
  <!-- 
	1. slot-scope是固定写法
  2. scope理解为变量，并不一定需要固定这个名字，el-table-column组件会自动将渲染本行需要的数据
  传给scope，其中scope.row就表示当前行的数据，它对应数据源中的某个对象。这里的row是固定写法
  3. {{ 方法() }} 的作用是执行这个方法，将返回值显示在当前单元格中
  -->
    <template slot-scope="scope">
      {{ transGender(scope.row.gender) }}
    </template>
</el-table-column>

<script>
  export default {
      methods: {
        transGender(genderCode) {
          console.log(genderCode)
          const genderList = {
            1: '男',
            0: '女'
          }
          return genderList[genderCode]
        }
      }
  }
</script>

通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据

场景：直接使用prop只能渲染文本，通过prop不能直接渲染的时，我们需要自定义内容渲染
机制：作用域插槽

如何拿当前行的完整对象数据？ scope.row

table组件-自定义列-显示图片（练习）

目标

把图片显示在表格中

数据

tableData: [{
   companyName: '小米',
   companyLogo: 'http://s02.mifile.cn/assets/static/image/logo-mi2.png'
 }, 
 {
    companyName: '京东',
    companyLogo: 'https://misc.360buyimg.com/lib/img/e/logo-201305-b.png'
  }, 
  {
    companyName: '百度',
    companyLogo: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
  }
]

代码

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column
        label="公司名"
        prop="companyName">
      </el-table-column>

      <el-table-column
        label="公司logo"
        prop="companyLogo">
      </el-table-column>

      <el-table-column
        label="公司logo"
        >
        <!-- 
          slot-scope: 是老语法，
          v-slot ：是新语法。效果一样
        -->
      <template slot-scope="scope">
        <!-- {{scope.row.companyLogo}} -->
        <img :src="scope.row.companyLogo"/>
      </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        companyName: '小米',
        companyLogo: "http://s02.mifile.cn/assets/static/image/logo-mi2.png"
      }, 
      {
          companyName: '京东',
          companyLogo:"https://misc.360buyimg.com/lib/img/e/logo-201305-b.png"
        }, 
        {
          companyName: '百度',
          companyLogo:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
        }
      ]
    }
  }
}
</script>

pagination-翻页组件

分页组件的官网地址：element.eleme.cn/#/zh-CN/com…

目标

掌握翻页组件的使用

基础使用

<el-pagination 
  layout="prev, pager, next" 
  :total="1000">
</el-pagination>

说明：

layout中的关键字有自己的含义；
total用来设置数据的总条数

每页条数

page-size:默认每页10条数据

翻页事件

当用户点击页面进行翻页时就会触发current-change 事件

<template>
  <div>
    <h1>Pagination</h1>
    <el-pagination
      layout="prev, pager, next"
      :total="1000"
      @current-change="pageChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  methods: {
    // 把当前点击的页数给传进来
    pageChange(page) {
      console.log(page)
    }
  }
}
</script>

注意：

事件名不是驼峰命名法，而是采用kebab-case(昵称：烤串命名法)
它会自动接收页码

小结

翻页按钮的结构：layout 按照我们传入的结构顺序依次渲染
分页逻辑：总页数 = 总条数（:total） / 每页的条数(:page-size)
事件： @current-change
翻页组件一般和表格一起使用，但是，它并不决定表格的数据来源。

Form表单组件-基本使用

目标

掌握表单组件的基本使用

思路

用户登录表单-数据双向绑定

<template>
  <div class="form-container">
    <el-form label-width="80px">
      <el-form-item label="手机号">
        <el-input v-model="form.mobile"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.code"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        mobile: '',
        code: ''
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>

<style scoped>
  .form-container{
    width: 600px;
  }
</style>

小结

表单中的数据项一般会用一个对象包起来
属性名一般和后端接口中保持一致
在元素上采用v-model双向绑定

Form表单校验-基本介绍

目标

了解表单校验的必要性和实现方式

校验必要性

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

不能相信用户的任何输入！不能相信用户的任何输入！不能相信用户的任何输入！

校验内容

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

校验方式

不依赖于任何组件的验证

- 在做提交之前，自己把数据分析处理一下。

基于具体组件的验证（不同的组件库，它的验证方式可能也各有不同）
表单内容一定要验证（不能相信用户的任何输入！）；
如果使用是组件库中的表单，最好是采用它们自带的验证方式

Form表单组件-表单验证

场景

在上面的表单中，要求：用户名必填

掌握element-ui中表单校验的使用

基本步骤-共三步

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

步骤1-定义表单验证规则

在 data 中,补充定义规则。格式：

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中的属性名与表单数据项中的属性名必须是一致的。

步骤2-模板中的配置

内容：

给 el-form 组件绑定 model 为表单数据对象
给 el-form 组件绑定 rules 属性配置验证规则
给需要验证的表单项 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>

验收效果

我们做到这一步时，当用户输入的内容不符合表单规则要求时，并且某个输入框失焦时，它会给出相应的提示，当我们输入的内容符合要求时，错误提示会自动消失。

步骤3-手动兜底验证

格式

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

说明：

validate 方法是表单组件自带的，用来对表单内容进行检验。
需要在模板中添加对表单组件的引用：ref 的作用主要用来获取表单组件手动触发验证代码-模板

<el-form label-width="80px" 
+  ref="form"
   :model="form"
   :rules="rules">

添加ref来引用el-form组件。

代码

在做提交时进行手动兜底验证，如果通过了验证

doLogin () {
  alert('我可以做登录了')
},
submit () {
  this.$refs.form.validate(valid => {
    // valid 就是表单验证的结果，如果是true，表示通过了
    // console.log(valid)
    if (valid) {
      // 通过了验证，你可以做后续动作了
      this.doLogin()
    }
  })
}

定义验证规则(按element-ui的要求来)
配置模板，应用规则
给表单设置 rules 属性传入验证规
给表单设置model属性传入表单数据
给表单中的元素（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名
手动兜底验证

目标

手机号/用户名不能为空，且必须为11位手机号 (/^1[0-9]{10}$/)
密码为必填且长度6到8位字符

代码

定义规则

rules:{
          name: [
            // trigger: 什么时候触发验证 
            { required: true, message: '请输入手机号', trigger: 'blur' },
            // pattern : 正则
            { pattern: /^1[345678]\d{9}$/, message: '请输入合法的手机号', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' }
          ]
        }

模板中配置应用规则

<el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="手机号" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password"></el-input>
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>

注意

下面三个地方的属性名必须一致

Form表单组件-表单验证-自定义检验规则

场景：密码不允许是123456

目标

掌握自定义检验规则的使用格式

思路

在rules中自定义validator

格式

rules:{
    属性名1: [
      
      { 
        // 注意参数顺序
        validator: function (rule, value, callback) {
      		// rule：采用的规则
          // value: 被校验的值
          // callback是回调函数， 
          //      如果通过了规则检验，就直接调用callback()
          //      如果没有通过规则检验，就调用callback(错误对象，在错误对象中说明原因)
        	//         例如：callback(new Error('错误说明'))
      	}, 
        trigger: 'blur' 
     }
    ]
}

落地代码

rules: {
  name: [{required: true, message:'必须要填入', triggle: 'blur'}],
  code: [
      {
        validator:(rule, value, callback)=>{
          console.log(rule, value, callback)
          if(value === '123456') {
            callback(new Error('这是世界上最差的密码了'))
          } else {
            callback()
          }
      	},
        triggle: 'blur'
      },
      {min: 6, max:8, message:'长度为6-8位', triggle: 'blur'},
      {required: true, message:'必须要填入', triggle: 'blur'},
  ]
}

小结

自定义规则可以让校验逻辑更加灵活，它的格式是固定的
callback必须调用

Form表单组件-重置表单清理校验痕迹

背景

校验失败会有红色的提示文字，有时候我们需要在执行了某个操作之后把当前校校验失败留下的痕迹清理一下，为下一次校验做准备。

格式

this.$refs.form组件的引用.resetFields()