使用手机预览移动端项目（Vue）

最新推荐文章于 2023-08-18 17:46:14 发布
最新推荐文章于 2023-08-18 17:46:14 发布
阅读量158 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/wyhlightstar/p/9362404.html
版权

 

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，扫码即可。

 

转载于:https://www.cnblogs.com/wyhlightstar/p/9362404.html

weixin_30387339
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
手机端Web项目开发
11-06
手机端Web项目开发/西安乐高云智能科技有限公司/DarrenMJ
一个移动端专用的Vue2图片预览插件
08-12
对于这个移动端Vue2图片预览插件，其核心功能可能包括： 1. **手势操作**：移动端设备通常具有触摸屏，因此插件可能会支持滑动、捏合缩放等手势，提供与原生应用类似的交互体验。 2. **图片加载优化**：为了提高...
Vue移动端项目如何使用手机预览调试
热门推荐
Lynn
04-12 2万+
最近在开发移动端Vue移动端项目，查了一些资料，这里分享下如何在webpack工具构建下的vue项目，在手机端调试和预览，言归正传。 1.电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器，使用同一个wifi； b.笔记本也可以直接启用一个wifi，手机链接笔记本wifi也可以； 2.查询本地IP地址 WIN+R，输入cmd回车，打开命令提示符，输入ipconfig，...
移动端项目如何在手机上查看效果
qq_41662119的博客
08-30 1120
很多时候我们需要在真机上调试，进行代码的维护修改，如何在手机上查看呢？ 我们拿vue来说， 1.在vue的config/index.js文件中我们可以看到项目启动的一个端口号 上图域名是我进行修改后的，大家打开后应该会默认显示localhost 2.window+R，输入cmd进入控制台，然后输入命令ipconfig/all 回车，我们可以看到自己电脑的一些ip信息 ...
手机怎么访问电脑的本地的移动端项目？超级简单，这篇文章直接搞定
最新发布
xiaoxiaoxin1128的博客
08-18 1644
出现该问题主要是因为你电脑的防火墙将某些端口号的 htpp 的网络访问协议给屏蔽掉了（一般的电脑操作系统是默认不屏蔽 80,8080 一些常用的端口的），所以你可以直接将自己的电脑的防火墙全部关闭。作为一名开发或者运维的同学，平时都在电脑上F12开启手机适配模式，去调整代码和样式，有时候出于更严谨的方式，我们需要使用真机来调试样式，由于代码在本地的环境，没有上传到服务器，所以我们需要，手机怎么去开启访问本地的移动端项目呢？#手机怎么访问电脑的本地的移动端项目。#第二步：查看的电脑的IP。
利用手机预览项目效果
leng_nuan的博客
07-13 729
首先查看本机的IP MAC: > ifconfig window: > ipconfig 连接特定的 DNS 后缀 . . . . . . . : 本地链接 IPv6 地址. . . . . . . . : fe80::9035:3b1a:5ce1:40d7%16 IPv4 地址 . . . . . . . . . . . . : 192.168...
Vue移动端项目实现使用手机预览调试操作
10-15
在开发Vue移动端项目时，确保应用在手机设备上...总之，手机预览和调试对于Vue移动端项目开发至关重要，通过连接同一网络、获取和配置IP地址、生成二维码、重启项目以及使用远程调试，可以实现顺畅的跨设备开发体验。
Vue实现手机扫描二维码预览页面效果
10-15
这意味着整个项目可能使用了Ant Design Vue库来提供UI组件和布局，但在这个特定的二维码预览功能实现中，我们并没有直接使用Ant Design Vue。 总结起来，通过以下步骤，我们可以使用Vue实现手机扫描二维码预览页面...
移动端Vuejs图片预览插件
08-10
移动端Vue.js图片预览插件 | Mobile-friendly picture file preview Vue.js plugin with horizontal nav and bottom title.
移动端vue的项目如何在手机上实时调试查看呢
lannieZ的博客
09-02 700
首先第一步：找到vue的项目config文件夹下的index.js 第二步：找到dev这个对象里的host的参数，改成你当前电脑的IP地址 注意：不要加上http，否则会报错 cmd 打开命令运行符，输入“ipconfig”查询本地 IP； 第三步：然后重新dev项目，就可以用你当前电脑的IP地址进行访问了 ...
手机端wap项目（旅游类）
05-14
旅游类 移动开发案例 wap页面 html5 手机端 轮播 滑动
移动端项目总结 - ＜基础＞
拯救世界的光太郎
05-12 280
1. meta&viewport <meta name="viewport" content="width:device-width, inital-scale:1.0, user-scalable: no, maximum-scale: 1.0, minimum-scale: 1.0"> <!-- 移动端专属标签，PC端不起作用 --> width：pixel_value | device-width，pixel_value：直接设置具体数值，大部分安卓手机不支持
【移动端】移动端项目手机预览方法
NAMECZ的博客
11-01 2017
移动端项目，手机预览方法： 环境要求：node安装成功 第一步：打开命令行工具 ① win + r 打开windows运行窗口 ② 输入 cmd 打开命令行工具 第二步：安装全局http服务 nmp install -g http-server （npm安装全局http服务） ...
移动端项目如何查看手机浏览器信息
weixin_30468137的博客
12-28 256
html页面引入一段js代码即可： javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () ...
vue移动端项目
violetta521的博客
11-16 2876
1.移动端规范 转换单位rem，设置媒体查询 为什么使用rem？ 移动端最麻烦的是，不同分辨率适配！ iPhone6 为标准 750*1334 手机端的4px等于电脑端的1px 2倍关系 @2 ihone6s 1242*2208 手机端9px=1px 3倍关系@3 一倍关系就是pc端的 手机是视网膜屏 2.创建项目 cmd->vue create 项目名 目前选择2.0版本 3.vue.comfig.js的配置 module.exports = ...
手机端项目动态页面
qq_61718994的博客
03-27 114
html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" hre
vue手机端项目-文章详情（未完成）
qq994849611的博客
03-15 585
在 api/article.js 中新增封装接口方法 在组件article/index.vue中调用获取文章详情 展示文章详情 先处理标题、作者信息、文章正文显示这几个部分，其他留到稍后处理 处理内容加载状态 需求： 加载中，显示 loading 加载成功，显示文章详情 加载失败，显示错误提示 如果 404，提示资源不存在 其它的，提示加载失败，用户可以点击重试重新加载 处理正文样式 文章正文包括各种数据：段落、标题、列表、链接、图片、..
手机端电子商城项目实战（VUE）
wakaka112233的博客
05-14 3470
手机端电子商城项目实战（VUE） vue-cli、vuex、router、store 访问项目地址：www.emall.hbw1224.top 项目运行截图 项目首页截图 商品详情 项目分类截图 项目购物车截图 项目我的界面截图 GitHub项目地址：https://github.com/ln-hbw/supermall 注： 项目只有前端代码，后端调用的接口，项目的后台端口有改动，需要维护，不便公开，想要接口地址的发送邮件到 hbw1224@163.com ...
vue手机端项目自适方案
MercedesCc的博客
07-06 669
lib-flexible解决移动端自适应花了一个多小时终于解决了这个问题，最近总是在研究如何做好自适应，搜了很多方法，但是总是感觉不尽人意，比如以实际尺寸除以75得出rem，或者是那种px乘以二的，因为之前不太清楚清楚，导致不能理解。功夫不负有心人，总算总结了一个比较满意的方法。利用淘宝给出的lib-flexible,解决。首先安装它，npm i lib-flexible --save，计算起来比...
使用vue在移动端 预览pdf文件
06-08
可以使用第三方库pdf.js来实现在Vue移动端预览PDF文件。首先需要安装pdf.js： ``` npm install pdfjs-dist ``` 然后在Vue组件中引入pdf.js： ```javascript import pdfjsLib from 'pdfjs-dist'; ``` 接下来，在Vue组件的mounted方法中加载PDF文件： ```javascript mounted() { // 加载PDF文件 pdfjsLib.getDocument('path/to/pdf/file.pdf').then(pdf => { // 获取第一页 pdf.getPage(1).then(page => { // 设置缩放比例 const scale = 1.5; // 获取canvas元素 const canvas = this.$refs.pdfCanvas; // 获取渲染上下文 const context = canvas.getContext('2d'); // 获取页面宽度 const viewport = page.getViewport({ scale }); // 设置canvas宽高 canvas.width = viewport.width; canvas.height = viewport.height; // 渲染页面 page.render({ canvasContext: context, viewport }); }); }); } ``` 最后，在Vue组件的template中添加canvas元素： ```html <template> <div> <canvas ref="pdfCanvas"></canvas> </div> </template> ``` 这样就可以在Vue移动端预览PDF文件了。当然，还可以根据需要添加一些控制按钮，比如翻页、缩放等功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值