vue实现完整的购物车功能(包括单选全选，删除商品和结算商品功能)

首先来看看效果图

预览地址：http://xy.xxiaoyuan.top/demo/shopCart/#/

 

项目开始之前需要选安装好node跟vue和vue-cli
如果还没安装的可以看这里（mac环境下的）https://blog.csdn.net/weixin_39644462/article/details/86302579
 

1. 首先创建一个vue项目(命令行如下)

vue init webpack shopcart

然后可以一路回车或者Y

2. 创建成功后进入到shopcart目录

cd shopcart

3. 安装项目所需要的依赖

我这项目用到axios请求自己写点json模拟数据，UI框架用到饿了么的Mint-UI框架，使用less作为css预处理器

//安装axios
npm install axios --save
//安装Mint-UI_
npm install mint-ui --save
//安装less
npm install less less-loader --save-dev

好了,可以先运行项目看看

npm run dev

如果浏览器没有自动打开浏览器的话，可以自己手动在浏览器输入localhost:8080  ，或者设置/config/index.js（如下图）

默认样式效果

下面配置一下安装的依赖

配置axios 和 Mint-UI (打开/src/main.js)

配置less(在build/webpack.base.conf.js 的module.exports.module.rules 里面添加如下代码)

{
  test: /\.less$/,
  loader: 'style-loader!css-loader!less-loader'
}

为了移动端自配，将引入外部flexible.js进行适配，将flexible.js放在/static/js/目录下，然后在/src/main.js下引入

import '../static/js/flexible.js'

并在/src创建一个目录styles（mixin.less用来做计算rem尺寸,源码文章后面有）

接下来就真正的搞事情了/components/shopCart.vue

主要代码在上面，下面讲解一下主要部分

获取列表数据（因为购物车列表数据是通过自己模拟json数据来实现的，模拟的数据放在/static/data/data.json）

{
	"list": [
		{
			"classify_id": 1,
			"goods_img": "//gd4.alicdn.com/imgextra/i2/726671139/O1CN01UsYSFL1KHhdcGkTfo_!!726671139.jpg_400x400.jpg",
			"goods_name": "连衣裙ins夏chic2019新款很仙的法国小众吊带网纱超仙a字裙两件套",
			"goods_id": 61,
			"shop_name": "恋上公主",
			"sales_num": 1,
			"price": "105.00"
		},
		{
			"classify_id": 2,
			"goods_img": "//gd3.alicdn.com/imgextra/i3/726671139/O1CN01P4vwli1KHhdYOfl9j_!!726671139.jpg_400x400.jpg",
			"goods_name": "防晒衬衫女长袖薄款设计感小众百搭外穿2019新款超薄透气雪纺衬衣",
			"goods_id": 62,
			"shop_name": "恋上公主",
			"sales_num": 2,
			"price": "116.00"
		},
		{
			"classify_id": 2,
			"goods_img": "//gd2.alicdn.com/imgextra/i1/726671139/O1CN010EFA6U1KHhdODcpz0_!!726671139.jpg_400x400.jpg",
			"goods_name": "2019网红时尚连衣裙很仙的夏款网纱小清新温柔波点吊带T恤裙套装",
			"goods_id": 63,
			"shop_name": "恋上公主",
			"sales_num": 3,
			"price": "129.00"
		},
		{
			"classify_id": 4,
			"goods_img": "//gd4.alicdn.com/imgextra/i4/726671139/O1CN01nonA501KHhctJZ7Tk_!!726671139.jpg_400x400.jpg",
			"goods_name": "新款衬衫女时尚洋气超仙设计感小众2019长袖收腰雪纺韩版chic衬衣",
			"goods_id": 64,
			"shop_name": "恋上公主",
			"sales_num": 3,
			"price": "69.00"
		}
	]
}

然后通过axios的get请求获取到数据(在methods钩子里写getList方法获取，在mounted钩子初始化)

数量加和数量减的方法

选择商品（单选）

下面代码有注释，应该是比较详细的了

全选

求总价（查找列表，如果存在checked == true，则将其价格剩余数量，下面用到了$setNum.accMul(int1,int2),这个方法是自己封装的一个乘法方法，因为在js中的浮点类型相乘并不能完全得到准确的数据，会存在一定的误差，该方法在/src/assets/js/setDec.js里）

删除商品

点击结算(可以在控制台查看，选中的商品)

最后打包,修改/config/index.js文件下的module.exports下的build的assetsPublicPath，设置为'./'

最后预览地址：http://xy.xxiaoyuan.top/demo/shopCart/#/

源码下载地址在gitHud： https://github.com/YanGo520/shopCart(源码好像没有修改打包后的相对静态资源文件,可以参考上面修改assetsPublicPath为 './' )

码云地址：https://gitee.com/yango520/shopCart

最后允许我打个小广告(虽然很多猿兄没女朋友这是种生物[/滑稽脸])：恋上公主(里面的衣服贼漂亮)