Vue 简单实例 地址选配10 - 确认地址 - 下一步
摘要:我们可以用弹框的形式来实现 1、给下一步按钮添加点击事件: <div class="next-btn-wrap"> <a class="btn btn--m btn--red" href="javascript:;" @click="nextConfirm">下一步</a> </div> <scri
阅读全文
posted @
2020-04-28 16:31
JoeYoung
阅读(288)
推荐(0) 编辑
Vue 简单实例 地址选配9 - 确认地址 - 删除地址
摘要:1、给删除图标添加点击事件: <!-- 删除地址 --> <a href="javascript:;" class="addr-del-btn" @click="delAddress(index)"> <svg class="icon icon-del"> <use xlink:href="#ico
阅读全文
posted @
2020-04-28 11:08
JoeYoung
阅读(249)
推荐(0) 编辑
Vue 简单实例 地址选配8 - 确认地址 - 设为默认地址
摘要:我们可以看到所有的地址都是点亮的状态,就是外面都有个橙色的框。我们需要把默认地址,才设置为点亮的状态。 1、新建变量 checkedIndex,默认为 0,然后把遍历地址列表,把字段 isDefault 为 true 的地址索引赋值给 checkedIndex data() { return { c
阅读全文
posted @
2020-04-27 16:22
JoeYoung
阅读(1016)
推荐(0) 编辑
Vue 简单实例 地址选配7 - 确认地址 - 查看更多
摘要:1、要求默认只展示3个地址,其他地址点击查看更多展开 通过使用过滤器,并定义变量 limit:3,然后循环渲染 addrFilter 数组 <li class="check" v-for="item in addrFilter" :key="item.addressId"> <script> exp
阅读全文
posted @
2020-04-27 11:03
JoeYoung
阅读(289)
推荐(0) 编辑
Vue 简单实例 地址选配6 - 确认地址 - 地址列表渲染
摘要:1、在 pages 目录下,新建 Address.vue 文件,并引入头、尾和Modal组件: <template> <div> <nav-header></nav-header> <div class="nav-breadcrumb-wrap"> <div class="container"> <
阅读全文
posted @
2020-04-26 16:37
JoeYoung
阅读(603)
推荐(0) 编辑
Vue 简单实例 购物车5 - 结算
摘要:1、结算按钮 当选中商品时,按钮颜色有灰变红,并显示选中的商品总数量: <div class="btn-wrap"> <a :class="['btn', 'btn--red', checkedCount != 0 ? '' : 'btn--dis']">结算({{ checkedCount }})
阅读全文
posted @
2020-04-26 14:06
JoeYoung
阅读(611)
推荐(0) 编辑
Vue 简单实例 购物车4 - 全选和反选功能
摘要:1、查看代码发现选中全选是由 check 样式控制的,所以我们要添加一个变量来控制是否全选: <span :class="['checkbox-btn', 'item-check-btn', allCheck ? 'check' : '']"> <script> export default { d
阅读全文
posted @
2020-04-24 16:34
JoeYoung
阅读(1930)
推荐(0) 编辑
Vue 简单实例 购物车3 - 删除商品
摘要:1、在 Modal.vue 里使用具名插槽,父子组件传值: <div class="md-content"> <div class="confirm-tips"> <!-- <p slot="message">你确认要删除此条数据吗?</p> --> <slot name="message"></s
阅读全文
posted @
2020-04-24 14:02
JoeYoung
阅读(2234)
推荐(0) 编辑
Vue 简单实例 购物车2 - 修改商品数量和价格
摘要:通过过滤器,修改商品数量,价格随之跟着变化。 1、先把 + - 添加点击事件: <a class="input-sub" @click="editCart('minus', item)">-</a> <a class="input-add" @click="editCart('add', item)
阅读全文
posted @
2020-04-23 16:37
JoeYoung
阅读(1138)
推荐(0) 编辑
Vue 简单实例 购物车1 - 购物车列表渲染
摘要:1、新创建一个项目:freemall 2、安装依赖:axios、vue-axios 3、配置路由 import Vue from 'vue' import VueRouter from 'vue-router' import Cart from '../pages/Cart.vue' import
阅读全文
posted @
2020-04-23 10:43
JoeYoung
阅读(1089)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例31 项目上线-使用pm2管理应用
摘要:项目上线 4、使用 pm2 管理应用 打开 app.js 文件,把上次的 https 的代码注释掉,还启用 http 的服务来演示。 打开一个命令行窗口,进入项目目录下,输入: node app.js 在浏览器输入:127.0.0.1 可以访问到该项目网站。 但是当我们把命令行窗口关闭后,项目网站就
阅读全文
posted @
2020-04-22 17:15
JoeYoung
阅读(477)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例30 项目上线-配置https服务
摘要:项目上线 3、配置 https 服务 为什么要启用 HTTPS 服务? 1)传统的 HTTP 协议传输的数据都是明文,不安全 2)采用 HTTPS 协议对传输的数据进行了加密处理,可以防止数据被中间人窃取,使用更安全 申请 SSL 证书 (企业用的都是收费的,个人可以用免费的https://free
阅读全文
posted @
2020-04-22 14:26
JoeYoung
阅读(591)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例29 项目上线-开启gzip配置
摘要:项目上线 2、开启 gzip 配置 使用 gzip 可以减小文件体积,使传输速度更快。 可以通过服务器端使用 express 做 gzip 压缩,其配置如下: // 安装相应包 npm install compression -S// 导入包 const compression = require(
阅读全文
posted @
2020-04-22 10:59
JoeYoung
阅读(399)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例28 项目上线-通过node创建web服务器
摘要:项目上线 1、项目上线相关配置 创建 node 项目,并安装 express,通过 express 快速创建 web 服务器,将 vue 打包生产的 dist 文件夹,托管为静态资源即可,关键代码如下: const express = require('express') // 创建 web 服务器
阅读全文
posted @
2020-04-21 15:47
JoeYoung
阅读(479)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例27 项目优化-实现路由懒加载
摘要:项目优化策略 8、路由懒加载 当打包构建项目时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。 具体需要三步: 1)安装 @babel/plugin-syntax-dynamic-impo
阅读全文
posted @
2020-04-21 11:28
JoeYoung
阅读(567)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例26 项目优化-首页内容定制
摘要:项目优化策略 7、首页内容定制 不同的打包环境下,首页内容可能会有所不同,我们可以通过插件的方式进行定时,插件配置如下: chainWebpack: config => { config.when(process.env.NODE_ENV 'production', config =>{ confi
阅读全文
posted @
2020-04-20 17:44
JoeYoung
阅读(970)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例25 项目优化-通过 CDN 优化 ElementUI 的打包
摘要:项目优化策略 6、通过 CDN 优化 ElementUI 的打包 在资源列表中 js/chunk-vendors.4da6d812.js 这个文件后面还是有个惊叹号,说明体积还是大。 而在依赖项中的,element-ui 的 大小是 659.3kB。 虽然在开发阶段,我们启用了 element-ui
阅读全文
posted @
2020-04-20 14:18
JoeYoung
阅读(905)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例24 项目优化- externals加载外部CDN
摘要:项目优化策略 5、通过 externals 加载外部 CND 资源 默认情况下,通过 import 语法导入的第三方依赖包,最终会被打包合并到同一个文件中,从而导致打包成功后,单文件体积过大的问题。 为了解决上述问题,可以通过 webpack 的 externals 节点,来配置并加载外部的 CDN
阅读全文
posted @
2020-04-17 16:59
JoeYoung
阅读(1188)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例00 创建项目及初始化
摘要:上次不小心删除了,这里补发下。 关于后台环境配置这里就不复述了,要开启 MySQL 数据库、包括后台接口服务的开启:vue_api_server 目录 1、打开终端窗口,输入: vue ui 打开可视化UI面板的 Vue 项目管理器。 2、点击创建,进入目录选择,选择你需要存放项目的路径,然后点击“
阅读全文
posted @
2020-04-16 16:37
JoeYoung
阅读(416)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例23 项目优化-通过chainWebpack自定义打包入口
摘要:项目优化策略 4、通过chainWebpack自定义打包入口 代码示例如下: module.exports = { chainWebpack: config => { config.when(process.env.NODE_ENV 'production', config =>{ config.e
阅读全文
posted @
2020-04-16 10:56
JoeYoung
阅读(562)
推荐(0) 编辑