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

最新推荐文章于 2024-07-26 14:59:23 发布
最新推荐文章于 2024-07-26 14:59:23 发布
阅读量2.5w 收藏 17
点赞数 3
分类专栏： vue vue总结 文章标签： 手机 wi-fi 预览 vue 项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34543438/article/details/73838638
版权

1、在命令行中输入npm run dev ，启动自己的vue项目，例：http://localhost:8081/#/goods，可以在浏览器预览

2、那么如何在手机端预览vue项目呢？WIN+R，输入cmd启动命令行工具，输入ipconfig查看本机ip

3、本机ip替换localhost，例：http://192.168.1.171:8081/#/goods，预览效果不变

4、使用草料二维码，将http://192.168.1.171:8081/#/goods生成二维码

5、将手机连接到与电脑相同的WIFI，扫一扫即可预览！

个人github：https://github.com/qiilee  欢迎follow

手掌日月摘星辰
关注
专栏目录
Vue移动端开发如何在手机端时时预览
qq_40126542的博客
03-21 850
在开发移动端的时候，特别想在真机上看自己开发出来的成果，之前用的是 Ghostlab这玩意，可是呢，这玩意是要收费的，而且只有7天的体验时间，感觉有点不满足。 现在分享一个更加方便的方法，是在webpack工具构建在的vue项目，实现真机实时预览... 1.电脑和手机连接同一个wifi 用wifi共享大师开个wifi，手机连接，这都是常规操作啦2.查询本地IP地址WIN + R，输入cmd回车，...
Vue项目在手机端预览
weixin_45253572的博客
04-23 193
Vue项目在手机端预览 Win+R建 输入cmd 命令提示符 在界面中输入ipconfig 获取本机ipv4地址 复制地址 在vue项目的根目录下新建 vue.config.js文件 module.exports = { devServer: { host: ‘192.168.1.131’, //本机的ipv4地址 port: 8080, //端口号 }, publicPath:’./’ （这是vue打包成apk所需指令，不需要可去除） } ...
vue项目在浏览器预览word文档
最新发布
luyi_web的博客
07-26 1753
前端借助第三方库实现浏览器端预览docx文件
Vue项目预览
jolinoy的博客
09-20 314
项目目录：main.jsApp.vueHome.vueGood.vueUser.vueError.vueHeader.vueCrumb.vueLogin.vueToast.vueCart.vueList.vueglobal.css.env.dev.env.prodREADME.md。
vue项目 使用手机预览
Web_Notes的博客
02-21 640
手机预览vue项目
Vue移动端项目实现使用手机预览调试操作
11-20
最近在开发移动端Vue移动端项目，查了一些资料，这里分享下如何在webpack工具构建下的vue项目，在手机端调试和预览，言归正传。 1.电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器，使用同一个wifi...
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
10-18
首先，为了在Vue项目中使用pdf.js，你可以通过npm或cnpm来安装`pdfjs-dist`包，例如： ```bash cnpm install --save pdfjs-dist ``` 安装完成后，可以在Vue组件中引入并使用pdf.js。以下是一个简单的例子，展示如何...
一个移动端专用的Vue2图片预览插件
08-12
Vue2图片预览插件是针对移动端应用设计的，它利用Vue.js框架的强大功能，为用户提供了一种便捷、高效的方式来进行图片预览。Vue.js是一个轻量级的前端JavaScript框架，以其组件化、易上手的特性在开发界受到广泛欢迎...
vue实现移动端input上传视频、音频
10-14
在本文中，我们将探讨如何在移动端使用Vue.js框架实现视频和音频文件的上传功能。文章首先介绍了基本的HTML结构，通过隐藏的input元素配合label标签实现用户上传文件的操作。接着详细解析了JavaScript代码部分，包括...
vue 实现全屏预览功能； 以及js 实现预览功能
小先生编程
04-26 3579
通过点击图片按钮,动态切换全屏预览 引入screenfull 模块,建议使用5.2.0版本,更高版本有可能会出现编译错误. npm install screenfull@5.2.0 实现 <template> <img src="../img/fullScreen" @click="fullScreenClick()"> </template> <script> import screenfull from 'screenfull' export def
vue移动端登录界面.zip
01-09
多套app登录页面
基于vue的移动端的商城，很全，购物车，登录注册，短信验证，
10-05
基于vue，新手必备项目，结构布局，都有很好的借鉴，购购物车动画，登录拦截都做了处理，
h5 css3移动端漂亮登录界面
04-10
h5 css3移动端漂亮登录界面,使用了vue.js,已经打包,响应式布局,自动适应不同设备.
一文带你使用Vue完成移动端(apk)项目
热门推荐
CSDN凉宸
06-09 2万+
目录结构： 基本配置 入口文件main.js 首先做一个引入 我们的Vant UI组件是按需引入，而Element UI是全部引入 所以引用方式也不同 main.js完整代码 // 引入Vue import Vue from 'vue' // 引入根组件App.vue import App from './App.vue' // 引入router路由 import router from './router' import store from './store' // 引入axios import
vue中发布预览
qq_50031016的博客
07-06 879
发布预览 项目中，后台管理添加成功之后，我们需要判断看到网站上的布局是否混乱，是否是我们想要的样式，所以就有发布预览 1，首先，我们需要在网站上新建一个发布预览的.vue页面，然后把共用页面的引入 <template> <div> <!-- 放图片 --> <div> <b-card overlay :img-src="listings" img-alt="C
css设置背景虚化，vue移动端登录页
qq_39650208的博客
06-19 2671
先看结果： 1、需要设置两个并列的div，第一个div代表背景部分，第二个div表示内容主体。如下： 代码如下； <template> <div style="height: 100%; width: 100%"> <div class="bg-blur"></div> <div class="login_info"> <h3>欢迎登录</h3> <x-inp
vue移动端用户登录界面_20个美丽的移动用户界面，激发您的灵感
cune1359的博客
06-30 2584
在当今步调一致的Web空间中，移动界面的设计人员正变得越来越重要。 尽管针对移动设备进行了优化的网站可能减轻了网站开发人员的负担，但有些人更喜欢构建功能全面的应用程序。 现在，对应用程序设计人员和开发人员的需求特别高，尤其是在用户界面方面。 UI设计着重于用户体验和交互 ，尽管易于使用很重要，但有吸引力且实用的设计对于应用程序的成功至关重要 。 今天，我想向您展示一些模型，草图，按钮，...
Vue移动端系列 =＞ [02] 登陆注册
Write less，do more
11-02 901
二、登录注册 目标 能实现登录页面的布局 能实现基本登录功能 能掌握 Vant 中 Toast 提示组件的使用 能理解 API 请求模块的封装 能理解发送验证码的实现思路 能理解 Vant Form 实现表单验证的使用 准备 创建组件并配置路由 1、创建 src/views/login.vue 并写入以下内容 <template> <div class="login">登录页面</div> </template> <script> e
Vue 移动端开发实现微信登录
卜卦的博客
07-19 2877
1 打包app，需要去微信开放者平台申请（https://open.weixin.qq.com/） appid 和 appsecret // 跳转到微信 into_weixin (headImage) { let ts = this var auths = null var aweixin = null plus.oauth.getS...
使用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文件了。当然，还可以根据需要添加一些控制按钮，比如翻页、缩放等功能。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

手掌日月摘星辰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值