# vueProject

**Repository Path**: dreamman123/vueProject

## Basic Information

- **Project Name**: vueProject
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-09-04
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-project

> A Vue.js project
test git 1111111
## 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

# run unit tests
npm run unit

# run all tests
npm test
```

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

#新闻界面
1.画界面
2.获取数据
3.把数据渲染到页面上

##1.新闻资讯详情 路由链接的改造
1.1改造新闻链接 router-link
1.2新建一个新闻详情的组件
1.3在index.js导入组件

2.绘制新闻资讯详情页面
3.请求数据 要有一个id参数，这个id在跳转的时候就拿过来，才能拿到对应的详情页面
4.把数据渲染到页面上

#子组件的导入，和注册
如果某一个组件要使用某个子组件那么？

如果某个组件要用到另一个子组件，那么就在父组件里面导入子组件
import  A from B
2.在父组件的components里面注册一下子组件 components:{
	'my-com':com
}
3.将子组件的名称当做标签就可以引用子组件

#获取评论的数据，并渲染到页面上

1.要获取新闻资讯的id传给子组件commit，就是父组件向子组件传值
2.子组件拿到父组件的id时，在props中定义一下就能使用id了，pageIndex保存在data中，不能一直获取第一页的数据
3.在methods里面定义一个获取新闻资讯的方法
4.这个方法在created函数中调用

#点击加载更多获取，其余的数据
1.给加载更多绑定一个点击事件，点击事件每执行一次，我们要获取其它页面的数据，就让pageIndex加1
2.然后在调用次发起获取评论的数据的方法，且不能覆盖原有的数据，那么就使用，数组的contact方法，让旧数据拼接新数据。

#完成发表评论
1.利用v-model获取评论的内容
2.把评论的内容发送 post请求发送到数据库
3.重新获取评论的数据，并渲染到页面上

#完成图片分享的滚动条
在photoList.vue导入mui的js文件
1.利用mui框架
2.添加好代码片段发现无法滚动
	经过查看官方文档发现，注意若使用区域滚动组件，需手动初始化scroll控件 ，
	mui('.mui-scroll-wrapper').scroll({
	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
这是js的代码，需要引入mui的js文件，同时这个js控件在初始化的时候，利用了类选择器，就是当页面上有这个元素的时候，才能选中'.mui-scroll-wrapper',所以应该在mounted钩子函数调用它，因为mounted函数，页面上已经渲染好DOM结构，且数据已经加载到页面上了

1.运行后出现了这个错误
TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
typeerror:不能在严格模式函数或对其调用的参数对象上访问“caller”、“callee”和“arguments”属性
解决办法 是解除严格模式
2.在vue 项目中引入 mui ，报错'mui' is not defined
在//photoList.vue组件中引入mui的js包
import  mui from'../../lib/mui-master/dist/js/mui.min.js'
在webpack.base.conf.js加入
externals: {

  mui: 'mui'

}
#获取图片分类的数据
获取数据成功后，但是发现图片分享的滚动条的样式不对劲

每个元素都有 mui-active
实际上v-for循环的时候，只有全部默认被选中，按条件添加'mui-active'这个类
绑定class属性改变样式
:class="['mui-control-item',item.id==0?'mui-active':'']

#实现图片数据的懒加载
1.查看mint-ui文档的懒加载来使用懒加载技术 lazy-load
2.请求获取图片数据
完成获取请求图片资源的函数 getPhotoList(id)
	默认，进入的图片分享页面时，获取'全部分类'下的图片
	created(getPhotoList(0))
	点击不同的分类要获取对应的图片数据
	v-lazy放图片的url地址
	<ul>
		  <li v-for="item in imagesList" :key="item.id">
		    <img v-lazy="item.img_url">
			</li>
		</ul>
2.2图片样式
	1.没有懒加载的圈圈
	2.图片的样式不对
	图片要全屏展示
	图片占了顶部滚动条的位置，图片覆盖了顶部的导航和滚动条 z-index
2.3图片上的文字说明
 li相对定位，在写一个div里面包含文字说明，绝对定位
 样式：文字颜色，字体
 div的高度都是固定的
#解决bug的思路
如果引入某一个插件出问题，先看官方文档，在百度

如果引入的js的插件，但是没导入js的包
如果引入css的插件，没导入css的包

如果之前没有报错，但是写了一些代码突然报错了
那么退回前一步，看是那一步出了问题，或者注释部分代码，来找出bug

细节问题
如果使用通过类或者id选择器，选中页面上某个元素，但是如果页面还没有加载好，就选中这个元素对其做一些操作，这样是不会其作用的

##完成图片详情页面
1.实现图片到图片详情的跳转
 1.1改造图片的路由链接
 1.2建立图片详情的组件
 1.3在index.js进行路由匹配
2实现图片详情页面的html和css
 2.1获取数据
 2.2评论子组件的加载
 3.缩略图 vue-preview
 3.1查看官方文档如何使用vue-preview
 3.2获取缩略图的数据
 注意：获取数据的数组的每一个对象，要有width，和height

 ##商品列表
 经典的两列布局，弹性盒子，不换行，space-between
 画每一个item
 获取每一个商品item的数据

 ##商品详情
  采用编程式导航 this.$router.push('path'),实现页面跳转到商品详情
  使用mui 的card 完成卡片式的布局
  抽离轮播组件
  <!-- 将轮播图抽离为组件后 发现首页的轮播图正常显示，但是商品详情的轮播图图片长宽不成比例
	分析：首页的轮播图的图片 width：100%，height：100%；
	但是商品详情中，图片被拉长了，我们希望width是自适应，而height是100%；
	给其<swipper></swipper>轮播图添加一个属性 :isfull="false"width是自适应，而height是100%；
	：isfull="true" width和height都是100%
  -->
  在商品详情的页面有一个购买数量的box，在购物车也有，就把它做成一个组件

  #完成图文详情和评论的路由导航
  完成图文详情页面
  完成评论页面

  ##商品详情的小球动画
  1.先画一个小球
  遇到了点击第一次小球的路径是加入购物车按钮到到购物车的徽标，点击第二次，小球的路径反之，
  小球的动画钩子函数
  beforeEnter  transform:translateX(0px,0px)
  Enter 设置移动的距离
  afterEnter  小球消失
  每次进行动画都会这样，从befbeforeEnter 小球要回到原位，
  Enter  设置小球移动的相对距离，最后小球消失

  ##把numbox.vue的数据传入goodsInfo.vue 点击加入购物车的时候传
  子组件向父组件传值 事件绑定的方法 父组件向子组件传一个方法，子组件调用这个方法，子组件通过this.$emit('name'，c)c是子组件要向父组件传递的数据

  ##当点击加入购物车的时候，把商品的信息传入到 store 
  每个商品的信息 {id:商品id，num：商品加入购物车的数量，商品的价格，商品是否被选中}
  ## 把数据存入loacalstorage

  使用localstorage当做暂时的数据库，当当网页关闭的时候，就消失了吗？
  ##在设置numbox的最大值，使用numbox的设置最大值的js方法时，在
  mounted生命周期函数里，对numbox的最大值设置，通过
  父子组件传值，把库存 ：max=stock_quantity 传给numbox组件，
mui('.mui-numbox').numbox().setOption('max',stock_quantity);来设置，但是获取的max值一直是undefined

  先获取到库存量，库存数量是异步请求回来的，在父组件的created发起请求，但是在numbox的mounted函数中检测到stock_quantity的值，是undefined，可能这个时候，数据还没有请求回来，所以值是undefined,最后使用watch监视这个max，如果max发生改变，变成数字，在进行设置numbox的最大值
<!-- to do -->
  ##加入购物车这个按钮，如果store里面的商品的数量= 库存，就让加入购物车按钮不起作用 ****
  <!-- 购物车页面 -->
 1.已经绘制好购物车页面，并请求数据，现在要把购物车的数据
  1.1 商品数量从store的cart的商品数量获取，某个商品 id 对应的数量
  1.2完成删除商品 
  给删除的click添加一个点击事件
  删除store的cart 删除localStorage里面的数据
  1.3同步商品的被选中状态