目录
Vue-cli脚手架文件组成
自带文件夹：
node_modules：放置项目的依赖
public：一般放置静态资源，放在public中的静态资源在打包的时候会原封不动的打包到dist文件中
src：程序员源代码文件夹
assests：放置静态资源（一般放置多个文件共用的静态资源）webpack打包的时候会把这 里的静态资源当成一个模块打包到JS文件里面
components：放置非路由组件和全局组件
App.vue：唯一的根组件
main.js：入口组件，也是整个组件最先执行的文件
babel.config.js：配置文件(babel相关）
package.json文件：记录项目叫做什么，项目中有哪些依赖以及相应的版本
package-lock.json：缓存性文件
README.md：说明文件（怎么安装依赖，项目怎么运行，怎么打包）
后期设置的文件夹：
vue.config.js:配置了eslint校验关闭
jsconfig.js配置了src文件别名
pages：放置路由组件
router：路由文件夹
api：放置api相关
store：Vuex相关
mock:mock数据
utils：存放一些功能函数例如获取uuid
项目其他配置：
eslint校验关闭：
在根目录下创建一个vue.config.js然后配置
module.exports = defineConfig({
lintOnSave: false,//关闭eslint
})为什么要关闭？声明变量但是没有使用时，eslint检验工具会报错
src文件夹配置别名：
创建jsconfig.json然后配置
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
}
},
"exclude": [
"node_modules",
"dist"
]
}因为项目大的时候src（源代码文件夹）：里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些
路由分析
分为上中下结构，上下结构不会变，设置为非路由组件，中间部分会改变设置为非路由组件
分析路由组件以及非路由组件
路由组件：home,search,login,register
非路由组件：footer,header
全局组件：在多个组件中都出现的组件注册为全局组件，放在components中例如三级联动以及分页器
全局组件：
在main.js中import引入组件
注册全局组件：Vue.compoent(组件名，组件）
非路由组件的业务：
步骤：引入组件、注册组件、引入样式
设置footer组件的隐藏和显示
v-if或v-show这里用v-show，因为切换得比较频繁
方法一：通过$route获取路径，判断路径，不建议，会很麻烦
方法二：利用路由元信息meta，通过footerShow来决定是否显示footer，通过$router.meta.来获取字段
{
path: '/register',
//路由懒加载
component: () =>
import ('@/pages/Register'),
meta: {
footerShow: false,
}
} <pageFooter v-show="$route.meta.footerShow"></pageFooter>路由组件业务：
vue-router的使用
安装vue-router，新建router文件夹，import引入vue-router，Vue.use(VueRouter)使用
在router中引入路由组件并配置路由组件的路径
最后在main.js中引入router并注册
路由组件引用的时候用router-view，非路由组件直接使用标签
路由组件组件一般放在pages中非路由组件放在compoents中
$route：一般用来获取路由信息（路由身上的一些属性吧）例如path\query\params
$router：一般进行编程式导航进行路由跳转（使用路由身上的一些方法）例如push\replace
注册完路由之后，不论是路由组件还是非路由组件身上都会有这两种属性
路由重定向
将路由定义到自己想定义的页面
//一进入页面就到home组件里面
{
path: '*',
redirect: '/home'
},路由跳转
声明式导航：router-link，一定要有to属性设置路径
<router-link to="/center/myorder"> 我的订单</router-link> 编程式导航：$router.push,$router.replace 声明式导航能做的，编程式导航都能做，编程式导航还能够处理一些业务逻辑
a标签中的target='_blank'代表打开一个新网页进行跳转
路由传参
params参数 ：属于路径中的一部分，在配置路由的时候需要事先占位，(占位方式：在设置路由的时候，路径后面加/:KEY),用对象写法的时候不能用path否则会崩溃
query参数：不属于路由的一部分，/home?k=v&a=b，不需要占位
路由传参方式
1、字符串形式：直接在跳转的路径后面加
this.$router.push("/search/"+this.params+"?k="+this.query)2、模板字符串
this.$router.push(`/search/${this.params}?k=+${this.query}`)3、对象写法
this.$router.push({name:'home',params:{keyword:this.keyword},query:{k:this.k})路由传参相关面试题：
1、路由传递参数（对象写法）path是否可以结合params参数一起使用?
不可以：不能这样书写，程序会崩掉，要用name
2:如何指定params参数可传可不传?
如果占位了但是没有传递params那么url会出现问题（会导致原来要跳转的路径消失）
可以在占位时在后面加上一个问号代表这个参数可传可不传
3、params参数可以传递也可以不传递，但是如果传递是空串，如何解决？
如果传递的是空串，url同样会出现问题
用undefined解决 params:{k:''||undefined}
this.$router.push({name:'home',params:{keyword:''||undefined},query:{k:this.k})4、 路由组件能不能传递props数据?能，有三种写法，布尔值，函数，对象
this.$router.push({ name:'home', params:{keyword:''||undefined}, query:{k:this.k}, //1、布尔值形式可以让params参数成为组件的参数 //接收组件直接用props就可以接收 props:true, //2、对象写法：额外给路由组件传递参数 props:{a:1,b:2}, //3、函数写法：可以将params参数和query参数成为组件的参数 props:{($route)=>{return {keyword:$route.params.keyword,k:$route.query.k} }} })
重写push和replace（项目中遇到的问题）
编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误
原因：vue-router3.1.0之后, 引入了promise的语法，$router.push和$router.replace如果没有通过参数指定成功或者失败回调函数就返回一个promise来指定成功/失败的回调，且内部会判断如果要跳转的路径和参数都没有变化, 会抛出一个失败的promise
解决方法：
1、在每次调用的时候都传入成功或失败回调，或者catch捕获错误
this.$router.push({
name: "search",
params: { keyword: this.keyword || undefined},
query: { keyword1: this.keyword.toUpperCase() },
}).catch(() => {});但是每次使用的时候都要写，治标不治本
2、直接修正Vue原型上的push和replace方法（推荐）
在router文件中，首先保存原来的方法，然后修改VueRouter原型上的push和replace方法，传递三个参数location：原先的参数（路径和参数） ；resolved：成功回调；rejected：失败回调。如果有成功和失败回调传入，就直接传入原先的push和replace，如果没有就手动传入两个回调()=>{}。
注意，在调用原方法的时候要用call改变上下文，因为要让组件实例来调用这个方法，如果不用call的话就这个函数的上下文就变成window了
在组件中调用this.$router.push的时候this指的是组件实例，$router和$route都是在注册路由的时候添加在组件上的属性
push和replace是VueRouter原型上的方法
//将原有的push方法地址，保存起来，后期还能拿到原来的
const originPush = VueRouter.prototype.push
const originReplace = VueRouter.prototype.replace
//可以大胆的去修改原型的push，让原型的push指向另外一个函数
VueRouter.prototype.push = function(location,onResolved,onRejected){
//location就是我们调用 this.$router.push，传递过来的对象
if(onResolved === undefined && onRejected === undefined){
//证明调用的时候只传递了个匹配路由对象，没有传递成功或者失败的回调
return originPush.call(this,location).catch(() => {})
}else{
//证明调用的时候传递了成功或者失败的回调，或者都有
return originPush.call(this,location,onResolved,onRejected)
}
}
VueRouter.prototype.replace = function(location,onResolved,onRejected){
//location就是我们调用 this.$router.replace，传递过来的对象
if(onResolved === undefined && onRejected === undefined){
//证明调用的时候只传递了个匹配路由对象，没有传递成功或者失败的回调
return originReplace.call(this,location).catch(() => {})
}else{
//证明调用的时候传递了成功或者失败的回调，或者都有
return originReplace.call(this,location,onResolved,onRejected)
}
}接口相关
postman测试接口
postman可以测试接口能不能正常使用，选择请求方式并输入接口地址就能测试接口能否正常使用，如果返回的code字段是200则表示成功
axios二次封装
向服务器发请求的方式：XMLHttpRequest,fetch,JQ,axios
项目当中常用api文件夹放置api相关的东西，创建request.js重新配置axios
//这个request其实就是axios
const request=axios.create({
//配置基础路径
baseURL:'/api',
//配置请求超时的时间
timeout:5000,
})为什么要二次封装？为了实现请求拦截器和响应拦截器
请求拦截器：在发送请求之前可以做一些处理
//请求拦截器可以在请求发出之前检测到，并进行一些处理
requests.interceptors.request.use((config) => {
//config是配置对象，身上有个属性很重要，headers请求头
return config;
})响应拦截器：数据返回之后进行一些处理
//响应拦截器
requests.interceptors.response.use((res) => {
//成功的回调函数
return res.data;
}, (error) => {
//失败的回调函数
return Promise.reject(new Error('faile'));
});记得对外暴露
接口统一管理
项目小的时候：可以在组件的生命周期函数中发送请求
项目大的时候：在api文件夹下创建index.js对项目接口进行统一管理
export const reqSubmitOrder = ((tradeNo, data) => requests({ url: `/order/auth/submitOrder?tradeNo=${tradeNo}`, method: 'post', data }))跨域问题
处理方式：配置代理服务器
在vue.config.js文件中配置
//代理跨域
devServer: {
proxy: {
//只要路径中有api就去找target的服务器要东西
'/api': {
target: 'http://gmall-h5-api.atguigu.cn',
}
}
}原理：
当浏览器向服务器发起请求时，即使存在跨域问题，服务器依旧是会响应请求，并返回数据给浏览器，但当浏览器拿到数据后发现存在跨域问题了，这时候浏览器就不会将数据给页面，相当于把数据给扣留了。而代理服务器与前端页面同源，由他返回的数据就不存在跨域的问题，如图。 （备注：代理服务器与服务器之间是非同源，但不存在跨域问题，是因为服务器之间采用的是http请求，而不是ajax技术）
nginx （相对繁琐，且需要一定的后端知识）
proxy：（相对简单，熟悉一定的webpack配置即可） ，可以配置单个或多个代理
nprogress进度条的使用
安装nprogress，在api文件夹下的request.js中import引入，引入进度条样式
//引入进度条
import nprogress from "nprogress";
//引入进度条样式，可以在这个文件中改变样式
import 'nprogress/nprogress.css'在请求拦截器和响应拦截器中使用，start进度条开始，done进度条开始
requests.interceptors.request.use((config) => {
//进度条开始动
nprogress.start();
//config配置对象，包含header请求头
return config;
})
//响应拦截器
requests.interceptors.response.use((res) => {
//成功的回调函数
//进度条结束
nprogress.done();
return res.data;
}, (error) => {
//失败的回调函数
return Promise.reject(new Error('faile'));
});Vuex
什么是Vuex：官方提供的一个插件，状态管理库，集中管理项目公共的数据 ，
项目比较大的时候才用，项目小完全不需要
使用
安装vuex（记得@3.6.2），新建store文件夹，引入Vue（依赖于Vue所以要引入Vue）和Vuex，使用Vuex插件，在main.js中引入store，引入后组件身上会多一个$store属性
获取store中的数据，直接$store获取或者用map（数组、对象【value是函数的形式】）
Vuex模块开发
将大仓库拆分成小module ，记得打开命名空间
import trade from './trade'
export default new Vuex.Store({
modules: {
trade
}
})typeNav三级联动
数据展示
就是三连环：在mounted里面dispatch，在actions中拿调用api文件中设置的接口函数，向服务器发送请求得到返回的数据，并进行处理，返回成功则提交mutation修改state中的数据（state中的数据默认初始值应该根据返回数据的类型来设置），在组件中获取数据，最后展示数据，展示数据的时候常用v-for循环
添加动态背景
方法一：:hover
方法二、data中设置一个值x，鼠标没有在任何一个一级标签的时候设置为-1，鼠标在哪个一级标签上就赋值为哪个标签的index，添加动态类名，当x==index的时候就加上这个类，当鼠标移开的时候x=-1
要求：当鼠标离开‘全部商品分类’的时候背景颜色才消失
使用事件的委派【在三级联动路由跳转的时候也有用到】，在一级列表和全部商品分类外面再套一个盒子，然后把鼠标移除事件放在外面的父盒子里面
事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。换句话说，就是把一个本来让下属干的事情交给上司做了。这样做的好处就是不在进行查询，减少了DOM操作，极大地改善了代码性能，它既可以为动态添加的元素附上效果，也可以改善代码性能
二三级分类显示与隐藏
方法一、:hover，鼠标移上就display:block否则display:none
方法二、js动态添加样式
<div class="item-list clearfix" :style="{display:currentIndex==index?'block':'none'}">给三级联动加上防抖与节流
防止出现卡顿，使用lodash，Vue2框架自带lodash，直接引入就行。lodash对外暴露的是一个下划线_，直接import _ from 'lodash'是全部引入，最好按需引入import throttle from 'lodash/throttle'
//节流
changBackground: throttle(function(index){
this.currentIndex=index;
},50)三级联动路由跳转
在路由跳转的时候会把选择产品的信息进行传递
因为router-link是一个组件，当服务器数据返回之后循环出很多的router-link组件，很耗内存，会出现卡顿，最好用编程式导航 但是如果直接在a标签上面用编程式导航也会导致大量绑定，所以可以用事件委派将事件绑定在父盒子上面。
事件委派存在的问题：如何识别a标签？如何获取参数？使用自定义属性，在所以的a标签中都设置一个:data-categoryName="c1.categoryName",一级标签为c1二级c2三级c3，判断元素身上是否有categoryname【注意小写】属性就可以判断是否为a标签，再添加一个自定义标签categoryId来分辨一级二级三级标签
<a :data-categoryName="c1.categoryName" :data-category1Id="c1.categoryId">{{c1.categoryName}}</a>
自定义属性设置 ：在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放。这里的data-前缀就被称为data属性 ;我们可以通过dataset来获取data属性，在dataset中属性名会自动变为小写
三级路由跳转使用编程式导航+事件委派+自定义标签的形式实现
三级联动的显示与隐藏
在home页面会一直显示，但是search中不会，所以在typenav挂载完时判断是在哪个路由下，如果在search那就隐藏typenav，并且鼠标移到商品时才显示，鼠标移出的时候又隐藏
三级分类的过渡动画
动画效果：在要用动画效果的一个元素外面套上transition标签，并且元素上一定要有v-show或者v-if标签
V-enter 进入的起点动画效果
V-enter-to 进入的终点动画效果
V-leave 离开的起点动画效果
V-leave-to 离开的终点动画效果
V-enter-active 进入时激活的样式
V-leave-active 离开时激活的样式
当有多个动画效果时可以给元素取name，然后把v换成name
当要包含多个元素的时候要用transition-group标签
还可以使用animate库
<transition name="sort">
<div class="sort" v-show="show">
</div>
</transition> .sort-enter,.sort-leave-to{
height: 0px;
}
.sort-leave,.sort-enter-to{
height: 461px;
}
.sort-enter-active{
transition: 0.1s linear;
}
.sort-leave-active{
transition: 0.1s linear;
}
}防抖与节流
用户行为过快会导致浏览器反应不过来，如果当前回调函数中有一些大量的业务，有可能会出现卡顿现象，因此需要防抖和节流
效果
防抖：前面所有的触发事件都被取消，最后一次执行在规定时间之后才会触发，也就是说快速连续触发时只会执行一次
节流：在规定的时间间隔范围内不会重复触发回调，只要大于这个时间间隔才会触发回调，把频繁触发转变为少量触发
原理
防抖是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这样一来，只有最后一次操作能被触发。
节流是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。
防抖的应用场景
( 1 ) 用户在输入框中连续输入一串字符，只会在输入完成后取最终输入的内容。然后发送ajax请求，这样可以有效地减少请求次数，节约请求资源。
( 2 ) window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖函数让其只触发一次。
节流的应用场景
( 1 ) 鼠标连续不断地触发某事件（如点击），在单位时间内只触发一次。
( 2 ) 在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。
( 3 ) 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
实现：
方法一、使用lodash插件，其中包含防抖与节流业务
防抖：_.debounce(function(){},1000);其中function(){}为要防抖的函数，1s后执行，用户操作频繁但是只执行一次
节流：_.throttle(function(){},1000) 用户操作频繁，把频繁操作变为少量操作
Vue2框架自带lodash直接引入就可以
方法二、自己写防抖节流函数
防抖：分为立即执行版本和非立即执行版本
防抖函数中获得argument并使用apply改变this是为了让 debounce 函数最终返回的函数 this 指向不变（否则this会指向window）以及依旧能接受到 event 参数（这里接收的arguments其实就是event参数）。
非立即执行：触发事件后不会立即执行而是在n秒后执行
<input type="text">let input = document.querySelector('input')
let a = 'a';
input.oninput = debounce(function(a) {
console.log(1)
}, 1000)
function debounce(fn, delay) {
let time = null;
function _debounce() {
let args = [...arguments];
clearTimeout(time);
time = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
return _debounce
}立即执行，触发后会先立即执行一次
let input = document.querySelector('input')
let a = 'a';
input.oninput = debounce(function(a) {
console.log(1)
}, 1000, true)
function debounce(fn, delay, isImmediate = true) {
let time = null;
let isFirst = true
function _debounce() {
let args = [...arguments]
if (time) {
clearTimeout(time)
}
if (isFirst && isImmediate) {
fn.apply(this, args);
isFirst = false;
}
time = setTimeout(() => {
fn.apply(this, args)
isFirst = true;
}, delay)
}
return _debounce
}节流：有两个版本，时间戳和定时器
时间戳版本
function throttle(fn, wait) {
let lastTime = 0;
function _throttle() {
let nowTime = Date.now();
let args = [...arguments]
if (nowTime - lastTime > wait) {
fn.apply(this, args);
lastTime = nowTime;
}
}
return _throttle
}定时器
function throttle(fn, wait) {
let lastTime = 0;
function _throttle() {
let nowTime = Date.now();
let args = [...arguments]
if (nowTime - lastTime > wait) {
fn.apply(this, args);
lastTime = nowTime;
}
}
return _throttle
}时间戳版本是在触发时立马就执行，而定时器版本是在触发一段时间后再执行
5063
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
