Vue商城项目开发笔记（自用）

1 创建工程

vue create 项目名

2 工程初始化设置

2.1 eslint效验功能关闭。
在vue.config.js中配置

module.exports = defineConfig({
// 关闭eslint
lintOnSave:false
})

2.2 src 文件夹简写方法，配置别名
jsconfig.json配置别名@提示,@代表src文件夹

{
"compilerOptions": {
"paths": {
"@/*": [
"src/*"
]
}
},
"exclude": [
"node_modules",
"dist"
]
}

3 创建非路由组件

components 文件夹

4 创建路由组件并配置路由

router 文件夹与pages 文件夹

5 Footer组件 在 注册和 登录页面隐藏

使用路由元信息 meta

6 路由传参

params参数 和 query参数

// 字符串形式(需要在路由配置中占位，params形式传递 keyword，query形式传递 k)
this.$router.push('/search/' + this.keyword + '?k=' + this.keyword.toUpperCase());
// 模板字符串形式
this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)
// 对象形式(最常用)
this.$router.push({
name:'search',
params:{keyword:this.keyword},
query:{k:this.keyword.toUpperCase()}
})

7 编程式路由跳转到当前路由（参数不变），多次执行会抛出NavigationDuplicated警告错误

具体表象有：输入框不变情况下，重复点击搜索按钮
这是由于 编程式路由导航 的vue-router引入了promise
在使用 push/replace 时，没有传递成功和失败回调，就会导致错误
所以可以在 main.js 中，重写push/replace方法

// 重写push/replace方法
// 先把VueRouter原型对象的push和replace保存一份
let originPush = VueRouter.prototype.push;
let originreplace = VueRouter.prototype.replace;
// 重写
// 第一个参数：往哪里跳转，传递哪些参数
// 第二个参数：成功回调
// 第三个参数：失败回调
VueRouter.prototype.push = function(location,resolve,reject){
if(resolve && reject){
originPush.call(this,location,resolve,reject);
}else{
originPush.call(this,location,()=>{},()=>{});
}
}
VueRouter.prototype.replace = function(location,resolve,reject){
if(resolve && reject){
originreplace.call(this,location,resolve,reject);
}else{
originreplace.call(this,location,()=>{},()=>{});
}
}

8 Home首页组件拆分

8.1 三级联动组件(导航栏)

因为在多处都使用到了，所有注册为全局组件
好处：只要注册一次，可以在项目任意地方使用
方法：在main.js引入并使用 Vue.component()应用

9 数据请求

经过postman工具进行接口测试
如果请求成功，会返回200字段

10 axios二次封装

10.1 为什么进行二次封装

为了添加请求拦截器(可以在请求之前处理一些业务)和响应拦截器(当服务器返回以后，处理一些事情)

10.2 进行封装

在src文件夹下创建api文件夹，在request.js中进行配置
可以参考git或axios文档

11 接口统一管理

项目很小：可以在组件的生命周期函数中发请求
项目大：则需要进行接口统一管理

在api文件夹下的index.js中进行配置

12 解决跨域问题

在vue.config.js中进行配置

module.exports = defineConfig({
// 代理跨域问题
// 只要路径中有/api字段,就会自动向 target代表的服务器发送请求
devServer:{
proxy:{
'/api':{
target:'http://gmall-h5-api.atguigu.cn'
}
}
}
})

13 nprogress进度条的使用（在发送请求时显示进度条，发送成功后进度条消失）

1. 安装nprogress插件 cnpm i nprogress
2. 在请求和响应拦截器中使用

14 vuex 的使用(用于集中管理项目中组件公用的数据)

1. 在src目录下创建store文件夹
2. 配置vuex
3. 在main.js中引入并使用store
   vuex 模块化开发

15 动态展示三级联动数据

1. 在三级联动模块生命周期函数mounted中让vuex发送请求，获取到数据
2. 在vuex配置项中配置对应的方法
3. 在三级联动模块中通过计算属性使用…mapstate获取数据
4. 将数据展示到页面（v-for）

16 防抖和节流

节流：在规定的间隔时间内不会重复触发回调，只有大于间隔时间才会触发回调，把频繁触发变为少量触发
防抖：短时间内快速触发多次，只会执行最后一次
Lodash插件：里面封装了函数的防抖与节流业务（使用的是 闭包+延迟器）

防抖函数 _.debounce
节流函数 _.throttle

17 三级联动跳转search与传参

点击三级联动选项的时候，会跳转到search模块
会把选中的产品（名字、ID）在跳转的时候，进行传递
如果给每个a标签绑定事件，会绑定很多个事件，可以利用 事件委派，给父元素绑定，这样只需要绑定一次

一些问题：1. 点击的不一定是a标签,2. 如何确定点击的是一二三级哪级分类标签，3. 如何获取参数

使用自定义属性，分别为商品id和name，使用 dataset属性 获取自定义属性的值，如果自定义属性为空，则不是a标签

18 search页面的typeNav栏显示隐藏

19 模拟数据 mock (模拟轮播图和floor组件中的数据)

需要用到一个插件 mock.js
cnpm i mockjs
使用步骤

1. 在src目录下创建mock文件夹
2. 准备JSON数据
3. 把mock数据需要的图片放置到public文件夹中，否则会出现路径错误
4. 创建mockServe.js文件来实现模拟数据
5. mockServe.js文件在mian.js中引入
6. 使用数据的时候和调用 ajax请求一样的使用方法

20 banner轮播图

1. 使用swiper，先安装 npm install swiper@5
2. 在main.js 和 组件 中分别引入swiper
3. 创建 swiper 实例时，必须要等页面结构加载完毕，但是banner数据是通过ajax异步向服务器发送数据，所以直接在mounted中创建实例会无效
4. 解决方法：(1)添加延时器setTimeout，(2)使用watch+nextTick解决(完美解决方案)

21 floor组件

由于floor组件有多个，且数据不同，所以在其父组件home上发送请求获取数据，再通过 props 属性传递不同的数据，然后将数据展示在页面上

22 将轮播图拆分为一个全局组件 Carousel

23 search模块开发（一般模块开发基本流程）

1. 静态页面 + 静态组件拆分
2. 发请求（API）
3. vuex
4. 组件获取仓库数据，动态展示数据

24 vuex中getters的使用

getters 可以理解为计算属性，主要是简化仓库中的数据
比如 state有个school对象包含了学生和老师还有学校信息，getters可以把其中某一个学生信息提取出来变成一个新的变量
在使用数据的时候就不需要再 school.student[0].name ,就可以直接 luyu.name

25 search模块根据不同的参数获取数据展示

1. 在 beforeMount 生命周期函数中获取到参数
2. 在 mounted 生命周期函数中根据参数发送请求（到此，只能发送一次，不能重复发送请求）
3. 由于$route中的params和query参数会随发送请求携带的参数的变化而变化，所以可以通过监听$route来实现重复发送请求(watch)

26 面包屑 bread

删除分类的面包屑
删除关键字的面包屑，同时清空搜索栏（全局事件总线$bus）

27 search组件点击品牌，会搜索对应品牌商品

使用自定义事件，实现子组件给父组件传递数据，父组件获得数据之后，再发送请求

28 平台售卖属性

29 分页器

1. 先变为全局组件，因为会有很多地方需要用到
2. 知道分页器展示，需要哪些数据(条件)

(1) 需要知道当前是第几页 pageNo表示当前页数
(2) 需要知道每一页需要展示多少条数据 pageSize表示每一页数据条数
(3) 需要知道整个分页器总数据条数 total表示总数据条数
(4) 需要知道分页器连续页码的个数 一般为 5或 7个 用 continues表示

3. 计算总页数、连续页码的起始结束数字、鼠标点击之后当前页码改变
4. 通过自定义事件把当前页码传给父组件
5. 发送请求给服务器，获取数据，显示当前页码对应的数据
6. 分页器的鼠标点击样式（当前页码样式）

30 商品详情页

1. 给search模块的商品图片嵌套route-link标签，并携带对应的id属性(params)
2. 跳转之后，要自动滚动到页面最上面。（vue官网 ——> vue-router ——> 滚动行为）
3. 写api接口，向服务器请求数据
4. 建立vuex小仓库detail 存储数据

31 商品详情页轮播图与放大镜

1. 父组件向子组件传递参数(props)
2. 子组件展示数据
3. 轮播图
4. 放大镜效果

32 商品数量

1. 点击±按钮会分别加减数量，数量最少为1
2. 用户可以自定义输入数量

但是输入的数量有几种异常情况：小数、负数、非数组
把异常情况的数量都设置为 1

33 加入购物车操作

点击加入购物车按钮之后会向服务器发送请求

该请求用于将产品添加到数据库中(通知服务器)
不会返回数据，成功会返回 200 失败返回失败信息(这里涉及到promise知识)
如果请求成功，跳转到 添加商品成功 页面
失败，则提示错误信息

34 添加商品成功 页面

1. 静态页面、路由配置
2. 路由传参、页面渲染数据
3. 查看商品详情(携带ID进行路由跳转)
4. 去购物车结算(跳转购物车页面)

35 购物车 页面

1. 静态页面、路由配置
2. 向服务器请求数据，vuex存储数据，页面展示数据

直接发请求的时候，是获取不到购物车里面的数据的，因为服务器不知道发请求的是谁
这里要用到 uuid

1. 创建 utils 文件夹(常用于放置一些功能模块，如正则表达式、临时身份等)
2. 在utails文件中创建uuid_token.js用于检测本地存储中是否有uuid_token，有则用，没有则创建一个
3. 在vuex仓库中存储uuid_token
4. 在发送请求的请求头里面添加uuid_token，这样每次发送请求都会携带uuid_token (在/api/request.js文件中引入store仓库，获取到uuid_token值，然后在请求拦截器中添加请求头)
5. 这样就能获取购物车数据了
6. 将购物车数据展示到页面上
7. 产品数量的修改，小计、总价的计算，全选按钮，删除按钮

36 注册登录 页面

1.api请求
2.表单验证
3.token

登录成功之后，后台为了区分用户，会下发token(令牌：唯一标识符
带着token找服务器请求用户信息进行展示

37 项目打包上线

1. 项目打包后，代码都是经过压缩加密的，如果运行时包错，无法得知是哪里报错，有了map就可以知道是哪报错，如果不需要的话就可以去掉，在vue.config.js中添加 productionSourceMap:false,即可

最后

以上就是难过香菇为你收集整理的Vue商城项目开发笔记（自用）的全部内容，希望文章能够帮你解决Vue商城项目开发笔记（自用）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。