Vue
youyudexiaowangzi
读书苦,读书累,晓来谁染霜林醉,名落孙山泪
展开
-
vue init webpack xxx报错timeout
如果直接下载zip,下载的名称是webpack-develop.zip,解压后将webpack-develop改名为webpack,然后将webpack复制到c:\users\xxxxx\.vue-templates目录里面。可以ping通,但是打不开网页,所以开了代理,但是执行git clone的时候还是报错timeout。但是这个报错的ip可以ping通。然后git clone执行成功了。最后需要同构如下命令取消配置。于是把自己的代理的端口配置到git命令中。今天创建项目的时候报错timeout。原创 2022-09-21 18:59:48 · 733 阅读 · 0 评论 -
ios微信公众号返回上一级页面的时候页面数据没有刷新
ios微信公众号返回上一级页面的时候页面数据没有刷新原创 2022-02-24 18:02:09 · 1593 阅读 · 0 评论 -
mint-ui MessageBox点击确定后返回上一级页面不生效
mint-ui的messagebox点击确定后,返回上一级页面的代码不生效原创 2022-02-24 17:45:41 · 592 阅读 · 0 评论 -
electron vue中使用el-slider显示不了tooltip
今天项目中第一次使用el-slider发现element-ui示例中鼠标拖动滑块的时候有tooltip的提示,但是我的electron-vue项目中没有tooltip,在github上找到一个解决方案https://github.com/SimulatedGREG/electron-vue/issues/361也就是.electron-vue/webpack.renderer.config.js的第21行左右let whiteListedModules = ['vue']改成let w.原创 2021-01-14 17:09:00 · 1517 阅读 · 0 评论 -
vue el-table中使用el-popover手动使其消失
vue项目中想点击表格中的一个文本显示一个用popover包裹的控制面板,选择控制面板中的一项后popover消失,向服务器传递数据可是popover弹出后,需要鼠标点击一下才能消失,于是只能自己模拟一下鼠标点击事件,但是又不是什么东西都能点,所以干脆创建一个看不到的div,然后触发div的点击事件<div ref="closePopover"></div>....this.$refs.closePopover.click()在popover中执行操作之后,调用原创 2021-01-07 11:24:41 · 1850 阅读 · 1 评论 -
webpack从index.html中引入vue.min.js改为webpack引入vue包
原项目是vue,在index.html中通过script的方式引入vue、element-ui等重要库。现将其改为通过npm install 的方式引入package原创 2021-01-05 16:25:50 · 773 阅读 · 0 评论 -
windows批处理执行了npm run build之后,后面的命令不执行了
今天写了一个bat脚本,想着自动处理编译前后的工作,结果执行完npm run build之后,bat就结束了,后面的命令都没执行,以为是bug,查找半天发现是npm run build之后,bat结束了,为了保证npm run build后面的命令能正常运行,于是修改了一下把 npm run build改成call npm run build相当于把npm run build当成一个脚本执行,就算这个脚本结束了,也只是结束了一个call,不会结束call所在的脚本...原创 2020-11-03 10:05:05 · 5090 阅读 · 2 评论 -
浏览器不支持es6语法,vue配置es6转es5
main.jsimport 'babel-polyfill'import Vue from 'vue'import Es6Promise from 'es6-promise'require('es6-promise').polyfill()Es6Promise.polyfill()原创 2020-09-24 21:53:56 · 820 阅读 · 0 评论 -
美化element中的el-table滚动条
el-table设置height后,数据越界的时候会显示垂直滚动条,但是那个滚动条是真的丑给el-table添加classs随便写个名字,此处用的是bueatyScroll/**改变浏览器默认的滚动条样式*/.bueatyScroll .el-table__body-wrapper::-webkit-scrollbar-track-piece { background-color:#f8f8f8;}.bueatyScroll .el-table__body-wrapper::-webk原创 2020-09-24 16:03:23 · 3370 阅读 · 0 评论 -
Sublime text 3格式化vue代码
利用的是插件HTML-CSS-JS prettif,要先安装,然后配置HTML-CSS-JS prettif的nodejs路径一、安装1. 打开菜单 -> 首选项(Perferences) -> 插件控制(Packpage Control),输入"Install Package"或者ctrl+shift+p,然后输入Install Package2. 等待程序进入插件管理功能,再输入插件名称:"HTML-CSS-JS prettify"3. 点击安装插件 "HTML-CS原创 2020-09-21 16:49:21 · 731 阅读 · 0 评论 -
vue项目播放rtmp直播流
windows、chrome浏览器、vue项目安装依赖npm install vue-video-player -Smain.js引入import VideoPlayer from 'vue-video-player'import 'videojs-flash'//import 'videojs-contrib-hls'//不确定是否需要了require('video.js/dist/video-js.css')require('vue-video-player/src/cust原创 2020-08-01 13:28:50 · 4315 阅读 · 3 评论 -
vue histroy模式的route带参数
前端vue后端nginx假如项目根目录设定为/web/serviceshttp://example.com/web/services/user/:user_idrouter/index.js设置import Vue from 'vue'import Router from 'vue-router'import index from '@/components/index'import download from '@/components/download'Vue.use(R原创 2020-07-15 22:21:08 · 794 阅读 · 0 评论 -
Error in mounted hook: “TypeError: handler.call is not a function“
不够细心mounted(){},写成了mounted:{},mounted应该是函数,错误的写法将其定义为对象了原创 2020-07-07 16:49:31 · 452 阅读 · 0 评论 -
h5调用摄像头之webRTC
今天研究了一下web页面打开摄像头的方法,踩了好多坑之后记录一下,以免以后重复踩坑参考https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices关键字: webRTC、mediaDevices项目:vue(其实与vue无关,纯html+js也可以使用)参考:https://webrtc.github.io/samples/src/content/getusermedia/gum/源码:https://github.com/w原创 2020-06-25 15:00:13 · 2187 阅读 · 2 评论 -
创建vue项目报错request to http://registry.npm.taobao.org/vue failed, reason: getaddrinfo ENOTFOUND registr
今天创建vue项目的时候报错了npm ERR! code ENOTFOUNDnpm ERR! errno ENOTFOUNDnpm ERR! network request to http://registry.npm.taobao.org/vue failed, reason: getaddrinfo ENOTFOUND registry.npm.taobao.orgnpm ERR! network This is a problem related to network connectivi原创 2020-06-23 11:57:42 · 5395 阅读 · 0 评论 -
vue给每个aiox请求添加参数
web项目中有时候为了排查问题,需要找到发起请求的页面,但是同一个请求可能来自多个不同的项目,为了区分来自哪个项目于是,又不至于大动干戈修改每个请求参数,于是想到了拦截请求,添加参数import Vue from 'vue'import App from './App'import router from './router'import axios from 'axios'import qs from 'qs'import './assets/common.css'axios.inte原创 2020-06-23 11:33:07 · 1228 阅读 · 0 评论 -
element-ui字体图标样式再vue部署到服务器之后失效的问题
找到build/utils.js // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader',//加个逗号原创 2020-06-22 14:36:54 · 498 阅读 · 0 评论 -
Vue根据浏览器版本加载不同的组件
今天测试vue项目的时候,发现ie9上运行一片白屏,地址栏也没有直接跳转到redirect的子组件中,控制台中发现错误'Blob' undefined重新创建项目,一点点添加原项目中添加组件,发现是vue-cropper导致的,npm install --save vue-cropper没问题,但是在main.js中import的时候就出现问题了,于是只能尝试在main.js中动态加载vue-cropperimport 'babel-polyfill'import Vue from 'vue'原创 2020-06-22 13:18:38 · 943 阅读 · 0 评论 -
vue el-table中使用el-select选中后无效
需求:表格中一行显示一条数据,数据中的某个属性要展示一列,并且再另一列中用el-select用作选择修改,修改后提示用户是从从原来的状态改为新状态。表格数据从服务器返回,为了修改时获取原来的状态和新状态,给每一行数据新增了一个字段,但是点击下拉框的时候发现下拉框选择后没有生效,几经调整后发现是添加新字段的原因服务器返回数据:returnData:数组。。。。 this.users = returnData this.users.forEach(item=>{原创 2020-06-06 11:20:06 · 2224 阅读 · 0 评论 -
vue设置background image之后,本地有效,线上看不到图片
设置背景图本来在css中使用background属性十分简单,但是vue项目经过编译之后图片的url会改变,然后和项目的根地址结合,可能产生出一个不存在的url,导致加载背景图失败原:.invitationBoard{ width: 3.45rem; height: 1.18rem; background:url('../../../static/images/headBg.png') no-repeat; background-size: 100% 100%;}为了让url不至于出原创 2020-05-13 10:11:46 · 1845 阅读 · 0 评论 -
vue自定义组件之触屏轮播
手机上检测touch事件,根据左右滑动实现轮播效果<template> <div class="touch_swipe_root" :id="realID" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"> <slot></s...原创 2020-04-27 18:45:54 · 326 阅读 · 0 评论 -
Vue自定义组件之自动轮播
Vue为了方便样式复用,提供了自定义组件的功能,以前也做过,都是一个<child></child>就用了,但是今天想要在子组件中添加元素,让元素一起生效,实现swipe效果CustomSwipe.vue<template> <div class="swipe_root" :id="realID" @mouseenter="enter()" @...原创 2020-04-23 15:36:59 · 711 阅读 · 0 评论 -
vue,js分块上传文件
前端使用vue,uploadFile.jsimport Vue from 'vue'import SparkMD5 from 'spark-md5'export default function() { // 将上传文件的方法挂载到vue的原型链上面 Vue.prototype.uploadFile = uploadFile function uploadFile(...原创 2019-10-22 15:21:09 · 798 阅读 · 0 评论 -
vue 多项目history模式在nginx下配置同一访问目录
vue的history模式设置参考:https://blog.csdn.net/youyudexiaowangzi/article/details/81777939但是一个项目设置一个location的话,项目多了维护起来也麻烦,而且多是重复的,于是想添加目录web,然后把所有项目放入web目录,所有location放入 location ^~ web {}中配置如下:nginx....原创 2019-10-17 10:08:25 · 685 阅读 · 0 评论 -
记录一个不编码中文在浏览器devtool中乱码的问题
环境:服务器:nginx前端:vue-cli、代理现象:vue中使用axios请求一个文件,文件内容是json格式的字符串,其中中文没有进行编码,默认对一个对象进行编码的话,里面的中文会被编码成 '\u6309\u76ee' 这种格式,但是这样编码的内容肉眼看不懂,也不好修改,所以php进行json_encode($obj, JSON_UNESCAPED_UNICODE).可...原创 2019-06-20 17:53:38 · 970 阅读 · 0 评论 -
vue使用二维码
vue使用二维码,我有用过两个插件vue-qr和qrcode.vue引用方法如下qrcode.vue:main.js中import QrcodeVue from 'qrcode.vue'、或者要用到qrcode的vue文件中import QrcodeVue from 'qrcode.vue'然后main.js中Vue.component('qrcode-vue', QrcodeVue)、...原创 2018-08-10 18:38:16 · 2074 阅读 · 3 评论 -
微信pc端浏览器打开页面空白的问题
今天写了一个web项目,用chrome浏览器,手机端微信你打开都没问题,但是在pc端微信打开后是空白的,于是我重新做了一个空白的vue项目,用pc端微信浏览器是可以打开的。慢慢调试发现是语法的问题一步一步减去组件,再一步一步加上组件,最终定位到一个import的组件导致的。原来是pc端微信浏览器不支持部分es6的语法,es6语法主要用到()=>{}和let,但是使用这两个越发...原创 2019-01-11 19:12:29 · 18515 阅读 · 0 评论 -
vue中element-ui的样式在localhost正常,发布到线上样式异常
框架vuemain.js中import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import router from './router'import './assets/common.css'一定要注意vue和router的位置顺序,common.css是自定义的样式,可以...原创 2019-03-25 18:47:30 · 2255 阅读 · 0 评论 -
记录一个element-ui弹出消息框的异常现象
今天使用了element-ui的弹出消息框alert、confirm。本来用的好好的,突然注意到一个细节,消息框弹出时,界面整体变窄了一点点,消息框结束后,页面又恢复原状,从开发者工具中的Elements中看到body多了一个style:padding-right:17px;到另一个页面查看,body并没有多一个style。经过一步一步摸索,发现是body高度比window高度大,导致右边...原创 2019-03-25 18:33:15 · 1170 阅读 · 0 评论 -
微信h5支付
微信h5支付vue项目、微信h5浏览器环境参考文档https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842微信网页开发->微信网页授权->第一步:用户同意授权,获取codehttps://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&...原创 2018-08-23 17:10:18 · 676 阅读 · 4 评论 -
个性化微信分享链接
vue项目、微信浏览器环境参考文档https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115微信网页开发->微信JS-SDK说明文档->3 分享接口php后台jssdk.phphttps://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1...原创 2018-08-23 16:53:30 · 1360 阅读 · 0 评论 -
vue+nginx配置不带#的路径访问
vue+nginx去掉路径中的#nginx代理多个web项目,所以新增的vue web项目不能直接使用location /现在有一个项目distribute,vue改动如下1.修改路由src/router/index.jsexport default new Router({ base: '/distribute/', //多项目情况下的本项目名称 mode:'history'...原创 2018-08-17 15:12:06 · 8339 阅读 · 0 评论 -
前端vue后台linux+nginx+php,记录几个小问题
1.git上下载最新代码后,替换到nginx的www目录,浏览器突然访问不了页面,错误码500排查手段:a.本地不请求数据,单独访问index.php网页,访问失败b.linux本地浏览器访问本地index.php,http://localhost,访问失败c.替换为以前的版本,然后代码一点点覆盖,结果发现最新代码缺少一个功能库,把以前版本的库添加过来,ok,结论:代码问题,可...原创 2018-07-26 19:19:37 · 993 阅读 · 0 评论 -
vue实现safari下拉选择滚轮效果
vue使用iosSelect实现safari下拉菜单的滚轮效果,这里根据其例子实现地区选择的三级联动滚轮效果可以不执行npm install --save iosSelect,直接去github上下载源码https://github.com/zhoushengmufc/iosselect我的例子来源于demo中的three,正好是地区选择的三级联动<template> &...原创 2018-08-17 10:32:50 · 1733 阅读 · 0 评论 -
vue项目部署到lnmp中
前端框架:vue后台:lnmp,linux系统,php后台,nginx服务器,mysql数据库,重要的是nginx,及其配置部署前:vue项目npm run dev之后就可以在浏览器中http://localhost:8080验收成果,还可以通过网络请求于后台php交互,实际应用:可能存在多个前端页面,不可能每个项目都占用8080端口不可能一直在本地跑,最起码要映射到互联网...原创 2018-08-04 21:12:34 · 1135 阅读 · 0 评论 -
vue-scroller用法
今天要用vue实现一个下拉刷新,上拉加载更多的功能,百度发现各种scroll,iscroll、better-scroscroller、vue-infinite-scroll等,最终选择了vue-scroller,没别的原因,就是看这个名字顺眼。先说简单用法安装:npm install vue-scroller -D //网上看是这个参数main.js:import VueS...原创 2018-07-21 14:55:31 · 19927 阅读 · 16 评论 -
vue中使用回调函数,this调用无效
let self = this //使用新变量替换this,以免this无效//updateStudentInfoToServer是一个将本身部分数据异步上传的接口,接收三个参数,其中第一个是数据,第二、三个是函数,第二、三个函数使用function(){}形式书写updateStudentInfoToServer:function(data, networkOk, netw...原创 2018-07-03 18:10:03 · 19032 阅读 · 1 评论 -
vue中v-for遍历数组循环生成的控件使用v-if动态判断另一个数组中的值
<el-dialog title="title" :visible.sync="dialogVisible" width="600" > <div v-for="(item, index) in studyConditions" style="margin-top:20px;"> <...原创 2018-06-30 18:35:19 · 24317 阅读 · 1 评论 -
vue之XMLHttpRequest上传文件
首先得有一个控件用来选择文件<input type="file" accept="image/*" @change="fileChanged" ref="file">也可以隐藏file控件然后用其他事件触发file控件的chagne事件this.files = this.$refs.file.files //将控件的值赋值给成员变量,可以不用 const f...原创 2018-06-23 21:20:00 · 3665 阅读 · 0 评论 -
Vue学习笔记:初入门
Vue学习笔记:记录于此,以观后效(1) 使用export抛出的变量需要用{}进行import: //a.js export function getList(){}; //b.js import { getList } from ‘./a.js’;(2) 使用export default抛出的变量,只需要自己起一个名字就行: //a.js var obj = { name: ‘zhazhahui...原创 2018-06-21 19:43:59 · 385 阅读 · 0 评论