# vue-cms

**Repository Path**: joucwj/vue-cms

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-01-07
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 这是我的第一个 vue 项目

# 主流开源协议之间有何异同？（https://www.zhihu.com/question/19568896）

# 使用 MUI 的顶部滑动组件的坑：
1. 实例代码要记得 去掉 mui-fullscreen
```
<div id="slider" class="mui-slider">
  <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
    <div class="mui-scroll">
      <a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
        推荐
      </a>
      <a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
        热点
      </a>
      <a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
        北京
      </a>
      <a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
        社会
      </a>
      <a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
        娱乐
      </a>
      <a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
        科技
      </a>
    </div>
  </div>
</div>
```
2. 要记得 初始化组件，导入 mui.js 文件
```
mui('.mui-scroll-wrapper').scroll({
	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
```
3. 接着就会报错：Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode
  + 解决方法有两个：
    1. 到mui.js文件中去修改，不使用 'caller', 'callee', and 'arguments'，但是不现实。 
    2. webpack 在打包 bundle.js 文件时会默认使用严格模式，所以只要不适用严格模式就OK。 
  + 选用方案2： 
    1. cnpm i -D babel-plugin-transform-remove-strict-mode
    2. 到 .bablerc 文件下的 plugins 添加上 "transform-remove-strict-mode"
    当你看到这里的时候，你以为你解决了这个 取消严格模式 的坑了吗？
    不，你没有！因为本案例用的是 webpack4.x 配 babel8.x 版本的，所以以上方案是失败的！！！
    真正的 解决方法在这里 ：
    ++ 在 .babelrc 文件里，添加以下代码：
    ``` 
    {
      ...
      "ignore": ["./src/lib/mui/js/*.js"]
    }
    ```
4. 刚进入 图片分享 页面时，滑动条无法正常工作。要初始化 滑动条，必须等到 DOM 元素加载完毕，所以要在 mounted 钩子函数中执行 初始化滑动条代码
5. 滑动时，会报错误：[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
  + 通过给 css 样式加以下代码 
  ```
  * {
    touch-action: pan-y;
  }
  ```
6. 当填完以上坑时，就会发现点击底部的 tabbar 也会跟 步骤5 报同样的错误
  + 通过给 tabbar 里面的类 mui-control-item 重新定义类名 和 样式来解决