vue 和 react 常用包（插件、组件 或 工具)

vue 和 react  都可以使用的包（只是 纯 js 功能的包）

1、qs ： https://blog.csdn.net/sansan_7957/article/details/82227040

　　　　a、qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。

　　　　b、axios 包 携带 了qs 包的，所以安装了axios 包，可以直接使用引入 qs 包使用，不需要再安装 qs包

2、lib-flexible：下面 vue 有介绍

3、

---

1、Vue-cli项目中 mockjs + axios实现前后端分离代码demo（清晰易懂）   ：   https://blog.csdn.net/zhouzuoluo/article/details/80675662

2、vue的 axios 使用    参考： https://blog.csdn.net/qq_33401924/article/details/79612393                       （axios 的读音：哎克 C 欧斯）

　　　a、npm install axios -S        #直接下载axios组件，下载完毕后axios.js就存放在node_modules\axios\dist中

　　　b、引入包

import axios from 'axios'

　　   c、由于axios不是vue的插件，不能使用Vue.use().所以，要通过控制原型链的方式来引入。 （如果不是使用vue对象下的ajax请求，这一步是可以不用的）

Vue.prototype.$http = axios  //这里是给Vue对象，扩展一个 ajax 请求的方法。如果直接使用axios，可以不用给Vue做扩展，即这一步可以不用写。

　　 这样，在项目中就可以使用axios的方法了。

this.$http.get('https://yesno.wtf/api').then(function (response) {
       console.log(response.data)
      })
        .catch(function (error) {
          console.log(error)
        })

　　另：axios的API 参考   https://www.kancloud.cn/yunye/axios/234845  （文档中是直接使用axios对象的方法的，而没有将这个方法继承给Vue对象）

3、vue常用插件 （包括UI组件库以及一些js库）： https://blog.csdn.net/hjh15827475896/article/details/78207066

　  如：UI组件库，mint-ui  ； ajax库，axios插件

4、 Vue-Occupy 组件： https://segmentfault.com/a/1190000008511102 （ 这个源码挺简单的，可以看出来是怎么实现的 ）

a、如果 v-occupy所在节点是一个放文本的标签，如

<div v-occupy="{ data: content, config:{width: '100%', height: '18px', background: '#ddd'}}"></div>

　　content是vue的data数据，如果content没有值的时候 v-occupy 起效果，在这个标签内部会生成一个div标签(div标签的大小，颜色在config中配置)。

b、 如果 v-occupy所在节点是一个图片标签，即<img>         （从源码看，其他的标签都是按文本类标签来处理的）

<img v-occupy="{data: picUrl}">

　　如果 picUrl 没有值，v-occupy  会将 img 标签的 src 属性，设置一个占位图片的值 ( http://via.placeholder.com/350x150/EEEEEE ) ；如果有值，则将src的值设置成 picUrl 的值。

5、vue自带的过度组件( transition ) ：https://www.runoob.com/vue2/vue-transitions.html

　注：transition指令必须包裹要实现过渡效果的组件的根标签，即transition指令的子标签 是非过渡元素，则里面的过渡都会生效。

6、vue-cli 项目配置 lib-flexible 和 px2rem-loader 移动端自适应解决方案 ： https://www.jianshu.com/p/a0fe0604209a   或  https://www.cnblogs.com/xiaobaibubai/p/8528744.html (配置教程)

　　 lib-flexible 的作用 是：

　　　　a、工根据显示屏的宽度，动态修改 html 标签的 font-size 值。

　　　　b、根据 手机显示屏的属性，自动生成 <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"> 标签。如果自己写了 <meta name="viewport" >标签，这个包就没有用了。

　　　　c、取消 转换rem： https://blog.csdn.net/weixin_42941619/article/details/87356942

        border: 1px solid #ccc; /* no */

7、Vue-touch的使用  ：https://blog.csdn.net/qq_39702364/article/details/80401321 （其实就 设置了一些个事件  左右滑动  和  点击tap）  或   https://blog.csdn.net/qq_39702364/article/details/80401321

　　有时候我们不止需要有返回键，也要有手势滑动切换页面的功能时，这个时候vue-touch就派上用场了。  v-touch 事件：https://blog.csdn.net/qq_17757973/article/details/78112976?locationNum=7&fps=1

　　v-touch 标签默认渲染成div，也可以自定义 ：https://blog.csdn.net/m0_38069630/article/details/78749048

8、将px转化为rem，适配移动端：https://www.cnblogs.com/xiaobaibubai/p/8528744.html  或  https://blog.csdn.net/xfmuchengxue/article/details/90379591

　　a、px2rem-loader  好像很久没有更新了

　　　　　没有办法解决，把第三方UI库的样式变小的问题。

　　b、postcss-plugin-px2rem：  https://blog.csdn.net/huahuahua__/article/details/100567742 (这个不知道能不能解决第三方库rem适配的问题)

9、vconsole 的使用 ：www.windline.info/2018/06/26/vue-clie引入vconsole调试移动端/

　　说明：最后的所有，这样引入使用就可以了，不需要设置一个没用的变量。

import './vconsole'

　　控制vconsole按钮显隐：方法1、通过设置vconsole的样式进行隐藏。 https://www.cnblogs.com/liyinSakura/p/9883777.html （基于这种方法，自己写了一个插件）

// 样式放在 app.vue 中
#__vconsole{
  display none
}
.vc-tigger{ // 隐藏的点击标签，样式可以根据实际项目设置
  height 30px;
  width 50%;
  position fixed
  bottom 0;
  left 0;
}

// require('vconsole') // vconsole 插件可以在其他地方引入，也可以在这里引入
let lastClickTime = 0
let count = 0

if (process.env.NODE_ENV === 'development'){ // development 开发环境显示vConsole
  showVConsoleElement()
} else { // 正式环境 创建触发 vcTigger 标签
  const vcTigger = document.createElement('div')
  vcTigger.classList.add('vc-tigger')
  vcTigger.onclick = toggleVc
  document.body.appendChild(vcTigger)
}

function showVConsoleElement(){
  let time = setInterval(() => {
    let vConsoleElement = document.getElementById('__vconsole')
    if (vConsoleElement) {
      clearInterval(time)
      vConsoleElement.style.display = 'block'
      console.log('dd', vConsoleElement);
    }
  }, 0);
}
function toggleShow(element){
  if (element.style.display === 'block'){
    element.style.display = 'none'
  } else {
    element.style.display = 'block'
  }
}
function toggleVc(){
  console.log('点击隐藏标签');

  const nowTime = new Date().getTime();
  if (nowTime - lastClickTime < 3000){
    count++;
  } else {
    count = 0;
  }
  lastClickTime = nowTime;
  if (count >= 10) {
    let vConsoleElement = document.getElementById('__vconsole');
    toggleShow(vConsoleElement)
    // vConsoleElement.style.display = 'block'
    count = 0;
  }
}

　　　　　　　　　　　　　方法2、调用 vconsole 的API 销毁 vConsole.destroy() ，这种方法重新创建一个vconsole，之前的记录就没有了。https://github.com/Tencent/vConsole/blob/dev/doc/public_properties_methods_CN.md

10、better-scroll 插件 ：     http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll%20%E6%98%AF%E4%BB%80%E4%B9%88（官方文档） 或  https://juejin.im/post/59b777015188257e764c716f?utm_source=gold_browser_extension

　　说明：解决移动端（已支持 PC）各种滚动场景需求的插件 。（比如 滚动到边缘会有回弹，手指停止滑动以后还会按惯性继续滚动一会，手指快速滑动时页面也会快速滚动）

　　使用教程：https://www.cnblogs.com/haonanZhang/p/6958258.html 或 https://blog.csdn.net/qq_22557797/article/details/78866328

11、inobounce 插件（必备）：https://www.cnblogs.com/haqiao/p/10417366.html

　　说明：禁止IOS H5的滑动回弹。解决了 fixed 定位失效的问题。

13、qrcode ：js生成二维码。https://www.cnblogs.com/cbp-jltx/p/9197657.html

14、moment ：JavaScript 日期处理类库。 http://momentjs.cn/

15、

总结：常用npm包

　　a、插件 或 组件

    "vconsole": "^3.2.0", // 手机端控制台
    "vuex": "^3.0.1",  // 状态管理
    "axios": "^0.18.0", // ajax 请求
    "fastclick": "^1.0.6", // 移动端点击延迟事件
    "mockjs": "^1.0.1-beta3", // mock 假数据
    "lib-flexible": "^0.3.2", // 移动端适配采用lib-flexible,
    "px2rem-loader": "^0.1.9", // 自动把px单位换算成 rem单位。行内样式无效
    "vue-touch": "^2.0.0-beta.4", // 滑动事件 插件
　　 "better-scroll": "^1.15.2", // 解决移动端（已支持 PC）各种滚动场景需求的插件
　　 "inobounce": "^0.2.0", //禁止IOS H5的滑动回弹。（禁止了html和body页面的滚动）

　　b、UI库 （略）

实用的vue插件大汇总 ：https://baijiahao.baidu.com/s?id=1611278484435786514&wfr=spider&for=pc

---

react 常用 的npm 包

1、react配置rem解决移动端适配问题：https://blog.csdn.net/qq_25520603/article/details/90207873

npm i lib-flexible --save   // 这个 和vue是一样的
npm i postcss-px2rem --save

2、