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-pxtorem:推荐使用 https://www.cnblogs.com/happymental/p/12397384.html
c、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按钮显隐:【触发vconsole显示的按钮,如果页面存在 没有点击事件的DOM,直接使用这个DOM触发就可以;如果页面的DOM都有触发事件,不好触发的话,就自己创建一个触发的DOM事件】
方法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、nprogress:在网页顶部添加细长进度条的工具。https://www.cnblogs.com/smart-girl/p/11365512.html
总结:常用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、