# vue-cc

**Repository Path**: denghuoan/vue-cc

## Basic Information

- **Project Name**: vue-cc
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-04-07
- **Last Updated**: 2021-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


## 1. App.vue 组件的基本设置

### 1.1 header

>  头部的固定导航栏使用 `Mint-UI` 的 `Header` 组件；

- 按需导入模块
- 引用

### 1.2 底部Tabbar

1. 底部的页签使用 `mui` 的 `tabbar`;

2. 先把 扩展图标的 css 样式和扩展字体库 ttf 文件，拷贝到 项目中

3. 按需导入

   ```js
   // 引入Tabbar模块
   import './lib/mui/css/mui.min.css'
   import './lib/mui/css/icons-extra.css'
   import './lib/mui/fonts/mui-icons-extra.ttf'
   ```

4. 引用

   - 将底部的页签，改造成 `router-link` 来实现单页面的切换；
   - 要在中间区域放置一个` router-view`来展示路由匹配到的组件

5. 设置路由

6. Tab Bar 路由激活时高亮  `linkActiveClass: 'mui-active'`

## 2. 底部页签的切换动画

- 将`router-view`用`transition`包起来
- 设置动画
  - 注意在 `.v-leave-to `中设置`position: absolute;`
  - `translate(-100%); `和`translate(100%);`

## 3. Home页

### 3.1 轮播图

####  使用 vue-resource获取数据

- 安装`npm install vue-source`
- 引入

```js
import Vueresource from 'vue-resource'
Vue.use(Vueresource)
```
####   Home.vue文件

- 遍历 : `v-for="item in LunboList" :key="item.id"`
- img的src一定要加`: ` ==>  ` :src `
- 引入Toast  :  ` import { Toast } from 'mint-ui'`
- 将数据保存在data中 `this.LunboList = result.body.message`

### 3.2 六宫格

- 引入MUI中的grid(九宫格)代码
- 修改样式
## 4. 新闻资讯

### 4.1 改造路由链接

- `a` -> `router-link` to `/home/newslist`
- 创建vue组件
- 在router.js中引入组件

### 4.2 新闻列表页面

#### - 绘制页面

- 使用MUI中的media-list
- h1-> 14px  p -> (手机端 12px最合适)
- `dispaly:flex`   `justify-content:space-between`

#### - vue.resource获取数据

- 设置请求的根目录

  ```js
  Vue.http.options.root = 'http://www.liulongbin.top:3005';
  ```

- 发送请求

  > 注意:Note that for the root option to work, the path of the request must be relative. This will use this the root option: `Vue.http.get('someUrl')` while this will not: `Vue.http.get('/someUrl')`

  ```
  this.$http.get('api/getnewslist').then()
  ```

- 将数据存放到数组中

- 在created中调用

#### - 渲染页面

- `v-for`  ` :key `
- `:src`

### 4.3 格式化时间

> javaScript日期处理类库:[Moment.js](http://momentjs.cn/)

- 安装 `npm i moment`

- 引入 ` moment`

- 定义全局的过滤器

  ```js
  //Moment.js
  import moment from 'moment'
  //定义全局的过滤器
  Vue.filter('dateFormat',function(dateStr){
      return moment().format('YYYY-MM-DD HH:mm:ss')
  })
  ```

  ​

### 4.4 新闻详情页面

- 路由传参
  - 路径 :　`<router-link :to="'/home/newslist/newsInfo/'+ item.id">`
  - 路由 : `  {path:'/home/newslist/newsInfo/:newid',component:newsInfo},`
  - 获取参数 :　`id:this.$route.params.id`
- 绘制页面 -> 获取数据 -> 渲染页面

## 5. 单独封装评论子组件

### 5.1 创建组件


- 导入
- 注册`components:{}`
- 写入页面
- 样式

  - button 幽灵: plain



### 5.2 获取数据

  - 父向子传值 `:id=this.id `   `props:["id"]`
  - 默认展示第一页  `pageIndex:1 `
  - 第` i+1`楼


### 5.3 加载更多

  - 注册点击事件

  - pageIndex++

  - 每当获取新评论数据的时候，不要把老数据清空覆盖，而是应该以老数据，拼接上新数据

         ```js 

         ```
    this.comments = this.comments.concat(result.body.message)
             ```


### 5.4 发表评论 

  - 文本框双向数据绑定

  - 校验评论内容是否为空

- 发送请求

  - 全局设置post的表单数据格式 

    - ```js
      this.$http.post(
        'api/postcomment/'+this.id, 
        {content:this.content},
        {emulateJSON:true})
       .then()
      ```

    - ```js
      //Vue.http.options.emulateJSON = true;  //全局设置MIME类型
      this.$http.post(
      	'api/postcomment/'+this.id, 
      	{content:this.content})
      .then()
      ```

  - 拼接评论对象,用unshift添加到数组


## 6. 图片分享

### 6.1 顶部滑动条

- 使用MUI
- 去掉` mui-fullscreen`
- 初始化

  - 先导入 mui 的JS文件:` import mui from '../../../lib/mui/js/mui.min.js'`
  - 初始化

##### Bug1:严格模式问题

- 导入的mui.js会报错

> Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
>
> “调用者”、“被调用者”和“参数”属性可能不会在严格模式函数或调用它们的参数对象上被访问

- 原因: webpack打包好的bundle.js默认是启用严格模式的,mui.js中用到了"caller","callee","arguments"的东西,两者冲突了
- 解决: 禁用webpack打包时候的严格模式

> 移出严格模式: [babel-plugin-transform-remove-strict-mode](https://github.com/genify/babel-plugin-transform-remove-strict-mode)
>
> - 安装`npm install babel-plugin-transform-remove-strict-mode`
> - .babelrc文件设置:   ` "plugins": ["transform-remove-strict-mode"]`

##### Bug2:无法滑动问题

> `tab-top-webview-main`组件第一次显示到页面中的时候，无法被滑动
>
> 解决: 在 组件的 `mounted` 事件钩子中，注册 mui 的滚动事件：

```
 	mounted() {
    	// 需要在组件的 mounted 事件钩子中，注册 mui 的 scroll 滚动事件
        mui('.mui-scroll-wrapper').scroll({
          deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        });
  	}
```

##### Bug3:滑动时报警告问题

- 报错

> Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

- 原因：（是chrome为了提高页面的滑动流畅度而新折腾出来的一个东西）

> http://www.cnblogs.com/pearl07/p/6589114.html
>
> https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action

- 解决: 可以加上* { touch-action: pan-y; } 这句样式去掉。

##### Bug4:tabbar无法切换 问题

> 和 App.vue 中的 `router-link` 身上的类名 `mui-tab-item` 存在兼容性问题，导致tab栏失效，可以把`mui-tab-item`改名为`mui-tab-item1`，并复制相关的类样式，来解决这个问题；

#####  获取图片分类列表

- ` this.imgcategory.unshift(category)`
- ` :class="['mui-control-item', item.id == 0 ? 'mui-active':'']"`

### 6.2  图片列表

##### 图片懒加载

- mint-ui  中的 lazy-load

##### 获取图片

- 默认加载分类id = 0的图片
- 点击时获取图片

### 6.3 图片详情 

页面及路由

插入评论组件

#### vue-preview

> [vue-preview](https://www.npmjs.com/package/vue-preview/v/1.0.5)

  - 装包`npm i vue-preview@1.0.5`(老版本)

  - 每个图片数据中必须有w和h属性

    ```
    this.thumimages.forEach(item=>{
        item.w = 600,
        item.h = 400
    }
    ```
## 7. 商品购买

### 7.1 商品列表

### 7.2 商品详情

#### 使用MUI卡片视图

- 抽离轮播图为组件
  - 父向子传数据

  - :src问题解决:

    ```js
    result.body.message.forEach(item=>{
        item.img = item.src
    })
    ```

  - Vue绑定class `:class="{'full':isFull}"`

- 购买数量组件

  - 单独封装一个子组件

  - 使用mui-->numbox

  - 初始化数字选择框钻组件

    - ```js
      import mui from '../../lib/mui/js/mui.min.js'
      export default {
          mounted(){
            //mounted是实例创建期间的最后一个生命周期函数
            //已经渲染到页面上了 
              mui('.mui-numbox').numbox()
          }
      }
      ```

- 渲染数据

### 7.3 图文介绍

- 编程式导航跳转`goDesc(id){this.$router.push()}`


- 图片问题
  - 去掉scoped
  - `width:100%`

### 7.4 商品评论

​	组件中引用comment组件
### 7.5 小球动画

- 半场动画,需要用钩子函数

#### 小球优化思路
 - 1. 计算小球初始位置
 - 2. 获取徽标在页面中的位置
 - 3. 计算距离


### 7.6 加入购物车

#### 设置最大值

- 父向子传最大值

- 通过watch属性监听max

#### 父获取子的value值

## 8. Vuex

> vuex是为了保存组件之间共享数据而诞生的,是一个全局的共享数据存储区域,就相当于是一个数据的仓库

- 安装`npm i vuex`

- 创建实例

- 将vuex实例挂载到vue实例上


## 9. 加入购物车

### 9.1 点击事件

### 9.2 徽标数值自动更新

### 9.3 实现本地存储

## 10.  购物车商品列表

### 绘制页面

### 请求数据

### 初始化数量值

### 商品数量同步到store中

### 删除商品

### 选中状态

#### 1. store-->页面

#### 2. 页面--> store

### 计算总价和数量
  ​
## 11 返回按钮

- 点击按钮-->编程式导航`this.$router.go(-1)`

- 首页不显示返回

  - 监听地址 `$route.path`

  - 刷新判断是否是首页