Mock.jsMock.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请求参数 // 执行函数 })AxiosAxios 概述Axios 是一个基于 Promise 的 HTTP 库可以发送 GET、POST、PUT、DELETE 等请求。Axios 文档http://www.axios-js.com/Axios 和 AjaxAxios 是通过 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.jsimport mock from ./mock根组件src/App.vuetemplate div idapp button clickgetUserList获取用户列表/button button clickaddUser新增用户/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示例效果ElementUIElementUI 概述ElementUI 是一套由饿了么团队为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。ElementUI 参考文档https://element.eleme.cn/#/zh-CNElementPlus 是一套基于 Vue 3面向设计师和开发者的组件库。ElementPlus 参考文档https://element-plus.org/zh-CN/#/zh-CNElementUI 提供了丰富的组件包含布局组件、图标组件、按钮组件、表单组件、表格组件、进度条组件、弹框组件等。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.vuetemplate !-- el-container所有布局容器全部放在外层布局容器中 el-main定义主体部分 -- el-container el-main router-view/ /el-main /el-container /template首页组件src/viewsIndex.vuetemplate !-- el-row定义行 gutter这一行里面每一列之间的间隙 el-col定义列 md在中等屏幕大小下占12个格子 -- el-row :gutter10 el-col :md12 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/minitype按钮类型可选 primary/success/warning/danger/info/textdisabled按钮是否禁用使用 v-bind 绑定 true/falseround按钮是否是圆角按钮使用 v-bind 绑定 true/falsecircle按钮是否是圆形按钮使用 v-bind 绑定 true/false示例ElementUI 按钮组件根组件src/App.vuetemplate div el-row el-button默认按钮/el-button el-button typeprimary主要按钮/el-button el-button typesuccess成功按钮/el-button el-button typeinfo信息按钮/el-button el-button typewarning警告按钮/el-button el-button typedanger危险按钮/el-button /el-row el-row el-button plain朴素按钮/el-button el-button typeprimary plain主要按钮/el-button el-button typesuccess plain成功按钮/el-button el-button typeinfo plain信息按钮/el-button el-button typewarning plain警告按钮/el-button el-button typedanger plain危险按钮/el-button /el-row el-row el-button round圆角按钮/el-button el-button typeprimary round主要按钮/el-button el-button typesuccess round成功按钮/el-button el-button typeinfo round信息按钮/el-button el-button typewarning round警告按钮/el-button el-button typedanger round危险按钮/el-button /el-row el-row el-button iconel-icon-search circle/el-button el-button typeprimary iconel-icon-edit circle/el-button el-button typesuccess iconel-icon-check circle/el-button el-button typeinfo iconel-icon-message circle/el-button el-button typewarning iconel-icon-star-off circle/el-button el-button typedanger iconel-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.vuetemplate !-- el-table定义表格 data绑定表格数据 border添加表格边框 el-table-column定义表格的每一列 prop绑定列数据 label列标题 width列宽 -- el-table :datatableData border stylewidth: 100% el-table-column propdate label日期 width180/el-table-column el-table-column propname label姓名 width180/el-table-column el-table-column propaddress 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/topsize表单内组件的大小可选 medium/small/mini在 ElementUI 组件库中提供了一些表单相关的组件使用 el-input 标签定义表单输入框。使用 el-select 和 el-option 标签定义下拉选择框。使用 el-radio 标签定义单选框。使用 el-checkbox 标签定义多选框。示例ElementUI 表单组件根组件src/App.vuetemplate el-form refform :modelform label-width80px el-form-item label活动名称 el-input v-modelform.name/el-input /el-form-item el-form-item label活动区域 el-select v-modelform.region placeholder请选择活动区域 el-option label区域一 valueshanghai/el-option el-option label区域二 valuebeijing/el-option /el-select /el-form-item el-form-item label活动时间 el-col :span11 el-date-picker typedate placeholder选择日期 v-modelform.date1 stylewidth: 100%;/el-date-picker /el-col el-col classline :span2-/el-col el-col :span11 el-time-picker placeholder选择时间 v-modelform.date2 stylewidth: 100%;/el-time-picker /el-col /el-form-item el-form-item label即时配送 el-switch v-modelform.delivery/el-switch /el-form-item el-form-item label活动性质 el-checkbox-group v-modelform.type el-checkbox label美食/餐厅线上活动 nametype/el-checkbox el-checkbox label地推活动 nametype/el-checkbox el-checkbox label线下主题活动 nametype/el-checkbox el-checkbox label单纯品牌曝光 nametype/el-checkbox /el-checkbox-group /el-form-item el-form-item label特殊资源 el-radio-group v-modelform.resource el-radio label线上品牌商赞助/el-radio el-radio label线下场地免费/el-radio /el-radio-group /el-form-item el-form-item label活动形式 el-input typetextarea v-modelform.desc/el-input /el-form-item el-form-item el-button typeprimary clickonSubmit立即创建/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 2Vant 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 vantlatest-v2 -S项目入口配置文件src/main.jsimport Vant from vant; import vant/lib/index.css; Vue.use(Vant);根组件src/App.vuetemplate div idapp van-button typeprimary主要按钮/van-button van-button typeinfo信息按钮/van-button van-button typedefault默认按钮/van-button van-button typewarning警告按钮/van-button van-button typedanger危险按钮/van-button /div /template示例效果