# vue购物车

**Repository Path**: web-abin/vue_demo

## Basic Information

- **Project Name**: vue购物车
- **Description**: vue初学时写的购物车
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-02-06
- **Last Updated**: 2023-01-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 王俊彬的vueapp

> A Vue.js project
// --host 内网ip(192.168.0.105)同wifi环境手机运行
//如果报错：Module build failed: Error: Cannot find module 'node-sass
+ npm install -g cnpm --registry=https://registry.npm.taobao.org ，从淘宝镜像那下载，然后cnpm下载成功。
+ 最后输入cnpm install node-sass --save

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
```
## 用（传统方式）命令行把修改后的代码上传到码云
1. git add.
2. git commit -m "提交信息"
3. git push

## 制作app首页
1. 头部Header区域用mint-ui中的header组件
2. 底部tabbar区域用的是MUI中的tabbar.html
3. 中间放置一个router-view展示路由匹配到的组件

## 改造tabbar为router-link
## 设置路由高亮显示
## 点击tabbar中的路由链接，展示对应的路由组件
## 制作首页轮播图布局
## 加载首页轮播图数据
1. 使用vue-resource获取数据（安装vue-resource：$ cnpm i vue-resource -S）
2. 使用vue-resource的this.$http.get获取数据
3. 把获取的数据保存到data上
4. 使用v-for循环渲染轮播图每个item项

## 制作六宫格区域
## 制作新闻资讯页面
1. 使用mui中的media-list
2. 使用axios获取数据
3. 渲染真实数据

## 实现跳转到新闻详情页面
## 实现新闻详情页面布局和数据渲染

## 单独封装一个comment.vue的评论子组件
1. 先创建一个单独的comment.vue的组件模板
2. 在需要使用comment组件的页面。导入此组件
3. 父组件中，使用‘components’属性，将导入的comment组件注册为自己的子组件
4. 将注册子组件时候的注册名称，以标签形式引入

## 获取所有的评论数据渲染到页面上
## 实现点击加载更多评论的功能
1. 绑定点击事件
2. 点击加载更多，让pageindex+1，然后重新调用this.getComments（）方法，重新获取最新一页的新闻数据
3. 为了防止新数据覆盖老数据，在点击加载更多时，每当获取到新数据，应该让老数据调用数组的concat方法，拼接上新数组

## 发表评论
1. 把文本框设置双向绑定
2. 为发表按钮绑定一个事件
3. 校验内容是否为空，若为空，则Toast提示不能为空
4. 通过axios发送请求，把评论内容提交给服务器
5. 当发表成功后，刷新评论列表

## 改造图片分享的路由相关
## 绘制图片列表组件页面结构并美化样式
1. 制作顶部滑动条
2. 制作底部图片列表
### 制作顶部滑动条的坑
1. 需要借助于mui的tab-top-webview-main.html
2. 需要把slider区域的mui-fullscreen类去掉
3. 滑动条无法触发滑动，通过查看官方文档，发现这是js组件，需要被初始化一下
 + 导入mui.js
 + 调用官方提供的方式去初始化：
 ```
 mui('.mui-scroll-wrapper').scroll({
	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
 });
 ```
4. 我们在初始化滑动条初始化的时候，导入了mui的js，但是控制台报错
 + 解决：把webpack打包时候的严格模式去掉
5. 刚进入图片分享页面的时候，滑动条无法正常工作
 + 解决：把初始化滑动条的代码搬到mounted的生命周期函数中

### 制作图片列表区域
1. 图片列表使用mint-ui提供的组件‘lazy-load’实现懒加载
2. 根据官方文档使用懒加载组件
3. 渲染图片列表数据

### 实现了图片列表的懒加载改造和样式美化

## 实现了点击图片跳转到图片详情页面
1. 在改在li成router-link的时候，需要用tag属性指定要渲染为哪种元素

## 实现详情页面的布局和美化，同时获取数据渲染页面

## 实现图片详情中缩略图的功能
1. 使用插件vue-preview这个缩略图插件
 
## 绘制商品列表页面基本结构并美化

## 尝试在手机上进行项目的预览和测试
1. 保证自己手机和电脑在同一个wifi环境下
2. 打开项目中的package.json文件，在dev脚本中，添加一个 --host指令，把当前电脑的wifi IP地址，设置为 --host的指令值
 + 如何查看自己电脑所属wifi的IP地址：cmd命令行中输入 ipconfig ，查看 无线网 的IP地址