# Vue

**Repository Path**: tnt_git/Vue

## Basic Information

- **Project Name**: Vue
- **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-02-17
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 这是基于MintUI 和 MUI 的项目

> MintUI

## 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
```

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).

### 最新访问接口
http://www.liulongbin.top:3005/api/getlunbo


## 用（传统方式）命令行把修改过的代码上传到码云
1. git add .
2. git commint -m "提交信息"
3. git push


## 新闻资讯 页面制作
1. 绘制界面， 使用 MUI 中的 media-list.html
2. 使用 axios 获取数据
3. 渲染真实数据

## 实现 新闻资讯列表 点击跳转到新闻详情
1. 把列表中的每一项改造为 router-link，同时在跳转的时候应该提供唯一Id
2. 创建详情组件NewsInfo.vue
3. 在路由模块中将 详情的路由地址和组件页面对应起来

## 单独封装一个 comment.vue 评论子组件
1. 先创建一个单独的 comment.vue 组件模板
2. 在需要使用 comment 组件的页面中，先手动导入 comment 组件
    + `import comment from './comment.vue'`
3. 在父组件中，使用 components 属性，将刚刚导入的 comment 组件，注册为自己的子组件
4. 将注册的子组件，已标签形式，在页面上引用即可


### 制作顶部滑动条的坑们
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报错:
    Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
    + 经过我们合理的推测，觉得可能是mui.js中用到了 'caller','callee',and 'arguments'东西，但是webpack打包好的bundle.js
    中，默认是启用严格模式的，两者冲突了；
    + 两种解决方案：1. 去掉mui.js中的方法，这个不现实。2. 把webpack的严格模式去掉
    + 最终，我们选择了 plan B 移除严格模式：使用这个插件
    babel-plugin-transform-remove-strict-mode


### 缩略图插件
1. vue-preview
一个Vue集成PhotoSwipe图片预览插件
https://www.npmjs.com/package/vue-preview


### 购物车新增数量时，小球动画-贝斯曲线，
http://cubic-bezier.com/#.4,-0.3,1,.68

### 获取小球/徽标相对于视窗的位置，使用原生的Js方法
rectObject = object.getBoundingClientRect();
返回值类型：TextRectangle对象，每个矩形具有四个整数性质（ 上， 右 ， 下，和左 ）表示的坐标的矩形，以像素为单位。
rectObject.top：元素上边到视窗上边的距离;
rectObject.right：元素右边到视窗左边的距离;
rectObject.bottom：元素下边到视窗上边的距离;
rectObject.left：元素左边到视窗左边的距离;