Mock.js

Mock.js 概述

Mock.js 一种模拟后端接口的解决方案，用于生成随机数据，拦截 Ajax 请求。

• 前后端分离：前端工程师可以模拟接口数据，独立于后端进行开发。
• 增加单元测试的真实性：通过随机数据，模拟各种场景。
• 开发无侵入：不需要修改现有的代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
• 数据类型丰富：支持生成随机文本、日期、邮箱、图片、地址等数据。
• 方便扩展：支持扩展更多数据类型，支持自定义函数和正则表达式。

Mock.js 文档：http://mockjs.com/

Mock.js 安装

在 Vue CLI 项目中，使用 Mock.js，需要先安装 Mock.js 依赖。

示例：安装 Mock.js

终端执行：

# 安装Mock.js依赖
npm install mockjs --save-dev

在 GUI 中也可以安装 Mock.js 依赖：

Mock.js 初体验

Mock.js 依赖安装完成后，在 Vue CLI 中编写 Mock.js 的配置文件。

示例：Mock.js 初体验

Mock.js 配置文件（src/mock/index.js）：

// 加载Mock依赖
const Mock = require('mockjs')

// 创建模拟数据
// 参数1：数据模板对象
const data = Mock.mock({
    userList: [{
        id: 1,
        name: '张三'
    }, {
        id: 2,
        name: '李四'
    }, {
        id: 3,
        name: '王五'
    }]
})

console.log(data)

终端执行：

cd mock
node index.js

示例效果：

Mock.js 语法

Mock.js 语法规范分为：数据模板定义规范和数据占位符定义规范。

数据模板定义规范：

'属性名|生成规则': 属性值

数据占位符定义规范：

@占位符(...参数)

示例：生成 Mock 数据

Mock.js 配置文件（src/mock/index.js）：

// 加载Mock依赖
const Mock = require('mockjs')
// 创建模拟数据
const data = Mock.mock({
    // 生成一个userList数组，数组长度为4
    'userList|4': [{
        // 使用工具类或占位符生成随机数据
        id: Mock.Random.id(),
        name: '@cname()',
        birthday: '@date("yyyy-MM-dd")',
        age: '@integer(18, 60)'
    }]
})

console.log(data)

示例效果：

mock 方法

mock 的基本方法：

Mock.mock(数据模板)

Mock.mock(请求地址, [, 请求方式-小写], 数据模板)

Mock.mock(请求地址, [, 请求方式-小写], function(options){
    // options：请求对象
    // options.body：请求参数
    // 执行函数
})

Axios

Axios 概述

Axios 是一个基于 Promise 的 HTTP 库，可以发送 GET、POST、PUT、DELETE 等请求。

Axios 文档：http://www.axios-js.com/

Axios 和 Ajax：Axios 是通过 Promise 实现对 Ajax 技术的一种封装，就像 jQuery 对 Ajax 的封装一样，Axios 比 Ajax 更强大。

Axios 的主要特性：

• 支持所有的 API。
• 支持拦截请求和响应。
• 可以转换请求数据和响应数据，并可以将响应的内容自动转换为 JSON 类型的数据数据。
• 安全性高，客户端支持防御跨站请求伪造（CSRF）。

Axios 安装

在 Vue CLI 中，使用 Axios，需要先安装 Axios 依赖。

推荐使用 GUI 安装 vue-cli-plugin-axios 插件，该插件安装完成后，会生成 Axios 的配置文件，并在 main.js 文件中导入 Axios。

通过终端安装 Axios 依赖，需要自行添加 Axios 配置文件，并全局注册 Axios。

示例：安装 Axios

终端执行：

# 安装axios
npm install axios

在 GUI 中也可以安装 Axios 插件：

Axios 语法

Axios 发送 GET 请求的基本方法：

axios.get('请求路径')
    .then(ret => {
        // ret：包含请求和响应信息
        // ret.data：请求返回的数据结果
        // 请求成功执行函数
    }).catch(error => {
        // error：异常对象
        // 请求失败执行函数
    })

Axios 发送 POST 请求的基本方法：

axios.post('请求路径', 请求参数)
    .then(ret => {
        // ret：包含请求和响应信息
        // ret.data：请求返回的数据结果
        // 请求成功执行函数
    }).catch(error => {
        // error：异常对象
        // 请求失败执行函数
    })

Axios 发送 PUT 请求的基本方法：

axios.put(...)

Axios 发送 DELETE 请求的基本方法：

axios.delete(...)

Axios 初体验

后端接口不完善时，可以使用 Mock.js 模拟数据，然后使用 Axios 发送请求以实现测试效果。

示例：Axios 初体验

Mock.js 配置文件（src/mock/index.js）：

// 一般在做前后端数据交互时，后端会返回code + message + data的数据形式

// 加载Mock依赖
const Mock = require('mockjs')

// 获取用户列表
Mock.mock('/api/getUserList', 'get', {
    code: 200,
    message: '获取成功',
    'data|4': [{
        id: Mock.Random.id(),
        name: '@cname()',
        birthday: '@date("yyyy-MM-dd")',
        age: '@integer(18, 60)'
    }]
})

// 新增用户
Mock.mock('/api/addUser', 'post', function (options) {
    // 调试输出请求参数
    console.log(options.body)

    return {
        code: 200,
        message: '新增成功'
    }
})

项目入口配置文件（src/main.js）：

import mock from './mock'

根组件（src/App.vue）：

<template>
    <div id="app">
        <button @click="getUserList">获取用户列表</button>
          <button @click="addUser">新增用户</button>
      </div>
</template>

<script>
export default {
    name: 'app',
    methods: {
        getUserList() {
            axios.get('/api/getUserList')
                .then(ret => {
                    console.log(ret.data)
                })
        },
        addUser() {
            axios.post('/api/addUser', {
                name: '张三',
                age: 18
            })
                .then(ret => {
                    console.log(ret.data)
                })
        }
    }
}
</script>

示例效果：

ElementUI

ElementUI 概述

ElementUI 是一套由饿了么团队为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

ElementUI 参考文档：https://element.eleme.cn/#/zh-CN

ElementPlus 是一套基于 Vue 3，面向设计师和开发者的组件库。

ElementPlus 参考文档：https://element-plus.org/zh-CN/#/zh-CN

ElementUI 提供了丰富的组件，包含布局组件、图标组件、按钮组件、表单组件、表格组件、进度条组件、弹框组件等。

ElementUI 安装

在 Vue CLI 中，使用 ElementUI，需要先安装 ElementUI 依赖。

示例：安装 ElementUI

在 GUI 中安装 ElementUI 插件，快速搭建一个基于 ElementUI 的项目：

ElementUI 布局

使用 ElementUI 进行布局设计，建议按照布局容器-布局-其他组件的顺序进行编码。

在 ElementUI 中，布局容器标签有：

• el-container 标签：外层容器，其他容器全部放在外层容器中。
• el-header 标签：顶栏容器，用于放置如网站顶部菜单栏组件。
• el-aside 标签：侧边栏容器，用于放置如网站侧边菜单栏组件。
• el-main 标签：主要区域容器，用于放置如网站主体内容组件。
• el-footer 标签：底栏容器，用于放置网页底部声明组件。

通过这些布局容器组合使用，可以快速创建出一系列基础网页结构。

布局容器创建完成后，使用布局组件为网页创建布局。ElementUI 通过基础的 24 分栏，迅速简便地创建布局。

在 ElementUI 中，布局标签有：

• el-row 标签：定义行。
• el-col 标签：定义列。

el-row 标签的基本属性：

el-col 标签的基本属性：

示例：ElementUI 布局

根组件（src/App.vue）：

<template>
    <!--
        <el-container>：所有布局容器全部放在外层布局容器中
        <el-main>：定义主体部分
    -->
    <el-container>
        <el-main>
            <router-view/>
        </el-main>
    </el-container>
</template>

首页组件（src/viewsIndex.vue）：

<template>
    <!--
        <el-row>：定义行
        gutter：这一行里面每一列之间的间隙
        <el-col>：定义列
        md：在中等屏幕大小下占12个格子
    -->
    <el-row :gutter="10">
        <el-col :md="12">
            item
        </el-col>
    </el-row>
</template>

路由配置文件（src/router/index.js）：

{
    path: '/',
    component: () => import('@/views/Index.vue')
}

示例效果：

ElementUI 按钮组件

在 ElementUI 中，按钮组件使用 el-button 标签定义。

el-button 标签的基本属性：

示例：ElementUI 按钮组件

根组件（src/App.vue）：

<template>
    <div>
        <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>
    </div>
</template>

示例效果：

ElementUI 表格组件

ElementUI 组件库提供了 Table 表格组件，用于展示多条结构类似的数据，可以对数据进行排序、筛选、对比或其他自定义操作。

在 ElementUI 中，使用 el-table 标签定义表格，使用 el-table-column 标签定义表格中的列。

el-table 标签的基本属性：

el-table-column 标签的基本属性：

示例：ElementUI 表格组件

根组件（src/App.vue）：

<template>
    <!--
        <el-table>：定义表格
        data：绑定表格数据
        border：添加表格边框

        <el-table-column>：定义表格的每一列
        prop：绑定列数据
        label：列标题
        width：列宽
    -->
    <el-table :data="tableData" border 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 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        }
    }
}
</script>

示例效果：

ElementUI 表单组件

ElementUI 提供了 Form 表单组件，基础的表单包含输入框、单选框、下拉选择框、开关、滑块等组件，用以收集、校验、提交数据。

在 ElementUI 中，使用 el-form 标签定义表单。

el-form 标签的基本属性：

在 ElementUI 组件库中提供了一些表单相关的组件：

• 使用 el-input 标签定义表单输入框。
• 使用 el-select 和 el-option 标签定义下拉选择框。
• 使用 el-radio 标签定义单选框。
• 使用 el-checkbox 标签定义多选框。

示例：ElementUI 表单组件

根组件（src/App.vue）：

<template>
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
            <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
            <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
                <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
            </el-col>
        </el-form-item>
        <el-form-item label="即时配送">
            <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质">
            <el-checkbox-group v-model="form.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源">
            <el-radio-group v-model="form.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式">
            <el-input type="textarea" v-model="form.desc"></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>
</template>

<script>
export default {
    data() {
        return {
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            }
        }
    },
    methods: {
        onSubmit() {
            console.log('submit!');
        }
    }
}
</script>

示例效果：

Vant 2

Vant 2 概述

Vant 2 是一套由有赞团队提供的基于 Vue 2 的轻量级的、可靠的移动端组件库。

Vant 2 文档：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

Vant 2 提供了 65+ 个高质量组件，覆盖移动端主流场景。

Vant 2 初体验

在 Vue CLI 中，使用 Vant 2，需要先安装 Vant 2 依赖。

示例：Vant 2 初体验

在 GUI 中安装的 Vant 依赖版本 \>4，无法在 Vue 2 中使用。

终端执行：

# 安装Vant2
npm i vant@latest-v2 -S

项目入口配置文件（src/main.js）：

import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

根组件（src/App.vue）：

<template>
    <div id="app">
        <van-button type="primary">主要按钮</van-button>
          <van-button type="info">信息按钮</van-button>
          <van-button type="default">默认按钮</van-button>
          <van-button type="warning">警告按钮</van-button>
          <van-button type="danger">危险按钮</van-button>
      </div>
</template>

示例效果：