Bruce小鬼

在开发项目中，有些场景是当用户点击某个按钮后改变某个属性的值，这个值改变时需要触发事件做一些事情。属性值什么时候改变是没法提前判断的，因此需要有个监听的角色，当监听到值改变后触发事件。

上面我们引入el-upload组件时，使用http-request属性覆盖了默认的上传行为，使用自定义的上传行为，下面就来封装自定义的上传方法。在vue页面的data() {return {// 上传的多个文件 files : [ ] , } } , methods : {// 将选择的批量文件添加到files数组中 uploadFile(raw) {

这篇文章介绍下vue开发下载文件功能。

在前端开发过程中，遇到下面的场景选择setInterval方法可以解决。

使用vue开发的页面都是通过px设置它的尺寸，如果换了一个不同尺寸的屏幕就会出现页面排版错乱，显示不完整等情况。下面通过插件将px装换为rem单位适应不同尺寸的屏幕。

Provide/Inject非常简单，就像vue页面中使用的data对象一样，但是他与data也是有区别的。下面来介绍下他怎么使用，以及使用时遇到的问题。// 在provide定义一个name数据 provide() {return {return {info : "1号" , } } ,console . log("子组件获取祖先组件数据" , this . name) } } } < / script >

当我们在开发前端项目时，肯定会有断点调试的需求。但是前端开发工具似乎没有开发后端项目调试那么方便，因此我们可以借助浏览器实现调试前端项目，它的优势就是不用配置任何插件即可实现。不受开发工具的限制。

npm常用命令总结1.概述这篇文章介绍开发前端项目时npm常用命令2.npm常用命令2.1.列出npm所有命令用法# 1.通过npm -l 命令可以列出npm所有命令用法，当忘记用法时只需要记住这一个命令就可以查到所有的命令，非常有用。npm -l 2.2.查看npm安装的依赖包#当前项目安装的所有模块$npm list#列出全局安装的模块 带上[--depth 0] 不深入到包的支点 更简洁$ npm list -g --depth 02.3.安装依赖包# 自动读取当前路径

yarn 常用命令总结1.概述这篇文章总结下开发前端项目使用yarn工具常用命令目录yarn 常用命令总结1.概述2.yarn常用命令2.1.yarn安装依赖包2.2.yarn删除依赖包2.3.yarn更新包版本2.4.yarn查询已安装的包2.5.查看yarn全局安装路径2.6.设置yarn下载镜像源2.yarn常用命令2.1.yarn安装依赖包# 1.安装依赖包yarn add 包名# 2.安装依赖包并指定版本号yarn add 包名@版本号# 3.全局安装依赖包yarn gl

一篇总览前端和后端工具对应关系2.概述有时候过一段时间不接触前端开发，就会忘记一些东西。在学习时候没有一个全局总览的概念，只能每块知识点全部复习一遍才能在大脑形成全局概念，就像是盲人摸象。如果在开始复习时有了这个全局总览，复习起来就会有方向，效率也会提升，为此写下这篇文章。3.前后端开发工具对应关系介绍3.1.后端开发三件法宝后端开发项目我们离不开JDK、maven、SpringBoot，那么前端开发项目和后端开发项目思想是一样的，它也有与之对应的工具。1.JDK对应前端工具NodeJs后端开

P19-Vue-supermall项目-商品详情多个数据对象合并为一个数据对象1.概述在商品详情页中展示的数据比较多，请求服务器返回的data中嵌套了多层数据结构，每层数据都是一个对象包含子对象数据。这样在data数据对象中拿到我们想要的几个字段的数据，代码就显得比较复杂。因此我们将data数据做一层封装，我们从data中的多个数据对象中取出需要的几个数据封装到一个对象中。然后从封装的数据对象中取到数据放到页面中展示。2.封装多个数据对象到一个数据对象思路2.1.多个数据对象展示数据封

P19-Vue-supermall项目-详情页导航封装1.概述在首页点击商品跳转到详情页后，在详情页我们先来封装一个导航栏。这个导航栏的封装我们使用前面封装好的公共NavBar组件。2.封装详情页导航栏2.1.详情页导航栏效果图2.2.详情页导航栏封装结构在detail文件夹下新建一个childComps文件夹存放详情页的子组件。例如详情页的导航栏就在这里封装，然后在Detail.vue组件中使用封装好的导航栏2.3.详情页导航栏封装思想在DetailNavBar.vue组件中

P17-Vue-supermall项目-首页携带iid跳转到详情页1.概述浏览页面展示商品列表时候，我们点击列表中某个商品，希望打开这个商品的详情页。这个时候我们怎么知道用户要查看哪个商品的详情页那？答案只有一个就是在用户点击商品列表中某个商品时，在跳转前获取该商品的id，跳转后并将这个id传递给详情页组件，在组件中就可以展示用户点击的商品详情页啦。2.详情页配置路由通过路由实现商品列表页跳转到详情页组件2.1.新建详情页模块详情页模块结构Detail.vue组件内容

P17-Vue-supermall项目-离开页面时记住状态和位置1.概述当我们浏览一个页面到任意位置时，点击其他的模块。再次返回上个模块的页面时，希望展示上次阅览的位置，不是从头阅览。这个需求就是记住离开页面时的浏览位置。2.记住离开页面位置实现原理我们使用category.vue分类组件实现这个案例。2.1.开启缓存路由在App.vue组件中使用keep-alive开启路由缓存，保证离开分类页面组件时不会销毁该组件。2.2.让Category保持离开位置原理实现思路：

P15-Vue-supermall项目-点击按钮回到页面顶端BackTop1.概述在这篇文章中就来实现这个功能：当我们滑动页面到下面的时候，通过点击一个图标使页面回到顶端。实现这个功能需要结合上篇文章封装的P15-Vue-supermall项目-BetterScroll滚动插件封装 实现滚动页面到顶端2.封装BackTop页面滚动顶端点击图标页面滚动到顶部，这个功能在其他的页面中也会使用。因此对他做一层封装，并且将它封装到公共层。2.1.封装BackTop结构2.2.封装Bac

P14-Vue-supermall项目-BetterScroll滚动插件封装1.概述这篇文章我们将对BetterScroll进行一次封装BetterScroll在公共层做封装，业务模块使用滚动组件都只需要面向封装的组件开发。不是直接使用BetterScroll开发。封装的好处是当这个插件以后不再维护了，需要更换其他的插件，在项目中只需要调整我们封装的文件，不需要修改业务模块代码。2.封装BetterScroll2.1.项目封装结构在公共层common新建scroll文件夹，在该文件夹

P14-Vue-supermall项目-BetterScroll滚动插件封装1.概述移动端页面上下滑动一般都使用第三方插件来实现，这里我们就使用BetterScroll插件，对他进行一层封装，应用到项目中的上下滑动。2.BetterScroll基本使用2.1.BetterScroll介绍BetterScroll源码在githud上可以获取，同时还有使用文档。目前移动端上下滑动使用这个插件算是主流。在GitHub上搜索BetterScroll就可以找到这个插件项目查看BetterSc

P13-Vue-supermall项目-首页分类商品数据请求保存封装1.概述在上篇文章P12-Vue-supermall项目-首页TabContro封装中对首页商品分类做了封装，下面就是请求商品分类的数据，这里对商品分类数据请求和保存也需要做一次封装，方便后面使用。2.商品数据请求和保存2.1.商品数据请求和保存封装需求描述首页商品分类数据的请求需求：流行、新款、精选 三个分类一次请求拿到三个分类的数据，在用户点击每个分类的时候直接展示数据，避免每点击一个分类都去请求数据增加网络延迟。

P12-Vue-supermall项目-首页TabContro封装1概述这篇继续开发首页内容，下面开发的是首页内容分类展示。这个分类不仅在首页中有，在其他业务模块中也有使用。因此我们将这个分类展示内容封装成一个公共组件，让其他的业务模块来调用。2.封装TabContro2.1.TabContro结构图封装TabContro放到公共层的content下，每个业务模块需要用到分类功能，都可以调用这个模块进行展示。2.2.TabContro封装内容<template> &l

P11-Vue-supermall项目-首页本周流行模块封装1.概述这篇文章继续首页开发，下面对本周流行内容做一个模块封装。2.封装FeatureView2.1.FeatureView模块结构2.2.FeatureView内容<template> <div class="feature"> <!-- 点击图片超链接地址 --> <a href="https://act.mogujie.com/zzlx67"> &lt

P9-Vue-supermall项目-推荐信息展示1.概述本篇文章完成首页的推荐信息展示。推荐信息是首页的一个独立展示区域，我们将推荐信息封装到子组件中，在home.vue中引用该子组件，展示推荐信息。2.封装子组件展示推荐信息2.1.推荐信息子组件结构图2.2.新建RecommendView.vue子组件在childComps文件夹下新建RecommendView.vue子组件，封装推荐信息内容模块。<template> <div class="recomme

P9-Vue-supermall项目-首页轮播图展示1.概述在这篇文章中我们将首页的轮播图进行展示。2.封装轮播图展示组件轮播图展示也是一个独立的公共的组件，所以我们将他放在components下common下。在commin文件夹下新建swiper文件夹，存放轮播图封装的组件。2.1.轮播图组件封装结构图下面展示了轮播图组件封装结构图，在后面将介绍封装轮播图每个组件中的内容。2.2.Swiper.vue内容在Swiper.vue中实现了轮播图滚动效果。<temp

P8-Vue-supermall项目-请求首页多个数据1.概述在这篇文章主要介绍请求服务器获取数据，拿到数据后再我们的页面展示。2.封装网络模块首先对网络请求封装，所有的页面请求都面向我们封装的网络请求模块获取数据。2.1.安装axios我们网络请求使用axios插件，在项目创建时我们是没有安装这个插件的，这里先安装插件。# 进入项目根目录cd \supermall# 安装路由组件npm install axios --save2.3.axios网络请求公共层封装1

P7-Vue-supermall项目-首页导航栏的封装1.概述在本篇文章中介绍如何封装导航栏，并且设置首页导航栏。2.封装NavBar将项目所有模块导航栏抽离，在公共层封装一个导航栏NavBar，在其他页面的导航栏都可以使用这个公共的NavBar，然后根据自己的需求进行调整。2.1.封装NavBar在公共层components下common下新建navbar文件夹，在其下创建NavBar.vue组件，封装导航栏。NavBar.vue组件封装导航栏内容<template

P6-Vue-supermall项目-修改title小图标1.概述项目默认的title图标是Vue的官方图标，现在换成我们项目的图标2.替换小图标2.1.替换图标2.2.替换项目介绍将项目介绍替换成我们项目的介绍<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" co

P5-Vue-supermall项目-tabbar引入和项目模块划分文章目录P5-Vue-supermall项目-tabbar引入和项目模块划分1.概述2.添加tabbar2.1.TabBar介绍2.2.common层TabBar内容如下2.3.content层TabBar内容如下2.4.TabBar使用的图片3.新建项目模块3.1.首页模块组件3.2.分类模块组件3.3.购物车模块组件3.4.我的模块组件3.5.项目模块划分完成结构4.在App.vue组件中使用TabBar组件4.1.安装router路

P4-Vue-supermall项目-vue.config和editconfig1.概述添加config.js和editconfig.js两个配置文件，初始化项目的配置。2.添加vue.config文件配置路径别名在项目中引用某个文件，需要写好几层的路径才能找到该文件，通过配置路径别名简化了路径配置。直接写一个变量名称+文件即可。2.1.添加vue.config在supermall项目根路径下新建vue.config.js文件，内容如下。module.exports = { c

P3-Vue-supermall项目-初始化项目样式css1.概述项目创建后，还需要对项目整体的样式进行初始化。这个初始化内容已经有人帮我们写好了，不需要我们自己来写，我们只需要拿来用就好2.初始化css文件介绍在GitHub上有人已经将css文件开源，我们在GitHub上搜索normalize就可以找到，如下图。点击查看该项目点击查看normalize.css文件内容3.初始化项目样式上面介绍了初始化样式CSS文件的由来，我问只需要将该文件下载下来，放到我们项目中。下面就

P2-Vue-supermall项目-初始化目录结构1.概述项目创建后，下一步就是对项目结构进行规划，将项目安装业务模块进行封层。2.创建目录结构根据下面图中的介绍，创建项目目录结构，对项目进行结构化封层。...

P1-Vue-supermall项目1.概述从本篇文章开始进入Vue项目开发实战，从头开始做一个商城的小项目。2.CLI3脚手架创建项目首先创建CLI3脚手架作为项目开发的框架支持。创建CLI3脚手架，项目命名 supermall，插件只安装babel即可，后面在开发中用到其他的插件在单独安装。CLI3脚手架创建项目参考P12.3-VueCLI3创建项目3.初始化项目将CLI3脚手架中不需要的HelloWorld组件删除，清除App组件中默认不需要的配置。初始化文件后的内容

P16.1-axios网络请求封装1.概述Vue前端开发少不了向服务器请求数据，我们选择axios插件，他是一款功能强大，且易用的网络请求工具。下面我们就来介绍他。2.axios介绍2.1.axios名字介绍axios 字母的全称是： ajax i/o system2.2.axios功能介绍axios功能特点在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http请求支持 Promise API拦截请求和响应转换请求和响应数据支持多种请求方式

P15.3-Vuex核心概念文章目录P15.3-Vuex核心概念1.概述2.State单一状态树3.Getters基本使用3.1.Getters基本使用案例3.2.Getters作为参数3.3.Getters传递参数4.Mutation4.1.Mutation传递参数4.2.Mutation传递多个参数1.概述前面的两篇文章介绍了Vuex是什么，简单使用Vuex。这篇文章详细介绍Vuex的核心概念。2.State单一状态树Vuex提出使用单一状态树, 什么是单一状态树呢？英文名称是Sin

P15.2-Vuex单界面到多界面状态管理1.概述这篇文章主要介绍单界面状态管理和多界面的状态管理2.单界面的状态管理2.1.什么是单界面状态管理1.单界面状态转换图这图片中的三种东西，怎么理解呢？State：不用多说，就是我们的状态。（你姑且可以当做就是data中的属性）View：视图层，可以针对State的变化，显示不同的信息。（这个好理解吧？）Actions：这里的Actions主要是用户的各种操作：点击、输入等等，会导致状态的改变。2.案例说明单界面状态转换

P15.1-Vuex入门介绍1.新年寄语这篇文章我们就进入了新的一年2021年1月1号，新的一年新的知识在等待着我们去征服，在学习的路上用永无止步引用一句名言做个新年寄语。学海无涯苦作舟2.认识一下Vuex2.1.官方解释Vuex官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用 集中式存储管理 应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了

P14.3-Promise终极链式调用写法文章目录P14.3-Promise终极链式调用写法1.概述2.Promise链式调用思想3.Promise链式调用标准写法4.Promise链式调用第一种简化写法4.1.Promise链式调用标准写法4.2.Promise链式调用第一次简化写法4.3.Promise链式调用第终极简化写法4.4.Promise链式调用包含请求失败写法1.概述使用Promise封装多层异步调用时，调用层级越多，重复代码就越多，这个时候我们可将重复的代码去掉，简化封装异步请求的代

P14.2-Promise三种状态1.概述三种状态流程图当我们开发中有异步操作时, 就可以给异步操作包装一个Promise异步操作之后会有三种状态第一步：Promise封装异步请求第二步：发送异步请求，然后就有了下面的三种状态pending：等待状态，比如正在进行网络请求，或者定时器没有到时间。fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catc

P14.1-Promise入门介绍1.概述文章目录P14.1-Promise入门介绍1.概述1.1.什么是Promise1.2.什么是异步事件2.Promise处理异步事件基本使用2.1.创建Promise对象2.2.Promise对象封装异步代码2.3.Promise对象封装异步代码优化2.4.Promise对象resolve参数处理异步请求成功返回的数据2.5.Promise对象reject参数处理异步请求失败返回的数据2.6.Promise对象运行原理小结1.1.什么是PromiseProm

P13.13-VueRouter缓存路由keep-alive1.概述在首页点击首页内新闻栏目标题后显示新闻列表，再次点击个人中心路由组件，再点击首页，这个时候不会显示刚才打开的新闻栏目。因为他重新创建了首页路由，如果希望继续显示新闻列表，那么就需要keep-alive缓存点击过的路由。2....

P13.11-VueRouter路由导航守卫文章目录P13.11-VueRouter路由导航守卫1.概述2.案例叙述导航守卫2.1.案例需求2.2.beforeEach方法2.3.监听路由跳转改变title2.4.监听路由跳转优化3.导航守卫总结1.概述什么是导航守卫导航守卫就是监听从一个路由跳转到另一个路由，在跳转过程中做一些事情。vue-router提供的导航守卫主要用来监听监听路由的进入和离开的.vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路

P13.11-VueRouter路由$route和$router区别1.概述$route和$router区别总结$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法$route为当前router跳转对象里面可以获取name、path、query、params等2.$route和$router区别2.1.查看router对象的来龙去脉在user.vue中通过按钮输出router对象和main.js中打印import router from ‘