摘要： 我们可以用弹框的形式来实现 1、给下一步按钮添加点击事件： <div class="next-btn-wrap"> <a class="btn btn--m btn--red" href="javascript:;" @click="nextConfirm">下一步</a> </div> <scri 阅读全文

摘要： 1、给删除图标添加点击事件： <!-- 删除地址 --> <a href="javascript:;" class="addr-del-btn" @click="delAddress(index)"> <svg class="icon icon-del"> <use xlink:href="#ico 阅读全文

摘要： 我们可以看到所有的地址都是点亮的状态，就是外面都有个橙色的框。我们需要把默认地址，才设置为点亮的状态。 1、新建变量 checkedIndex，默认为 0，然后把遍历地址列表，把字段 isDefault 为 true 的地址索引赋值给 checkedIndex data() { return { c 阅读全文

摘要： 1、要求默认只展示3个地址，其他地址点击查看更多展开 通过使用过滤器，并定义变量 limit：3，然后循环渲染 addrFilter 数组 <li class="check" v-for="item in addrFilter" :key="item.addressId"> <script> exp 阅读全文

摘要： 1、在 pages 目录下，新建 Address.vue 文件，并引入头、尾和Modal组件： <template> <div> <nav-header></nav-header> <div class="nav-breadcrumb-wrap"> <div class="container"> < 阅读全文

摘要： 1、结算按钮 当选中商品时，按钮颜色有灰变红，并显示选中的商品总数量： <div class="btn-wrap"> <a :class="['btn', 'btn--red', checkedCount != 0 ? '' : 'btn--dis']">结算({{ checkedCount }}) 阅读全文

摘要： 1、查看代码发现选中全选是由 check 样式控制的，所以我们要添加一个变量来控制是否全选： <span :class="['checkbox-btn', 'item-check-btn', allCheck ? 'check' : '']"> <script> export default { d 阅读全文

摘要： 1、在 Modal.vue 里使用具名插槽，父子组件传值： <div class="md-content"> <div class="confirm-tips"> <!-- <p slot="message">你确认要删除此条数据吗?</p> --> <slot name="message"></s 阅读全文

摘要： npm install 在安装 npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件一个是： --save || -S // 运行依赖（发布） 另一个是： –save-dev || -D //开发依赖（辅助） 区别是它们会把依赖包添加到package.json 文件 –s 阅读全文

摘要： 通过过滤器，修改商品数量，价格随之跟着变化。 1、先把 + - 添加点击事件： <a class="input-sub" @click="editCart('minus', item)">-</a> <a class="input-add" @click="editCart('add', item) 阅读全文

摘要： 1、新创建一个项目：freemall 2、安装依赖：axios、vue-axios 3、配置路由 import Vue from 'vue' import VueRouter from 'vue-router' import Cart from '../pages/Cart.vue' import 阅读全文

摘要： 项目上线 4、使用 pm2 管理应用 打开 app.js 文件，把上次的 https 的代码注释掉，还启用 http 的服务来演示。 打开一个命令行窗口，进入项目目录下，输入： node app.js 在浏览器输入：127.0.0.1 可以访问到该项目网站。 但是当我们把命令行窗口关闭后，项目网站就 阅读全文

摘要： 项目上线 3、配置 https 服务 为什么要启用 HTTPS 服务？ 1）传统的 HTTP 协议传输的数据都是明文，不安全 2）采用 HTTPS 协议对传输的数据进行了加密处理，可以防止数据被中间人窃取，使用更安全 申请 SSL 证书 (企业用的都是收费的，个人可以用免费的https://free 阅读全文

摘要： 项目上线 2、开启 gzip 配置 使用 gzip 可以减小文件体积，使传输速度更快。 可以通过服务器端使用 express 做 gzip 压缩，其配置如下： // 安装相应包 npm install compression -S// 导入包 const compression = require( 阅读全文

摘要： 项目上线 1、项目上线相关配置 创建 node 项目，并安装 express，通过 express 快速创建 web 服务器，将 vue 打包生产的 dist 文件夹，托管为静态资源即可，关键代码如下： const express = require('express') // 创建 web 服务器 阅读全文