Vuex 的项目实例1 项目初始化
摘要:1、通过 vue ui 命令打开可视化面板,创建新项目:vuex-demo 2、安装 vuex 依赖包 npm install vuex axios ant-design-vue -S 当然也可以使用可视化面板的依赖安装。 ant-design-vue 是UI组件库。 3、实现 Todos 基本布局
阅读全文
posted @
2020-04-30 16:08
JoeYoung
阅读(440)
推荐(0) 编辑
VueX 的安装及简单使用
摘要:1、安装vuex依赖包 npm install vuex --save 2、导入vuex包 import Vuex from 'vuex' Vue.use(Vuex) 3、创建 store 对象 export default new Vuex.Store({ // state 中存放的就是全局共享的
阅读全文
posted @
2020-04-29 17:20
JoeYoung
阅读(11120)
推荐(2) 编辑
ES6 数组遍历方法的实战用法总结
摘要:ES6原生语法中提供了非常多好用的数组'遍历'方法给我们(forEach,every,some,map,filter,reduce,reduceRight,indexOf,lastIndexOf),让我们可以实现更多更强大的功能,下面让我们通过这篇文章好好学习下,该如何使用它们。 forEach 对
阅读全文
posted @
2020-04-29 14:02
JoeYoung
阅读(1638)
推荐(0) 编辑
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
阅读(1015)
推荐(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
阅读(288)
推荐(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) 编辑
npm --save-dev 与 --save 的区别
摘要:npm install 在安装 npm 包时,有两种命令参数可以把它们的信息写入 package.json 文件一个是: --save || -S // 运行依赖(发布) 另一个是: –save-dev || -D //开发依赖(辅助) 区别是它们会把依赖包添加到package.json 文件 –s
阅读全文
posted @
2020-04-23 17:06
JoeYoung
阅读(252)
推荐(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) 编辑
Vue + ElementUI的电商管理系统实例22 项目优化-为开发模式与发布模式指定不同的打包入口
摘要:项目优化策略 3、为开发模式与发布模式指定不同的打包入口 默认情况下,Vue项目的开发模式与发布模式,共用同一个打包的入口文件(即src/main.js)。为了将项目的开发过程与发布过程分离,我们可以为两种模式,各自指定打包的入口文件,即: 1)开发模式的入口文件为src/main-dev.js 2
阅读全文
posted @
2020-04-15 11:20
JoeYoung
阅读(706)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例21 项目优化-修改webpack默认设置
摘要:项目优化策略 2、通过 vue.config.js 修改 webpack 的默认配置 通过vue-cli3.0工具生成的项目,是默认隐藏了所有webpack的配置项,目的是为了屏蔽项目的配置过程,让程序员把工作的重心,放到具体功能和业务逻辑的实现上。 如果程序员有修改 webpack 默认配置的需求
阅读全文
posted @
2020-04-14 16:52
JoeYoung
阅读(265)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例20 项目优化-生成打包报告
摘要:项目优化策略 1、生成打包报告 打包时,为了直观的发现项目中存在的问题,可以在打包时生成报告。生成报告的方式有两种: 1) 通过命令行参数的形式生成报告 // 通过 vue-cli 的命令选项可以生成打包报告 // --report 选项可以生成 report.html 以帮助分析报告内容 vue-
阅读全文
posted @
2020-04-14 10:43
JoeYoung
阅读(656)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例19 执行build命令期间移除所有的console
摘要:打开可视化工具,选择build,然后点击运行。 然后会发现有错误或者是警告,同样打开输出面板查看原因。 这个表示在产品发布阶段,不允许在代码中出现console.* 方法。 babel-plugin-transform-remove-console 插件:可以移除所有 console.* 方法。 打
阅读全文
posted @
2020-04-13 17:03
JoeYoung
阅读(501)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例18 解决serve命令中的ESLint语法错误
摘要:打开可视化工具,发现仪表盘中有3个警告。点击旁边的输出,可以查看具体的警告内容。 发现基本都是 ESLint 给检查出来的语法错误。 还有一个错误就是:作用域插槽的“scope”属性已被弃用并替换为“slot-scope”。 当 ESLint 和 代码格式化 之间有冲突的时候,打开项目根目录下的 .
阅读全文
posted @
2020-04-13 15:08
JoeYoung
阅读(495)
推荐(0) 编辑
nth-child(n)后代选择器IE8不兼容问题
摘要:使用jQuery解决方案: if (navigator.appName 'Microsoft Internet Explorer') { //判断是否是IE浏览器 if(navigator.userAgent.match(/Trident/i)&&navigator.userAgent.match(
阅读全文
posted @
2020-04-11 01:06
JoeYoung
阅读(422)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例17 顶部进度条效果
摘要:通过 nprogress 第三方的包 打开可视化工具里的依赖,点击安装依赖-运行依赖,搜索 nprogress ,进行安装。 然后导入对应的包,打开main.js文件,我们可以看到,通过 axios 发起了ajax请求,只要发起了请求,就会触发 request 拦截器。当请求响应完毕就会调用 res
阅读全文
posted @
2020-04-10 14:31
JoeYoung
阅读(1329)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例16 数据报表
摘要:1、创建数据报表分支report并push到远程 创建分支: git checkout -b report 推送到远程:(以前码云中没有该分支,所以要加-u,如果码云中有该分支,则不需要加-u) git push -u origin report 2、通过路由加载数据报表组件 新建report文件夹
阅读全文
posted @
2020-04-09 16:40
JoeYoung
阅读(5198)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例15 订单列表
摘要:1、创建order分支 创建分支: git checkout -b order 推送到远程: git push -u origin order 2、通过路由渲染订单列表页面 新建order文件夹,Order.vue文件: <template> <div> <h3>订单列表</h3> </div> <
阅读全文
posted @
2020-04-08 14:39
JoeYoung
阅读(7052)
推荐(2) 编辑
Vue + ElementUI的电商管理系统实例14 商品列表-添加商品
摘要:1、通过编程式导航跳转到商品添加页面 给添加商品按钮添加点击事件: <el-button type="primary" @click="goAddpage">添加商品</el-button> goAddpage事件函数: // 跳转到添加商品页面 goAddpage() { // 路由导航对象.pu
阅读全文
posted @
2020-04-07 14:22
JoeYoung
阅读(4414)
推荐(2) 编辑
网页黑白样式
摘要:网页黑白样式: html{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscal
阅读全文
posted @
2020-04-04 21:41
JoeYoung
阅读(241)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例13 商品列表
摘要:1、创建goods_list分支并推送到远程 创建分支goods_list,并切换到当前: git checkout -b goods_list 推送到远程:(以前码云中没有该分支,所以要加-u,如果码云中有该分支,则不需要加-u) git push -u origin goods_list 2、通
阅读全文
posted @
2020-04-03 15:41
JoeYoung
阅读(4625)
推荐(0) 编辑
Vue + ElementUI的电商管理系统实例12 分类参数
摘要:1、创建商品分类分支goods_params并push到远程 创建分支goods_params,并切换到当前: git checkout -b goods_params 推送到远程:(以前码云中没有该分支,所以要加-u,如果码云中有该分支,则不需要加-u) git push -u origin go
阅读全文
posted @
2020-04-02 14:40
JoeYoung
阅读(1398)
推荐(0) 编辑
Vue2.5 旅游项目实例28 联调测试上线-异步组件实现按需加载
摘要:打包生成的 dist 文件夹包含了:static 文件夹和 index.html 文件。 index.html就是前段代码的入口文件。 static 目录下: 1.首先有一个 css 文件夹,里面包含了一个XXX.css.map 文件,它是帮助我们调试被压缩过的 css 代码,一般在开发做调试的时候
阅读全文
posted @
2020-04-01 16:55
JoeYoung
阅读(384)
推荐(0) 编辑
Vue2.5 旅游项目实例27 联调测试上线-项目打包上线
摘要:打开命令行,进入项目的目录,输入: npm run build 这时候Vue的脚手架工具会自动对src下的源代码,进行打包编译,生成一个能被浏览器运行的代码,同时也是压缩过后的代码。 完成后,控制台会显示: Build complete. 现在打开项目目录,会发现多出一个 dist 文件夹,这个文件
阅读全文
posted @
2020-04-01 10:35
JoeYoung
阅读(223)
推荐(0) 编辑