Vue PC端框架 1. Element 中文文档:http://element-cn.eleme.io/#/zh-CN github地址:https://github.com/ElemeFE/element 2. iView 中文文档:https://www.iviewui.com/ github地址:https://github.com/iview/iview 3. vue-element-admin 中文文档:https://panjiachen.github.io/vue-element…

背景 在一pc端的web项目里,由于某些特性需要由动态语言处理,所以只在有需要使用vue来处理数据的页面,直接引入vue.js来处理.由于刚开始并没有打算使用前端来渲染数据和处理交互,所以使用了一些非vue的ui和插件,导致后来冲突坑点不少.非vue模块化下使用vue,虽然不能import vue文件,使用组件方式也有点恶心,但处理一些事情还是不错的. 使用formdata提交表单数据 先上代码 var that = this; var myForm = document.getElementB…

1.vue中通过路由跳转的三种方式      https://blog.csdn.net/qq_40072782/article/details/82533477 2.数组解构,对象解构:https://www.cnblogs.com/langwo/p/7259191.html 3.关于如何查找一些好的自学的项目 3.1 输入网址:https://github.com/ 3.2 在搜索框中输入例如 vue 豆瓣电影 经过回车,即可以找到很多项目 3.3一个比较经典的: https://githu…

在vue2 中用脚手架建立的项目,后端提供接口获取数据.在公司做第一个项目的时候不清楚公司里的对接流程,结果后续代码被一个接口整的乱七八糟,这个接口是获取用户信息的接口——'usre/info'. 如果用户登录了以后,很多(几乎全部)页面都要用到userinfo,难道每个页面都要写个 getUserInfo 方法去获取?好烦的好吧,如果你不觉得烦,那不用往下看了... 再写完第一个项目后,我在反思这个userinfo数据要怎么处理好,下边处理的关键代码: index.html 中引入的 publ…

*手上的项目刚刚搞完了,记录一下项目中遇到的问题,留做笔记: 需求: 在项目中,需要展示用户上传的一些图片,我从后台接口拿到图片url后放在页面上展示,因为被图片我设置了宽度限制(150px),所以图片被缩放了,需求说加一个图片预览的功能 参考文章: https://blog.csdn.net/yp090416/article/details/81486581(vue点击图片放大预览图片支持旋转等) 准备工作: (1)搜索插件:https://github.com/mirari/v-viewer…

项目需要:在添加新类别的弹框中,要在输入框中输入多条描述信息,不同的描述信息要换行输入,输入后点击确定传给后端,接口返回成功后点击查看刚添加的新类别时,描述框中展现多条换行的描述信息也要跟填写时一样(即不同的描述换行展示),他们说用富文本比较方便,所以找到了这个插件,刚好满足我想要的功能效果,写下来当笔记. 参考文章:Vue基于vue-quill-editor富文本编辑器使用心得 安装插件: npm install vue-quill-editor 然后是在需要的组件引入,当然也可以在main.…

端里移动端到底比pc端多哪些知识,为啥面试时好多公司都问h5水平如何? 我做过几年的web前端开发,就简单谈谈自己的感受吧.首先来看看PC端和移动端在前端开发上的一些区别:(1)PC考虑的是浏览器兼容性,移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器用的都是webkit内核,所以做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的略微差异化:(2)在部分事件的处理上,移动端自然是偏向于触屏的,所以触屏事件的一些规律要多摸索一下,另外包括…

使用场景:有适配pc端改为适配pc端和移动端,使用2套css 代码实现App.vue created: function () { if(document.documentElement.clientWidth > 640){ require('./style/index.scss'); this.plaform = 'pc'; }else{ require('./style/mobile.scss'); this.plaform = 'mobile'; } 注意: 为2套css分别指定不同的父…

(1)———————— 前端里移动端到底比pc端多哪些知识,为啥面试时好多公司都问h5水平如何?我做过几年的web前端开发,就简单谈谈自己的感受吧.首先来看看PC端和移动端在前端开发上的一些区别: (1)PC考虑的是浏览器兼容性,移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器用的都是webkit内核,所以做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的略微差异化: (2)在部分事件的处理上,移动端自然是偏向于触屏的,所以触屏事件的一…

1, 首先判断设备:在main.js里面写 // vue原型挂载 - 是否PC端 if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { Vue.prototype.$pc = false hostConfig.vconsole && new VConsole() } else { Vue.prototype.$pc = true let winWidth = document.documentEle…

常看到各种app应用中使用自定义的键盘,本例子中使用vue2实现个简单的键盘,支持在移动端和PC端使用,欢迎点赞,h5 ios输入框与键盘 兼容性优化 实现效果: Keyboard.vue <template> <div class="keyboard" v-show="showKeyboard" v-clickoutside="closeModal"> <p v-for="keys in keyList&…

lib-flexible + px2rem Loader lib-flexible 阿里伸缩布局方案 px2rem-loader:px转rem: 依赖 首先需要安装 vue-cli 脚手架,这里我安装的是 cli3. 项目初始化完成后,在项目目录中安装 lib-flexible 和 px2rem-loader. npm install lib-flexible --save-dev npm i postcss-px2rem --save 接着在项目入口文件 main.js 中引入 lib-fle…

原因:pc端微信浏览器不支持es6,而代码中使用了 let . 解决:将 let 改为 var(若使用 es6 语法比较多,可以进行转换,将 es6 语法转为 es5) 参考博客: 1,h5微信页面在手机微信端和微信web开发者工具中都能正常显示,但是在pc端微信浏览器上打不开(显示空白) - Alonge的博客 - CSDN博客https://blog.csdn.net/m0_37543652/article/details/83059696…

进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> <!--开启摄像头--> <img @click="callCamera" :src="headImgSrc" alt="摄像头"> <!--canvas截取流--> <canvas "><…

思路:1.先做出一个上传的图片的上传区 <!-- 上传区 --> <label for="fileUp"> <div class="upBorder"> <img src="../assets/add.png" alt="" /> <input ref="fileUp" type="file" id="fileUp"…

手动跨域操作文件 补录:跨域访问文件夹文件是一种常见的需求,下面主要介绍的的通过代码使用具有权限账号的人来达到跨域操作文件的能力. 现在补充一下普通的一些需求场景,今天就遇到了一种需要经常需要登录远程服务器来部署文件的情况?  但是远程服务器限制了登录人数同时在线2人,每次我想发布新版本到测试服务器时都需要等别人断开连接后才可以.  那么学了这个知识后,我们就可以在我们本地就可以远程操作文件的删除,更新. 也很简单,下面的代码全不管,直接自己手动添加一个网络驱动器(驱动盘随机),填写上需要影射的…

对于现在的移动端设备的普及,移动端上的用户体验成了一个重要的关注点. 看了一些网上的关于移动端的交互和用户体验的知识,这里总结了一些.若有不足的地方,希望大家能够积极补充. PC端和移动端的产品的设计区别 屏幕与适配的问题考虑: 操作系统(windows,mac,android,iOS等)的区别: 网络环境(并不是每一个移动端设备随时随地都有网络): 使用场景(站着,坐着,躺着,蹲着,趴着,走着等等): 传感器的使用(摇一摇功能,地图实时导航,语音输入等): 操作方式不同(PC端是点击,移动端是…

最近因为要学安卓与服务器交互的知识,所以必须要让android程序能访问一个测试服务器.所以我就考虑让真机或者模拟器访问PC端的Tomcat或者Apache服务. 在介绍步骤之前,有必要说点基础的.我们在本地访问本地web应用时,一般使用localhost或者127.0.0.1访问.但在android程序中我们决不能写这两个地址,因为android也是一款linux操作系统,使用这两个地址就会访问android机器本身了,所以我们必须在android程序中访问PC的IP地址. 首先,我考虑到是用…

小记:针对目前功能越来越强大的智能手机来说,在PC端支持对手机中的用户数据作同步.备份以及恢复等保护措施的应用已经急需完善.不仅要对数据作保护,而且用户更希望自己的手机跟PC能够一体化,以及和远程服务器的一体化.用户希望在手机端的操作能够转移到PC端,对于PC端大屏幕的电脑来说,完成同样的操作可以大量的节省用户的时间.对于功能强大的手机来说,有近1/2的应用可以在PC端同步.所以对PC端应用的规划要以系统的角度来对待.同时要保证手机端和PC端的主流交互模式应保持一致.个人观点:数据的一体化和管理…

Web前端 Web前端开发工程师:http://baike.sogou.com/v18499271.htm WEB前端开发面试题集锦:http://wenku.baidu.com/view/47bbcbdc50e2524de5187eae.html 浅谈前端开发的水有多深:http://www.w3cfuns.com/blog-5446428-5400629.html 前端网:http://www.w3cfuns.com/portal.php 后台: Java / Android / Linux…

最近新调到一个项目,由原来的pc端,调到移动端,一切都是那么的不一样,在得知即将调到移动端的时候,听说我们的技术要用到vue,Aladdin,还有es6,有点懵... 我做了以下准备工作: 1,买了本阮老师的es6入门 2,下了vue学习视频,招朋友要各种vue的资料,然后加各种vue技术qq群 3,寻找对应项目的网站,嘿嘿,找到了饿了么的官网 4,准备mac本 5,招同时要对应项目的代码 6,发现原来的编辑器不能用了(webstorm),换编辑器 7,.... 到了新项目组,发现自己准备的还是…

解决问题:大同大学教务处官网学生端口一进去就卡住了,点上面一行的菜单无响应 转眼已是四年,想想自己大学即将结束,不由得让人感慨啊.这才刚开学几天,我就听到有同学在因为补考,选课的事情发愁.学校官方的教务处也可以登录,但是只限于登录而已,想要进行其他操作只能呵呵了.即使你的浏览器开了兼容模式也不一定可以操作.多半只能让其他同学帮你选课了.于是我分析了下学校的网站内容,下出了这个教务处学生端的网页.算是对的起自己所学的东西吧.教师端的话没账号没法试,以后有机会了写下. 其实,这个文档在去年11月份就…

跨域解决方案 config/dev.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', API_ROOT: '"/api"' }) config/prod.env.js ,生产的服务器(你线上运行时的服务器…

vue判断是pc端还是移动端分别进入不同的页面 判断移动端代码如下: function IsPC(){ var userAgentInfo = navigator.userAgent; var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); var flag =…

CSS样式初始化分为PC端和移动APP端 1.PC端:使用Normalize.css Normalize.css是一种CSS reset的替代方案. 我们创造normalize.css有下面这几个目的: 保护有用的浏览器默认样式而不是完全去掉它们 一般化的样式:为大部分HTML元素提供 修复浏览器自身的bug并保证各浏览器的一致性 优化CSS可用性:用一些小技巧 解释代码:用注释和详细的文档来 Normalize.css支持包括手机浏览器在内的超多浏览器,同时对HTML5元素.排版.列表.嵌入的…

原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新,备查. 原文发表于我的技术博客 1. 课程简介 在此 React 入门与实战课程中,主要使用的课程结构是 React 基本概念与实战结合.课程从 React 的简介讲起,在正式开始学习 React 前将对目前火热的前端知识点进行了梳理,包括基础的 JS.ES5 / ES6.CSS.HTML5,也包含…

一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室——vueWebChat,实现了发送消息.表情(动图),图片.视频预览,右键菜单.截屏.截图可直接粘贴至文本框进行发送. 二.技术框架 MVVM框架:Vue2.5.6 状态管理:Vuex 页面路由:Vue-router iconfont图标:阿里巴巴字体图标库 自定义滚动条:vue-gemini-sc…

目前上拉刷新,下拉加载,以及区域回弹的组件,绝大多数都是通过transform去实现的.在移动端效果很好,但是PC端使用鼠标拖拽的方式,查看下文首先不符合逻辑,其次容易点进其他页面. 起初,项目的初衷是在微信浏览器中查看,但是客户反应有些页面pc端没办法上下滑动(使用了vue-scroller的页面都跪了).鼠标滚轮默认控制的是滚动条,不是容器的transform属性,怎么可能上下滑动. 然后就想如果能监听到鼠标滚轮事件,然后再更改transform:translate3d(x,y,z),这样不…

web前端工程师在移动互联网时代里的地位问题 支付宝十周年推出了一个新产品:支付宝的十年账单,我也赶个时髦查看了一下我的支付宝十年账单,哎,感慨自己真是太屌丝了,不过这只是说明我使用淘宝少了,当我大规模网上购物时候,我很讨厌慢速的快递,所以我大部分消费都贡献给了像京东这样具有火箭般快递速度的电子商城了.不过在支付宝十年账单里,有个统计数据引起了我的危机意识,在中国一些偏远或者是经济欠发达的省份,电子购物在居民的全部消费里的占比比发达地区高多了,而这个的助推剂居然是移动互联网在中国的普及,在中国使…

pc端个性化日历实现 技术:vue => v-for.slot-scop 插槽域 需求:需要实现日历上每一天动态显示不同的信息 思路:运用vue 中 slot-scop 插槽域的知识点,将个性化的代码样式放到slot中 再通过slot-scop 获取这个插槽中的所需数据 一.实现日历组件 思路:布局上就是一个7列,行数不确定的表格.只不过,日历的表格是宽和高相等,随着浏览器的大小变化,表格大大小也要变化,所以要用padding布局,难点在日期数组的生成上面. 1.布局的实现 <div clas…