Vue.js
sxs7970
这个作者很懒,什么都没留下…
展开
-
vue项目打包文件chunk-vendors过大优化以及其他的优化方案
直接看我看过的吧点击 这个比较多点击2 这个直接配置点击3 关于一个webpack版本的报错,我用的是webpack@^4.23.0 的,某些新版本的库要求 webpack@5,更新依赖时,根据依赖选择的规则,就以 webpack@5 作为主依赖安装。然而 @vue/cli 依赖 webpack@4,它自带的 webpack 配置无法兼容 webpack@5 ,于是就报错,不能继续编译。点击4 关于Cannot read property ‘tapPromise‘ of undefine.原创 2021-09-29 10:21:46 · 1142 阅读 · 2 评论 -
node版本对应的mode-sass和sass-loasder
新创建的vue3.0项目,用的node版本是@14.16.0的,"node-sass": "^4.14.1""sass-loader": "^7.3.1"亲测有效原创 2021-09-10 14:02:06 · 825 阅读 · 0 评论 -
el-popover的使用
之前在做pc端接通腾讯IM聊天的时候,需要发送表情包,这里用到了element-ui的el-prpover 组件,具体使用也是参考了别人的一篇文章 点击下边是我自己使用的<tempalte> <el-popover placement="top-start" width="400" trigger="click"> <div class="emojis"> <.原创 2021-08-24 15:05:23 · 2602 阅读 · 0 评论 -
vue+blob文件流下载导出world、excel、pdf文件
function exportMethod(data) { axios({ method: 'get', url: 'https:xxx/xxx' + data.url,//接口地址 params: data.data,//如果是post参数放到请求体data中 responseType: 'blob', headers: { 'Content-Type': 'application/json' } }).then((res) =>原创 2021-08-13 16:01:16 · 1487 阅读 · 0 评论 -
使用vue-pdf预览pdf文件
本地预览的话,如果是使用cli/3,需要把pdf文件放到 public 文件下中,新建一个 static 文件夹,放入其中使用安装 vue-pdf只能使用绝对路径,而且 / 就表示 public 文件夹,所以需要忽略掉,如下<pdf src="/static/aaa.pdf"></pdf> ...原创 2021-08-13 14:54:05 · 323 阅读 · 0 评论 -
关于element-ui中table表格的坑
使用element-ui的table的时候,遇到的坑,在使用@row-click和@selection-change 同时的时候,貌似耦合了,直接上:解决方法<el-table @selection-change="onChange_selectChange" ref="twoTable" :data="tableData" style="width: 100%" :expa.原创 2021-07-16 17:16:01 · 323 阅读 · 0 评论 -
pc端做各个屏幕适配(兼容到移动端屏幕尺寸)
做移动端h5适配的,vue-cli2.x的通过使用 lib-flexable 和 px2rem-loader 其实就是通过去把px转换成rem ; 这里有链接 点击vue-cli3.+webpack安装依赖:npm install lib-flexible -Snpm install postcss-plugin-px2rem -Dpostcss-plugin-px2rem; px2rem是postcss的一个插件在 main.js 中引入flexible.js文件,(如果是需要兼.原创 2021-06-22 15:01:56 · 1537 阅读 · 0 评论 -
vue监听localStorage数据
在man.js中// 实施监听本地Vue.prototype.resetSetItem = function (key, newVal) { // 创建一个StorageEvent事件 var newStorageEvent = document.createEvent('StorageEvent'); const storage = { setItem: function (k, val) { localStorage.setItem(k, val); .原创 2021-06-02 13:43:42 · 596 阅读 · 0 评论 -
前端对接stripe支付,创建测试session_is
第一次搞 stripe支付,国外的文档全英文接stripe支付,根据官方文档,首先就是先跟服务端交互,创建session会话,获取id,当服务端不做这个功能时,就需要前端去掉stripe最底层的api,拿到session_id,这时候懵逼了,找吧文档都有官网正常对接服务端的接支付流程:点击创建session会话最底层的api,服务端不对接,需要前端去自己对接,点击这里只是我接触过的,有错误指出来,一起学习,第一次搞这玩意,记录下来,也为后期别的童鞋,让他们少走点弯路.原创 2021-05-21 18:31:32 · 1309 阅读 · 3 评论 -
vue导出excel表格数据
用的vue开发的网站,两种方案,结合element-ui组件库也可以实现,第二种稍微麻烦一点,这里用的第二种1、先下载两个js文件,文件链接在下边,可以直接下载用链接:https://pan.baidu.com/s/1jPSSe5e59k0dKiuLWuRCBw提取码:ymgr复制这段内容后打开百度网盘手机App,操作更方便哦这里单独封装了一下// 封装的导出Excel表格/** * * listArr:导出的表格数据:[{name:'小王',age:'15',gender.原创 2021-05-17 18:07:04 · 177 阅读 · 0 评论 -
禁止穿透蒙层滚动
//弹出蒙层调用preventHandle//关闭蒙层调用cancelHandle preventHandle() { //阻止滚动 var mo = function (e) { e.preventDefault(); }; document.body.style.overflow = "hidden"; document.addEventListener("touchmove", mo, false); //禁止页面滑动.原创 2020-09-13 15:41:14 · 338 阅读 · 0 评论 -
Error: Can‘t find Python executable “python“, you can set the PYTHON env variable.关于解决报错Python的办法
今天遇到一个问题,安装好依赖,运行的时候,一直报关于python的问题,解决方法有,但是不知道为什么,希望大佬可以解释一下解决方法//以管理员身份运行,安装npm install --global --production windows-build-toolsnpm install --global node-gyp...原创 2020-07-14 20:52:15 · 670 阅读 · 0 评论 -
Vue中使用xlsx下载Excel表格
首先安装npm i file-saver -Snpm i xlsx -S<button @click='downTable'>下载表格</button><el-table id="my-table"> </el-table>downTable(){ var xlsxParam = { raw: true }; var wb = XLSX.utils.table_to_book(document.querySel.原创 2020-06-29 16:34:10 · 3588 阅读 · 0 评论 -
Vue中使用select下拉列表以及修改默认样式
element-ui等前端组件库中,都有人家封装好的组件,可以直接拿来用。不想用的那就只能自己写了。<select class="sel-choose" name="" v-model="selId" @change="choose" :class="{'default-color':selected}"> <option value="" id="0" style="...原创 2020-03-23 13:41:29 · 8373 阅读 · 0 评论 -
Vue中computed与watch的结合使用
<template></template><scripte>export default{ data(){ return{ } }, computed:{ myHandle(){ return xxx; } }, watch:{ myHandle(){ //逻辑代码 } }}</scri...原创 2020-02-21 20:23:18 · 1581 阅读 · 0 评论 -
在组件中调用vuex的getters方法时,只调用一次,后边更新数据反而没有调用
vuex的getters类似于计算属性。但是我遇到的问题是,第一次在getters中可以获取到state的数据更新了,但是之后就不会获取到。官方文档好像说:getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的;而getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果。把原来的写法换成方法来写。//gettersmySelf(state){...原创 2020-02-21 18:58:25 · 2738 阅读 · 2 评论 -
Vue中this.$forceUpdate()强制刷新页面
Vue官网的强制更新的具体可以看一下官网有解释,我是遇到一个情况并不一定是一定要刷新一下页面才行,还有别的方法,我只是偶尔看到这个,用法也很简单!比如你做完某个操作需要强制刷新一下页面,在你定义的方法中加入this.$forceUpdate() 就OK了。...原创 2020-02-13 18:20:25 · 1003 阅读 · 0 评论 -
上传视频
使用element-ui的上传组件 beforeUploadVideo(file){//上传之前 var isLt10M = file.size / 1024 / 1024 < 10;//大小 if(['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'].inde...原创 2019-12-03 22:33:32 · 635 阅读 · 0 评论 -
Vue做移动端项目修改滚动条样式
overflow属性先设置好auto或者scroll,而不是hidden,毕竟我们仅仅是隐藏了滚动条,而不是让它整个都不能滚动!属性::webkit-scrollbar //1 滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。::webkit-scrollbar-button //2 滚动条两端的按钮。可以用dis...原创 2019-12-03 22:17:19 · 2288 阅读 · 0 评论 -
Vue项目引入vant组件库中的Popup踩坑
Popup可是设置不同的位置,上下基本没有坑,但是设置左右的时候,会有点小坑解决:左右位置:必须要height设置为100%,还必须加上width:style={width:'20%',height:'100%'}...原创 2019-12-03 22:08:00 · 7568 阅读 · 0 评论 -
Vue移动端开发安装并使用vant
安装npm install vant -S安装 babel-plugin-import 一款babel插件它会在编译过程中将 import 的写法自动转换为按需引入的方式npm i babel-plugin-import -D在.babelrc文件中配置plugins"plugins":[ "transform-vue-jsx", "transform-runtime"...原创 2019-12-03 22:02:37 · 317 阅读 · 0 评论 -
多选功能,并且再次选择,可以取消选择之数组的includes方法
现在有很多组件都可以实现需要的功能,不想用的时候,也可以自己写的<div class="store-detail" v-for="(item,index) in storeDetailData" :class="selStoresArr.includes(index)?'seledShopActive':'selShopActi...原创 2019-11-17 17:07:10 · 147 阅读 · 0 评论 -
Vue项目中使用element-ui的el-table组件以及修改表头的颜色和实现每行的不同状态(隔行变色)
element-ui官网也有使用说明,所以这里直接上代码!<template> <el-table :data="myData" :row-class-name="tableRowClass" :header-cell-style="headeRowClass"> <el-table-column label=...原创 2019-10-13 14:36:16 · 6511 阅读 · 6 评论 -
webpack中使用Vue结合render函数渲染指定的组件
步骤:安装 vue 的包:cnpm i vue -S由于在webpack 中,推荐使用 .vue 这个组件模板文件定义组件,所以,需要安装 能解析这种文件 的 loader cnpm i vue-loader vue-template-compiler -D在 main.js 中,导入 vue 模块 import Vue from 'vue'在根目录下定义一个 .vue 结尾的组件,...原创 2019-03-26 18:26:35 · 1448 阅读 · 0 评论 -
Vue中 $refs 获取DOM元素和组件的引用
说明: vm.$refs 是一个对象,拥有已注册过 ref 的所有元素(或者子组件)使用: 在HTML元素中,添加ref属性,然后在JS中通过vm.$refs.属性来获取注意: 如果获取的是一个子组件,通过 ref 就能获取到子组件中的 data 和 methods添加 ref 属性 <div id='app'> <input type="butto...原创 2019-03-13 11:57:58 · 3511 阅读 · 0 评论 -
Vue中的动画特效
文章目录Vue中的css动画原理在Vue中修改v-前缀在Vue中使用第三方类库animate.css在Vue中动画特效的钩子函数在Vue中列表过渡动画Vue中的css动画原理vue中的动画原理其实就是,css3中的transition属性。当一个元素被transition包裹的时候,vue会自动分析一下元素的css样式,然后构建一个动画的流程,在动画即将被执行的一瞬间,他会往内部的di...原创 2019-03-04 19:49:44 · 684 阅读 · 0 评论 -
Vue路由中 query和params传参
vue-router 中 query和params传参两者有区别,直白点就是:query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数;而params相当于post请求,参数不会再地址栏中显示1.query地址栏:<div id='app'> <!-- 如果子啊路由中,使用 查询字符串,给路由传递参数,则不需要修改 路由规则的 path ...原创 2019-03-14 11:30:39 · 704 阅读 · 0 评论 -
Vue的生命周期详解(钩子函数)
文章目录一、Vue生命周期详细图解二、钩子函数详解1、beforeCreate2、created3、beforeMount4、mounted5、beforeUpdate6、updated7、beforeDestroy8、destroyed一、Vue生命周期详细图解Vue实例从创建到销毁的过程,就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂在Dom、渲染→更新→渲染、卸载等一系...原创 2019-02-20 14:14:08 · 737 阅读 · 1 评论 -
MUI scroll顶部滑动条问题
在使用webpack打包时,使用Vue和MUI 中的 scroll 和 Tabbar 的时候会出现一些坑!!!6坑以及解决6坑的方法:制作滑动条,不想自己写,想找模板,就用 MUI 中的 tab-top-webview-main.html当 html 样式引过来的时候,有一个类必须去掉,要不然他会覆盖整个屏幕,所以需要把 slider区域 的 mui-fullscreen 删除掉。上边...原创 2019-04-01 18:18:10 · 1004 阅读 · 1 评论 -
Vue购物车小球动画适应滚动条不同位置和不同分辨率
我们把 小球 最终 位移到的 位置,已经局限在了某 一分辨率下 滚动条未滚动的情况下只要分辨率 和 测试的时候不一样,或者 滚动条 有一定的滚动的距离之后,问题就出现了;.因此,我们经过分析,得到结论:不能把 位置的横纵坐标 直接写死了,而是应该 根据不同情况,动态计算这个 坐标值;经过分析,得出解题思路:先得到 购物车徽标 的横纵坐标,再得到 小球的 横纵坐标,然后让 y 值 求差,...原创 2019-04-06 21:49:19 · 397 阅读 · 0 评论 -
全局导入mint-ui和按需引入mint-ui
mint-ui 是基于Vue.js的移动端组件库安装Mint-UIcnpm i mint-ui -S全局导入,在main.js 文件中先导入Vue.js,然后再导入:import MintUI from 'mint-ui'; //这是把所有组件导入进来import 'mint-ui/lib/style.css'//将 MintUI 安装到 Vue 上Vue.use(MintU...原创 2019-03-28 18:33:55 · 1557 阅读 · 0 评论 -
Mint-UI中的Toast提示框
在 Mint-UI 中,分为三部分组件:JS Components、CSS Components、Form Components在mint-ui中,一般 JS Components 都需要按需引入。在 上一篇 全局导入mint-ui和按需导入mint-ui,有详细的说。接下来直接看例子:<template> <div> <h1>这是Ap...原创 2019-03-28 19:00:07 · 11089 阅读 · 0 评论 -
如何在手机上查看测试vue构建的项目
最近在学vue,写一个小项目,但是怎么把自己写好的项目在手机上面测试呢,比如移动端的1px边框问题,在电脑模拟的手机端是看不到的。注意:要保证 手机 和 开发项目的电脑 处于 同一个 WIFI 环境中,也就是说 手机 可以访问到 电脑 IP打开自己的 项目中 package.json 文件,在 dev 脚本中 ,添加一个 --host 指令,把当前 电脑 WIFI IP地址,设置为 --...原创 2019-04-02 23:24:54 · 847 阅读 · 0 评论 -
vue2.0 $router和$route的区别
做项目的时候发现传参数是通过 this.$route.query或者 this.$route.params 接收 router-link 传的参数。在网页中有两种跳转方式方式1:使用 a 标签 跳转;(或者是 router-link )方式2:使用 window.location.href 的形式,叫做 编程式导航 (简单说就是写JS代码,实现跳转)vue-router 提供了一...原创 2019-04-03 11:25:45 · 166 阅读 · 0 评论 -
Vuex的理解
各种基本步骤,比如下载,导入,挂载,都在 Vuex基本使用 中。仅有一个store先创建一个store实例const store=Vuex.Store({})实例(仅有一个store),里面的state用来保存数据,获取数据就是this.$store.stateGetters: 相当于vue中的computed计算属性,getter的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生...原创 2019-07-06 19:56:53 · 180 阅读 · 0 评论 -
vue使用element-ui组件中的日期时间选择器下拉框位置渲染的"bug"
在之前做个一个组件页面中,引用了element-ui组件的日期选择器,遇到的一个小问题,就是在渲染出来下拉选择框的位置上出现问题,第一次渲染出来,位置正常,第二次选择的时候,发现位置偏得离谱。解决在做显示隐藏的时候,用的是 v-if ,如果不了解v-if 和 v-show 的区别的话可以去vue官网或者百度一下。解决方法就是你把v-if换成v-show就行了。如果你用v-if的话每...原创 2019-08-24 13:21:17 · 6014 阅读 · 2 评论 -
Vue动画-使用钩子函数实现半场动画(添加购物车之类的半场动画可用)
动画钩子函数v-on:before-enter:表示动画入场之前,此时,动画尚未开始,可以在 before-enter中,设置元素。开始动画之前的其实样式。v-on:enter:表示动画,开始之后的样式,可以设置完成动画的结束状态v-on:after-enter:表示动画完成后的状态v-on:enter-cancelled:用于取消开始动画添加购物车半场动画例子<transi...原创 2019-03-04 21:42:38 · 459 阅读 · 0 评论