作者:OmniDebug基于Vue.js开发移动工程时,一些特定的问题和场景下,只能在移动运行工程复现、追踪问题(比如在微信内,在App容器内),桌面的Devtools就没法用了。数次安装Electron版本devtools后,觉得调试起来太麻烦了,所以我决定把devtools搬进vConsole里如果不知道什么是vConsole,可以看这里vConsole Readme最终效
大家好,我是为前端娱乐圈操碎了心的小迷妹,每天推荐一个小工具/源码/知识点,装满你的收藏夹,每天分享一个小技巧,让你轻松节省开发效率,实现不加班不熬夜不掉头发,是我的目标。 一直在整理与收集的一些比较优秀github项目,方便自己阅读,顺便分享出来,大家一起学习。 最近超喜欢这个框架-Vue.js 的 Material 组件框架 Vuetify。 推荐指数:star:
一. 移动基础知识在移动开发时,我们经常发现出现布局后有不兼容的问题,如何在不同设备上进行适配呢,希望康完这边,你能从原理到应用彻底熟悉移动适配。1.1 手机屏幕现状移动设备屏幕尺寸非常多,碎片化严重。 Android设备有多种分辨率:480x800, 480x854, 540x960, 720x1280,1080x1920等,还有传说中的2K,4k屏。 近年来iPhone的碎片化也加剧了
rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。rem是什么?rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到r
8 个月前Mint UIGitHub:github.com/ElemeFE/mint项目主页:mint-ui.github.io/#Demo:elemefe.github.io/mint-文档:mint-ui.github.io/docs/#由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动组件库。自 6 月初开源以来,根据社区和团队内部的反馈,修复了一些 bug 并新增了
转载 10月前
25阅读
本文将介绍如何实现一个注册全局指令的插件,可以自动判断vue版本,并进行差异消除的处理。本文示例源码github、npm地址,欢迎start哦。前置介绍-出发点最近写了个vue3的自定义指令,用来拖动元素。为了不影响元素的布局,选用了transform:translate()变换,来实现拖动。实现并不难,思路大概是:监听元素mousedown事件,点击时记录开始坐标。并监听元素mousemove事
一种理想方案首先,无论换算方不方便,我都不想换算,我也不想去操心什么转换系数其次,有些属性或者类选择器我不想进行转换css代码要足够简洁,我只希望看到一种单位,那就是px第一种:lib-flexible+postcss-pxtorem第一种方案是lib-flexible+postcss-pxtorem,在相当长一段时间里,这两个插件搭配都是解决移动布局的神器,lib-flexible是阿里手淘系
为了访问到DOM元素的值,要用到ref属性,将以上的最外层Div改写为:<div class="menu" ref="menuBorder">就可以将class为menu的dom属性集合,即menuBorder挂载到this.refs上,通过this.refs.menuBorderj就可以访问了  // html <ul> <li v-for="
vue中,测试环境,生产环境,是通过打包来识别和运行的。 识别关键字其实他内部封闭好了。 可以用:process.env.NODE_ENV 来识别。 比如:process.env.NODE_ENV === ‘production’ //说明是生产环境,还有develop\test等 具体做方是,在根目录建一个vue.config.js,然后里边写:第一步: const path = require
前言Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。这使得状态管理非常简单直接,不过理解其工作原理同样重要,这样你可以避开一些常见的问题。什么是响应式我们先来看个例子:<div id="app"> <div>Price :¥{{ price }}</div>
vue项目路由跳转和防止动态路由组件复用<vue-link>标签实现新窗口打开编程式导航完整代码this.$router.push({name: 'abc'})防止动态路由组件复用 标签实现新窗口打开官方文档中说 v-link 指令被 组件指令替代,且 不支持 target=“_blank” 属性,如果需要打开一个新窗口必须要用标签,但事实上vue2版本的 是支持 target=“_
cssrem:一个CSS值转REM的VSCode插件;lib-flexible:移动弹性布局适配解决方案;vue-touch:移动端相关点击,滑动,拖动,多点触控等事件封装;vee-validate:适用于vue项目中表单验证插件;better-scroll :可能是目前最好用的移动滚动插件;fastclick:解决移动click 300ms延迟vConsole:手机前端开发调试利器&nbs
转载 1月前
415阅读
前言vue-cli , vue-router , vue-resource , vuex 1.使用vue-cli创建项目 2.使用vue-router实现单页路由 3.用vuex管理我们的数据流 4.使用vue-resource请求我们的node服务 5.使用.vue文件进行组件化的开发 PS:本文node v6.2.2 npm v3
目录一,进入/离开过渡效果二,过渡效果的钩子函数三,过渡效果+Animate.css四,列表过渡 一,进入/离开过渡效果进入/离开过渡效果:Vue在插入、更新或移除DOM时,可以设置一些动画效果;如何使用过渡效果:利用<transition></transition>组件将需要应用的过渡效果的DOM对象包裹住,然后书写对应的样式;过渡的类名:过渡效果的样式是类样式
适配思路 设计稿(750*1334) ---> 开发 ---> 适配不同的手机屏幕,使其显得合理原则开发时方便,写代码时设置的值要和标注的 160px 相关方案要适配大多数手机屏幕,并且无 BUG用户体验要好,页面看着没有不适感思路写页面时,按照设计稿写固定宽度,最后再统一缩放处理,在不同手机上都能用按照设计稿的标准开发页面,在手机上部分内容根据屏幕宽度等比缩放,部分内容按
(一)移动 常用组件库1)Vant ui?有赞移动 UI 组件库,支持 Vue2/3 小程序,支付宝小程序 https://vant-contrib.gitee.io/vant/v2/#/zh-CN/col Vant 是由有赞前端团队开发的一套基于 Vue.js 的移动 UI 组件库,它包含了丰富的组件和功能,可以帮助开发者快速构建高质量的移动应用。Vant 以简洁易用和高质量的代码为特点
以前都用的是 echarts 插件,这次的项目要用 vue-echarts 插件。vue-echarts 和 echarts 的区别:vue-echarts是封装后的vue插件, 基于 ECharts v4.0.1+ 开发,依赖 Vue.js v2.2.6+,功能一样的只是把它封装成vue插件 这样更方便以vue的方式去使用它。echar
转载 2024-02-29 13:19:30
324阅读
文章目录开始之前正文一、Options Api二、Composition Api三、对比逻辑组织Options APICompostion API逻辑复用小结 开始之前Composition API 可以说是Vue3的最大特点,那么为什么要推出Composition Api,解决了什么问题?通常使用Vue2开发的项目,普遍会存在以下问题:代码的可读性随着组件变大而变差每一种代码复用的方式
document.documentElement.style.fontSize = innerWidth /16 +'px'    window.onresize = function(){    document.documentElement.style.fontSize = innerWidth /16 +'px'   } document.getElementsByTagN
rem
原创 2022-03-28 16:26:51
121阅读
rem是什么?  rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似
转载 2024-04-21 15:37:27
114阅读
  • 1
  • 2
  • 3
  • 4
  • 5