m0_62908813的博客

静态组件发请求mounted() { //派发action获取产品详情的信息 this.$store.dispatch("getGoodInfo", this.$route.params.skuid); },Vuex（三连环）动态展示组件注册为路由组件 //设置路由占位符 并进行页面路由跳转 path: "/detail/:skuid", component: Detail, meta: { show: tru

分页器拆分拆分为一个全局组件注册使用将组件样式进行居中处理需要知道当前页面页数需要每一个要展示多少条数据需要分页器一共有多少条数据需要知道连续的页码数是多少条数据pagNo 当前第几个页码数pageSize 代表每一页需要展示多少条数据total 代表整个分页一共需要展示多少条数据continues 代表分页连续页码数先给定数据，并给初始值，进行测试并使用props进行传值操作 //当前第几页 每一页展示多少数据 一共多少数据 连续页码数...

排序重点操作定义排序初始状态的值（初始状态应该为综合降序）//排序:初始状态应该是综合且降序 asc 升序 order: "1:desc",对排序进行结构操作默认为综合添加背景颜色考虑的问题谁应该有类名，通过order属性值中是包含1（综合）|包含2（销量）遍历数组之中是否包含一，给等于的值为-1遍历数组之中是否包含二，给等于的值为-1 <li :class="{ active: isOne }"> <li :class=

地址请求方式参数：需要带参数当前这个函数需不需要接收外部传递参数当前接口（获取搜索模块数据），给服务器传递一个默认参数，至少是一个空对象大仓库需要注册小仓库Vuex三连环State仓库初始化状态Getter计算属性 项目中getter主要的作用是简化仓库中的数据可以在将来组件中需要用的数据简化一下（将来组件在获取数据的时候就方便了）将组件挂载实例变为一个回调函数getData() { this.$store.dispatch("getSearchLi

<Carsousel :list="list.carouselList" />接收数据 props: ["list"],开发搜索模块静态页面+静态组件拆分出来发请求Vuex组件获取仓库数据，动态展示数据在这个请求过程中需要携带参数 所以添加了data数据// 当前这个函数需要接收外部传递参数// 当前这个接口(需要获取搜索模块数据)，给服务器传递一个默认参数(至少是一个参数)export const reqGetSearchInfo = (p...

获取floor数据 this.$refs.mySwiper,引入swiper包<!--banner轮播--> <div class="swiper-container" ref="mySwiper">在这里使用了ref打标识并获取数据 this.$refs.mySwiper,获取floor三连环数据// 引入vuex 里面的辅助函数import { mapState } from "vuex";

获取首页轮播图的数据Swiper基本使用（用于轮播图数据）安装插件引包import "swiper/css/swiper.css";遍历轮播图，以及设置index的索引进行传值<div class="swiper-wrapper"> <div class="swiper-slide" v-for="(carousel, index) in bannerList"

在数据服务器未提供的状态下，使用mock.js进行数据接口模拟下载mock.js插件使用步骤在项目中src创建mock文件夹准备json数据（在mock文件夹中创建相应的json文件）格式化数据，不能留有空格把mock数据需要的图片放置到public文件夹中（public文件夹在打包的时候，会把相应的资源原封不动打包到dist文件夹中）创建mockserer.js通过mock.js插件实现模拟数组使用步骤引入mock模块把json数据格式引入进来（json数据格式没有对外

搜索模块设置开发search模块下面的全局typenav商品分类菜单Typenav在home页面下显示(默认情况下也是为显示状态)在搜索页面之下隐藏 在这里我们做了一个判断是在哪一个页面之下（如果不是home路由组件将typenav进行隐藏）// 组件挂载完毕 可以向服务器发请求 mounted() { // 当组件挂载成功，让show属性变为false // 如果不是Home路由下组件 将typeNav进行隐藏 if (this.$route.path !=

三级路由跳转与传递参数，（用户是可点击的）当我们点击会重home模块跳转到search模块，并且在路由跳转时、进行传递。使用事件委派+编程式路由的方式解决跳转问题 <!-- 在事件委派里面调用路由导航点击事件 --> <div class="all-sort-list2" @click="goSearch">组织回调函数路由跳转声明式导航router-link编程式导航push/replace进行路由跳转编程式导

节流是什么指在规定时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发。通过闭包和延迟器结合使用下载并引入lodash功能函数（进行按需引入）import _ from "lodash";获取节点点击触发事件 changeIndex: throttle(function (index) { this.currentIndex = index; // 节流时间 }, 100),防抖是什么用户操作很频繁，

在鼠标进入定义一个回调函数三级分类背景颜色变化，在鼠标移入时调用函数并对其进行传值，鼠标移上某一个一级分类的元素的索引值，当用户移上的值和index的某一个值相等时，就给该元素添加一个class为cur。 <h3 @mouseenter="changeIndex">事件回调，鼠标进入响应式数据currentIndex属性。接收鼠标移入时的index changeIndex(index) { this.currentIndex = index; },

Vuex的设置建立文件夹仓库 store使用一次vuex对外暴露vuex这个实例// 对外暴露实例export default new Vuex.Store()state 仓库存储数据的地方 初始化的状态mutations 唯一修改state数据的地方actions 处理action，书写自己的业务逻辑，也可以处理异步数据getters 相当于计算属性 简化仓库里面的数据在入口文件引入仓库 注册仓库import router from "@/route...

跨域的解决方案有哪些Jsonpcors在这个项目中我们使用配置代理跨域/配置代理跨域 devServer: { proxy: { // 代理的api "/api": { // 获取数据的服务器 target: 'http://39.98.123.211:8216', }, }, },统一接

Axios的二次封装、请求拦截器、可以在发请求之前处理一些业务 响应拦截器、服务器数据返回之后、可以处理一些业务在项目中一般放置在api文件夹中 （axios）下载并引入axios文件const requests = axios.create({ // 配置对象 //基本路径 发送请求时 路径会出现api baseURL: "/api", //代表请求时间为5s timeout: 5000,})//请求拦截器----在项目中发请求（请求没有发出

静态模块的完成先把静态页面进行完成获取服务器的数据进行展示将三级联动注册为一个全局组件import TypeNav from '@/pages/Home/Typenav'// 全局组件名 哪一个组件Vue.component(TypeNav.name, TypeNav)拆分步骤结构 样式 图片资源 设置文件夹设置图片资源文件地址设置样式文件引入注册使用完成结构、样式、图片资源测试接口数据...

先把vuerouter原型对象的push,先进行保存一份let originPush = VueRouter.prototype.push;let originReplace = VueRouter.prototype.replace;VueRouter.prototype.push = function (location, resolve, reject) { if (resolve && reject) { originPush.call(this,

Path是否可以结合params参数一起使用。不能，路由跳转传参的时候，对象写法可以是name.path形式，但是不能使用path结合params参数一起使用。如何指定params参数可传可不传?如果路由要求传递params参数，但是你就不传递params参数，发现一件事情，URL会有问题的如何指定params参数可以传递、或者不传递，在配置路由的时候，在占位的后面加上一个问号params可以传递或者 path: "/search/:keyword?",this.$rou

路由传参，参数的几种写法路由跳转的方式分为：声明式导航(必须有to属性)，编程式导航(使用的是组件实例的$router.push/replce) 且还能进行其他的一些业务逻辑。params参数：属于路径中的一部分，需要进行占位，query不属于路径中的一部分，不需要进行占位路由传参的三种形式：字符串形式（this.$router.push(/search/+this.keyword+?k=this.keyword. toUpperCase()）模板字符串形式（this.$rout

路由组件一般是放置在paegs文件夹里面非路由放置在components文件夹中路由组件一般需要在router文件夹中进行注册，（使用时即为组件的名字），非路由组件在使用时，一般都是以标签的形式进行使用，不管是路由组件还是非路由组件，都有$router和￥route属性，$route获取的是一般路由信息(query、params和路径)，$router是进行编程式导航路由配置（push/replce）。设置路由重定向，找不到跳转到首页。 { path:

路由分析拆分四大模块首页路由组件搜索路由组件登录路由组件注册路由组件非路由组件为上下两部分头部组件底部组件开发流程书写静态组件拆分组件获取服务器的数据动态展示完成相应的动态逻辑在项目中我们采用的是less样式，由于浏览器不识别less,使用less-loader（安装的是@5版本）进行处理，用于浏览器进行识别npm install --save vue-router@3.5.3npm install --save less-loader@5.

项目介绍创建项目 vue crearte app 创建一个新项目包含登录与注册业务，配置token 守卫 购物车 支付业务 在public文件夹里面的静态资源文件会继续留在public文件当中，打包的时候也会在这里面。Assets文件夹放置的是静态资源，是多个组件的静态资源，Compnents文件夹，一般放置的是非路由组件，全局组件App.vue唯一的根组件Mian.js唯一的入口文件Babel相关文件package.json记录依赖文件lock缓存性文件配.