1.在 npm run dev 启动Vue项目之后.例:http://localhost:8095/#/chatList 2.查看本机的 IP (WIN + R + cmd ) 输入 ipconfig 即可查看 3.用 IP 地址替换 localhost 例:http://192.168.1.6:8095/#/chatList 4.使用草料二维码,将 http://192.168.1.6:8095/#/chatList 生成二维码 5.将手机与电脑连接相同的 WiFi,扫码即可.

可以通过 File --> Setting,搜索 deployment 点击 + 号 然后输入一个名称,选择:Local or mounted folder,点击 OK 接下来选择你的本地项目路径,我的是在E:\ ,输入你的本机IP,选择 Mappings 标签 设置红框里的本地项目路径,最后点击 OK 再次用WebStorm预览 我们可以看到浏览器地址栏的地址已经是IP了 转载:https://www.cnblogs.com/cymmint/p/4809699.html

最近在使用WebStorm时,预览网页时地址总是显示的 http://localhost:63342/... ,如果要调试其它设备感觉很不方法,此时肯定首先想到的亲爱的度娘,但是貌似没有真正很解决问题的(可能是我搜索方法不对).最后偶然发现以下的一个设置方法. 设置的前提是你此前就能直接用本机IP地址访问到网页,我的是以前就配置好了Apache相关设置的. 我的WebStorm是 10.0.3版本,不过我想webstorm的设置应该是差不多的吧.看图说话: 1.当我直接用WebStorm预览网页

网上看了很多关于该问题的解决办法,各种各样的都有,个人也测试了一些, 最后总结出一个最简单且实用的方法. 1.安装nodejs node官网下载对应版本的nodejs,安装好了之后,在node.js执行node -v,如果出现版本号,则说明安装成功. 2.安装anywhere 打开cmd 输入 npm install anywhere -g  ,全局安装anywhere. 3.执行anywhere 8866(后面4个数字除了0000外,随便输都可以) 在cmd页面 找到你想搭建服务器的路径,然后

开头 笔者之前的文章里介绍过一个代码在线编辑预览工具的实现(传送门:快速搭建一个代码在线编辑预览工具),实现了css.html.js的编辑,但是对于demo场景来说,vue单文件也是一个比较好的代码组织方式,至少笔者就经常在写vue项目的同时顺便写写各种demo,但是分享不太方便,因为单文件不能直接运行看效果,基于此,笔者决定在之前的基础上再增加一个vue单文件的编辑及预览功能. ps.如果没看过之前的文章也没关系,这里简单介绍一下该项目:code-run,基本框架使用的是vue3.x版本, 构

组件示例图 组件代码 upload_img.vue <div id="uploadImg"> <div class="upload_image_box" v-show="show1"> <div class="upload_image"> <div class="photo_box" @click="actionSheet()"> <

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

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

Vue.js的图片预览的插件还是不少,但是找了半天还是没找到跟现在项目里能用得很顺手的,其实项目里图片预览功能很简单,点击放大,能双指缩放就可以了.部分vue.js的图片预览库都需要把图片资源单独拿出来进行预加载,这个项目比较特殊,图片属于数据内容的一部分,数据内容都是从服务器异步获取的HTML内容,异步加载完成html内容完成后,才能去给每个图片加上预览功能. 所以就只能自己根据需要添加图片预览功能了. 当然不是从零开始,可以借助一些移动端的触控库帮我们解决一些基础的触控事件,这里选用的是ha

第一种:viewerjs使用介绍(PC.移动端都兼容) 1.先安装依赖 npm install v-viewer --save 2.main.js内引用并注册调用 //main.js import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer); Viewer.setDefaults({ Options: { "inline": true, "button": true

这里分享下如何在webpack工具构建下的vue项目,在手机端调试和预览,言归正传. 1.电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器,使用同一个wifi: b.笔记本也可以直接启用一个wifi,手机链接笔记本wifi也可以: 2.查询本地IP地址 WIN+R,输入cmd回车,打开命令提示符,输入ipconfig,查看本地IPv4: 3.修改本地项目中IP地址 找到项目中config文件夹,下面index.js文件打开: 找到host: ‘localhost’, 改为上面

背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览 需求二:然后绘制在canvas画布上 这里,我们先看一个demo(http://jsfiddle.net/q3011893/83qfqpk8/embedded/) 需求一:drawTempPhoto方法 需求二:drawPhoto方法 操作步骤: 1.点击选择文件,拍摄一张照片,此时"预览:"文字下会显示你刚才拍摄的照片: 2.再点击"draw on Canvas",该按钮下

APICloud工具插件包括APICloud Studio.Sublime Text和Webstorm全面为开发者提供iOS和Android平台真机同步调试功能,不仅可以通过USB方式进行APP真机同步功能,更新增WiFi真机同步和WiFi真机实时预览两大功能,方便开发者在开发过程中进行真机预览和调试,加快同步的速度和提高预览调试的效率.使用这三种工具插件中的WiFi真机实时预览和WiFi真机同步功能均一致.   WiFi真机实时预览:可以实时在真机上加载并预览指定页面的运行效果,方便开发者在真

前些天公司要求在微信移动端做上传图片并预览的功能,要求能够调用摄像头拍照并立即预览. 在网上搜了一些方法,开始自己写了个简单的功能实现代码.结果发现移动端拍照出来的图片动不动就2M+,又因为要批量上传,为用户的流量和上传速度考虑,我决定做一下优化,看能不能在预览前就压缩一下图片尺寸. 结果又是一阵百度,发现一个靠谱的封装好的base64图片预览及压缩的方法. 直接上下载地址吧: http://www.imwinlion.com/wp-content/uploads/2016/05/localre

人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠人玫瑰,手留余香呢?终于时候到了...哈哈 首先容我吐槽一番,在大前端的背景下各种框架层出不穷,相对的各种打包工具也应用而生,要说最火的就是webpack了,用户多所以社区相对活跃,团队维护,网上也有各种各样的问题可以轻易搜到从而解决自己的遇到的各种奇葩问题,所以90%的项目都会采用webpack来

本文主要介绍如何通过拖拽方式在浏览器端实现图片预览,并生成图片的Base64编码. 工具链接:图片转Base64. 首先介绍一下FileReader, FileReader对象允许浏览器使用File或Blob对象异步读取存储在用户计算机上的文件(或数据缓冲区)的内容. 有了FileReader就不需要先把文件发送到服务器端,然后再返回到浏览器端显示这种模式了,可以直接在浏览器端读取文件并显示. DND获取文件 通过对DragAndDrop事件的监听获取文件. z.event.on(listDiv

一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时记得引入cropper.css 二 . 图片裁剪并预览 1.首先利用cropper完成图片裁剪并预览: <input type="file" name="" id="imgBtn" name="imgCut"> <

最近在用Vue仿写cnode社区,想要上传到github,并通过Github pages预览,在这个过程中遇到了一些问题,因此写个笔记,以便查阅. 完成Vue项目以后,在上传到github之前,需要修改一些配置才能通过github pages预览项目. 一.修改配置 解决文件路径问题: 打开项目根目录config文件夹下的index.js文件,进行如下修改: 看清楚是 build(上边还有个dev 是开发环境下的配置,不需要改动)下的 assetsPublicPath :将'/'改为'./' 背

vue写原生的上传图片并预览以及清除图片的效果,下面是demo,其中里面有vue获取input框value值的方法以及vue中函数之间的调用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片demo</title> <link rel="stylesheet" href="../../css/font-a

用pdf.js实现在移动端在线预览pdf文件1.下载pdf.js    官网地址:https://mozilla.github.io/pdf.js/ 2.配置    下载下来的文件包,就是一个demo,仿照这个demo做就可以    (1)页面元素如下:    <button class="product-term to-clause" id="noteDetail">test</button><button class="t

最近开始使用vue做项目 在这个过程中,碰到了大多数做前端肯定经历的一个问题,就是文件上传预览 花了点时间解决,因此分享一下预览功能的解决方案 页面: <div class="select"> <input type="file" id="filed" hidden="" @change="filePreview"> //@change是vue中的用法,相当于原生的onchange