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

使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue create my-vue-typescript 上下键选择,空格键确定 接下来是一些常规选项 下面是询问要不要记录这次配置以便后面直接使用,我们选择y 当确定配置后会在C:\Users\Administrator\.vuerc下生成一个刚选好的配置记录 { "useTaobaoRegistry"…

.移动端实现图片上传并预览,用到h5的input的file属性及filereader对象:经测除了android上不支持多图片上传,其他基本ok实用: 一:先说一下单张图片上传(先上代码): html结构(含多张图片容器div): <div class="fileBtn"> <p>点击添加图片</p> <input id="fileBtn" type="file" onchange="uploa…

github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式 路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #.平时做项目也是默认开启 history 模式.折腾了半天发现,我这是部署到 g…

@vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack 和 webpack-dev-server 之上 安装   如果已安装旧版 需要先卸载旧版本 : npm uninstall vue-cli -g //or yarn global remove vue-cli 任一命令安装全局新包: npm install -g @vue/cli //or yar…

1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli npm install -g @vue/cli 安装之后,可以用如下命令验证它是否安装成功(版本为3.x) vue --version 3.创建项目  eg:项目名称为hcs vue create hcs 提示选取一个 preset ==> a.选默认的包含了基本的 Babel + ESLint 设…

前言 问题一:我们在App内嵌H5开发的过程中,肯定会遇到一个问题就是我不想在chrome的控制台中调试也不想在模拟器中调试,我想要在真机上调试,那么如何解决这个问题呢? 问题二:我们期待调试时达到的效果就是和Charles学习(二)之使用Map local代理本地静态资源在Mac上调试移动端中实现的效果相同,也就是说代码更改手机端页面实时更新,这个问题如何解决? 方案 问题一解决方案:使用真机,需要一台iPhone和一台Android,在真机上安装测试包 问题二解决方案: 配置移动端代理 | …

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

项目中会遇到多张图片点击放大显示原图,并且能够左右滑动切换显示图片的需求,这种效果主要通过js来实现,下面我介绍的主要是借助swiper.js来实现这个完整的功能, 点击“查看协议” => 图片弹出显示,并且可以手动滑动预览,直接代码如下: 需要引入jQuery(或者Zepto)swiper.min.js + swiper.min.css swiper.js下载地址:http://3.swiper.com.cn/download/index.html(实例代码使用的是swiper3) HTML:…

1.电脑和手机要连同一个wifi  一定是复制无线网的IP,而不是以太网的IP 2.在你的电脑上查找无线网络的ipv4地址: 查找方法:windows+r   然后再输入框里输入cmd 回车 会出现这样: 然后输入ipconfig  然后回车 你会看到一个ipv4的地址.复制这个地址 3.在vue中找到config下的index  找到host 将host的值localhost改为刚才复制的那哥ipv4地址即可 4.重启项目: npm  run dev 5.项目运行成功后  例如:http://…