VUE项目
七彩冰淇淋与藕汤
这个作者很懒,什么都没留下…
展开
-
vue插件的使用:为什么需要使用 vue.use?为什么不可以直接 import from?
在Vue中引入使用第三方库通常我们都会采用import的形式引入进来,但是有的组件在引入之后又做了Vue.use()操作,有的组件引入进来又进行了Vue.prototype.$something = something,那么它们之间有什么联系呢?1.Vue.prototype.$axios = axios//其实是在Vue原型上增加了一个$axios,通过我们会在全局注册这个方法,然后在周后的文件中都可以通过$axios直接来使用axios2.通过全局方法 Vue.use() 使用插件,Vu原创 2022-04-01 13:20:22 · 1903 阅读 · 0 评论 -
级联滑动,better_scroll
1.使用better_scroll,使得一二级列表都能单独滑动。在库里找到对应绑定scroll监听,实时获取滚动距离y.2.在渲染完毕后,收集右侧所有li的距离最顶部位置。原创 2022-03-13 15:50:53 · 156 阅读 · 0 评论 -
Vue项目--尚品汇(图片懒加载,表单验证)
1.图片懒加载是指在服务器还没返回需要的图片时,显示一个默认图片.插件:vue-lazyload引入:使用:3.表单验证插件vee-validate4.路由懒加载原创 2022-03-12 09:23:53 · 948 阅读 · 0 评论 -
Vue项目--尚品汇(微信支付)
1.使用elementUI写遮罩层和弹框提交订单编号给服务器,服务器会返回一个微信支付字符串2.使用qrcode插件,将服务器返回的微信支付字符串转换成二维码。3.显示支付二维码的同时,需要向服务器不断发请求,查询支付状态(205为待支付,200为支付成功)。需要保存定时器名字,为了后续关闭。需要保存支付状态,为弹出框按钮‘已支付成功’的后续行为做判断.4.弹出框按钮的处理...原创 2022-01-07 15:03:30 · 500 阅读 · 0 评论 -
Vue项目--尚品汇(登录注册)、token存储与过期
1.样式里也可以使用@符号代替src路径,但是需要使用~@2. 注册部分需要表单验证,这里暂时没做点击发送验证码,后台会给用户手机发送一个验证码,用户填写在注册界面,提交给后台。调接口,post3.登录 调接口,post,参数为手机号和密码。服务器会返回用户的token作为用户的唯一标识符。我们首先将其存在vuex中,但是vuex只能暂存,刷新就丢失了。用户点击登录以后,需要将token带给服务器,与uuid用法类似,放在请求头:4....原创 2022-01-07 13:32:20 · 2198 阅读 · 0 评论 -
Vue项目--尚品汇(购物车页面的一些操作(修改数量,勾选,删除等))
1.用户身份识别--uuid、本地存储在src文件夹里新建utils文件夹,创建uuid_token.js用于存储用户的身份标识(游客)。第一次本地存储中没有身份码,使用uuidv4()函数生成,并存储于本地。以后直接在本地存储中获取。2.在store文件夹中的ShopCart文件中的state,用getUUID()获取用户身份识别码,存储到uuid_token里。3.修改请求拦截器,将用户身份传递给服务器(给请求头加一个字段)将获取到的数据动态展示到ShopCart组件中.原创 2022-01-05 15:25:03 · 1762 阅读 · 0 评论 -
Vue项目--尚品汇(加入购物车)
1.加入购物车需要对接口发送Post请求,携带的参数是商品详情页(当前商品)的ID和购买个数。async函数会返回一个Promise对象,如果return一个非空字符串,那个这个Promise是成功的,如果return一个Error对象, 那个这个Promise是失败的。在调用此函数的时候,利用try、catch进行成功或失败的回调。2.在点击‘加入购物车’以后,需要进行路由跳转,展示加入购物成功页面。在这个页面需要展示商品的一些详情信息,这个信息是一个对象的形式。可..原创 2022-01-05 11:08:20 · 483 阅读 · 0 评论 -
Vue项目--尚品汇(详情页面)
1.滚动条始终在顶部2.点击高亮的效果定义一个data:curIndex:0当点击图片,修改curIndex,为当前图片索引值;且遍历所有图片将其高亮设置为否,将当前图片高亮设置为是。3.兄弟组件图片内容联动效果涉及到兄弟组件通信,用$bus,点击下面的小轮播中的一个图片时,将其id传给兄弟组件,两个组件就能显示相同的图片。4.小轮播图的实现跟之前的轮播图不一样(没有分页器,每次展示三个图片)5.放大镜效果6.用户输入购买个数如果输入的非数字...原创 2022-01-05 09:42:18 · 457 阅读 · 0 评论 -
Vue实战--尚品汇(分页器)
1.展示分页器需要的参数2.分页器的连续页码展示:!!重点在于计算起始页码和终止页码原创 2022-01-04 15:08:58 · 390 阅读 · 0 评论 -
Vue项目--Search组件的开发
1.将selector抽象成SearchSelector组件,以及进相关api的配置,数据的拉去分别在各自组件内部2. 此次数据的请求需要用到post方式,会用到一个对象参数,将对象参数写在Search.vue的data中,挂载时进行数据的拉取3. 当已经处于search页面,只是改变路由参数信息时,路由不会跳转,需进行处理当改变搜索框内容,再点搜索按钮, 路由信息会发生变化,所以通过监听路由信息可以完成路由跳转。注意此时category1Id、category2Id、c..原创 2021-12-31 13:34:28 · 891 阅读 · 0 评论 -
Vue项目--公共组件的提取之轮播图
由于大轮播图和小轮播的结构样式完全一样,所以可以抽象成一个公共组件。新建Carousel文件夹,轮播组件放在这里。需要解决的问题1:小轮播和大轮播的new Swiper创建的位置不同,需要统一小轮播也可以放在监视属性里,但是由于floorList不会发生改变,所以需要immediate:true(大轮播加上这个也可以,不会影响效果)所以floorList.vue 中的new Swiper最终写在监视属性里:需要解决的问题2:传数据需要根据轮播图片信息构建轮播结构(几张轮播图)因.原创 2021-12-30 10:27:07 · 493 阅读 · 0 评论 -
Vue项目--FLoor组件的实现
在home.vue里相应读取floor.json数据(不是在floor里读),因为有两个Floor组件,需要在home里通过v-for循环建立Floor,并在建立的时候,通过props方式将对应这个组件的数据传给floor,在floor内部就可以根据home传过来的组件进行结构创建了。home.vue :floor.vue:这里的小轮播图new Siper的写法跟大轮播图几乎一样,只是可以写在mounted()函数里面了。因为数据是父组件传过来的,没有像之前那样有资源请求..原创 2021-12-29 21:31:34 · 326 阅读 · 0 评论 -
Vue项目--轮播图的实现
使用swiper插件实现轮播图1.安装 cnpm install --save swiper@5 5版本比较稳定2.引入swiper,在使需要使用轮播图的组件ListContainer里引入import Swiper from 'swiper' 引入swiper样式,因为下面也有轮播图,所以在入口文件main.js里引入。import 'swiper/css/swiper.css'3.swiper必须先把结构准备好,再新建swip...原创 2021-12-29 09:58:49 · 3048 阅读 · 0 评论 -
Vue项目--mock数据
1.安装:cnpm install --save mockjs2.使用步骤:1)在项目当中src文件夹中创建mock文件夹2)第二步准备JSON数据(mock文件夹中创建相应的3SON文件)-----格式化一下,别留有空格(跑不起来的)3)把mock数据需要的图片放置到public文件夹中【public文件夹在打包的时候,会把相应的资源原封不动打包到dist文件夹】4)创建mockSerer.js通过mockjs插件实现模拟数据:5)mockServer.js文件在入口文件中引入(至少需原创 2021-12-28 19:07:14 · 1034 阅读 · 0 评论 -
Vue项目--仓库数据请求的优化
我们开始把三级列表数据的请求dispath放在typeNav组件的挂载时,每次切换页面都会重新请求数据,这是不必要的。解决方法:把数据请求放在App.vue 挂载时(放在main.js里面,挂载#app以后也可以,视频给的第一种写法)...原创 2021-12-28 15:19:51 · 250 阅读 · 0 评论 -
Vue项目--路由跳转的分析
路由跳转可以选择声明式导航或编程式导航。由于本项目的三级联动的所有a标签都能点击,所以如果采用声明式(router-link)会一下创建上千个vue-component(router-link本身是vue的实例化对象),很耗内存,导致卡顿。所以最后选择编程式导航,给父标签添加点击事件。(个人认为:1.给a标签添加点击事件也可以,阻止冒泡就行了吧?2.给父组件绑定是因为click会冒泡到父组件,最终触发点击事件)最后用事件的委派和编程式导航。事件委派将@click事件绑定给所有元素的父标签--即.原创 2021-12-28 10:16:35 · 271 阅读 · 0 评论 -
Vue项目--防抖与节流
1.防抖:用户操作很频繁,但是只在最后执行一次2.节流:用户操作很频繁,将多次操作变成少量操作,在一段时间内只允许触发一次(可以给浏览器充分的时间解析代码)3.实现:安装lodash包将要防抖的函数包在lodash防抖函数里,经过包裹后依然返回一个函数,这个函数就可以防抖了。...原创 2021-12-27 21:16:32 · 268 阅读 · 0 评论 -
Vuex项目--模块化状态管理组件
1.安装vuex:cnpm install --save vuex2.为home search ...分别创建对应的状态管理文件 新建store文件夹,文件夹里创建home,search等四个文件夹以及index.js(用于汇总四个状态管理组件),每个文件夹里创建相应的index.js用于汇总四个。3.状态管理组件的书写方式:const state={}const mutations={}const actions={}const getters={...原创 2021-12-27 13:14:38 · 274 阅读 · 0 评论 -
Vue项目--尚品汇(axios重写,代理服务器、API统一管理)
1.重写axiossrc文件夹下创建api文件夹,api文件夹里的request.js文件写如下内容://对axios进行二次封装//需要用到原生axios的请求和相应拦截器import axios from 'axios'//1:利用axios对象的方法create,去创建一个axios实例// 2: request就是axios,只不过稍微配置一下const requester = axios.create({ //基础路径,发请求的时候,路径当中会出现api b原创 2021-12-26 22:11:25 · 599 阅读 · 0 评论 -
Vue项目--尚品汇(静态主页及其组件的拆分)
1.主页组件拆分1)三级联动(多个页面使用,注册为全局组件)2)内容组件3)热卖组件4)猜你喜欢5)家用电器6)商家展示2.三级联动全局组件设置1)组件的书写:在Home文件夹新建TypeNav文件夹,里面放index.vue文件及其相应的图片。将写好的html和css文件夹中相应内容放入到vue组件内。2)全局组件的注册:在入口文件main.js里面注册全局组件。使用Vue.component(给组件起名,组件--TypeNav)。3)全局组件的使用:直接在t.原创 2021-12-26 16:06:55 · 495 阅读 · 0 评论 -
Vue项目--尚品汇(开发流程、组件拆分,路由跳转)
1.项目开发流程:1)写静态页面(html+css)2)拆分组件3)获取服务器数据动态展示4)完成相应的动态业务逻辑2.创建组件的时候,需要1)找到组件结构2)找准组件样式(使用less的话需要安装依赖:npm install --save less less-loader@5)3)获取组件相应的资源(图片等)3.创建组件后使用组件(非路由组件)1)引入 2)注册3)使用<template> <div> ...原创 2021-12-25 22:13:50 · 587 阅读 · 1 评论 -
Vue项目---尚品汇(创建项目)
1.创建项目:vue create projectName这里创建vue2项目。初始的项目中含有以下文件,解释说明:2.进行一些相关配置1)项目运行,浏览器自动打开 --open2) eslint校验功能关闭在根目录下创建vue.config.js文件在文件中写入:module.exports={ //关闭eslint lintOnSave:false}3)给src文件夹配置别名@,方便找文件,并且输入@会有提示node_modul..原创 2021-12-23 20:47:42 · 429 阅读 · 0 评论