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 标签的基本属性：
| 名称 | 描述 |
|---|---|
| gutter | 这一行里面的列之间的间隙 |
el-col 标签的基本属性：
| 名称 | 描述 |
|---|---|
| span | 列合并 |
| xs/sm/md/lg/xl | 列的响应式布局 |
示例：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 标签的基本属性：
| 名称 | 描述 |
|---|---|
| size | 按钮尺寸，可选 medium/small/mini |
| type | 按钮类型，可选 primary/success/warning/danger/info/text |
| disabled | 按钮是否禁用，使用 v-bind 绑定 true/false |
| round | 按钮是否是圆角按钮，使用 v-bind 绑定 true/false |
| circle | 按钮是否是圆形按钮，使用 v-bind 绑定 true/false |
示例：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 标签的基本属性：
| 名称 | 描述 |
|---|---|
| data | 绑定表格显示的数据对象/列表/数组 |
| stripe | 表格是否添加斑马线效果（即隔行变色） |
| border | 表格是否添加边框 |
el-table-column 标签的基本属性：
| 属性 | 描述 |
|---|---|
| prop | 绑定列数据，对应表格数据中的某一个字段名 |
| label | 列标题 |
| width | 列宽度 |
| align | 列内容的对齐方式，可选 left/center/right |
示例：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 标签的基本属性：
| 名称 | 描述 |
|---|---|
| inline | 是否是水平表单 |
| label-position | 表单域标签的位置，可选 left/right/top |
| size | 表单内组件的大小，可选 medium/small/mini |
在 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>示例效果：
)
