vue
关注
分享
扫一扫
文章平均质量分 72
weixin_43844392
这个作者很懒，什么都没留下…
展开
-
vite 原理解析与实践
vite 原理解析与实践vite 是什么？Vite (法语意为 “快速的”，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源。Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有原创 2021-06-10 10:50:02 · 1223 阅读 · 0 评论 -
Vue这些修饰符帮我节省20%的开发时间
作者：李大雷https://segmentfault.com/a/1190000016786254为了方便大家写代码，vue.js给大家提供了很多方便的修饰符，比如我们经常用到的取消冒泡，阻止默认事件等等~目录 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符（实在不知道叫啥名字） 表单修饰符填写表单，最常...转载 2020-01-17 11:26:24 · 102 阅读 · 0 评论 -
关于公共组件搜索框在搜索页面不起作用的问题
上面的组件是一个公共组件，我们在搜索框输入内容，然后点击搜索框跳转到搜索的结果页，当我问在搜索的结果页再次调用搜索框的时候相当于从当前的搜索页在一次跳转到搜索页同页面跳转。参数改变但是页面没办法更新其实这个问题的本质是：同页面跳转，只改变参数，但是页面不刷新分析：其实导致这个问题最主要的原因是因为：vue的路由切换实际上是组件之间的切换引用相同的组件时页面不更新解决办法：监听路由 wat...原创 2020-01-16 16:02:50 · 611 阅读 · 0 评论 -
vue 路由守卫
vue-router 提供的导航守卫主要用来通过或取消的方式来守卫导航。有多种机会植入路由导航的过程：主要分为全局导航，单个路由导航 组件导航所谓路由导航我们可以这么理解，导航守卫就相当于保安的意思，你要进入这个房子，保安需要知道你是（to, from, next）打哪去，从哪来。我们就拿登录来就例子：保安守卫一个房子 有一个客人来拜访（路由跳转）保安要问清楚从哪来（from）到哪去（to） ...原创 2020-01-16 15:45:23 · 188 阅读 · 0 评论 -
关于移动端Excel 文件下载的问题
具体实现过程：1、添加依赖在这需要添加3个依赖包和2个js文件使用npm安装npm install -S file-saver xlsx（file-saver依赖 和xlsx依赖）npm install -D script-loader2、下载引入js包下载两个js文件下载地址：链接：https://pan.baidu.com/s/1LS7iLMko93Tx3Mi5RIveeg提...原创 2019-12-19 18:34:24 · 2774 阅读 · 0 评论 -
vue scss 一键更换主题色，字体等页面等页面大体样式
主要采用scss 编程式思想实现以上文件从上到下进行说明_variables.scss 文件主要写主题色 字体边框等变量内容如下：—————————————————————————————————————————————————// colors$colors: ( // 主题色 'primary': #0066ff, "header-bg":#fff, ...原创 2019-12-19 17:56:38 · 1461 阅读 · 0 评论 -
关于请假申请的时间计算
最近在优化一个办公系统，需要计算请假时间首先要实现请假时间的计算，需要以下几步第一步、首先我们要知道时间表（我们以最常用的 上午上班时间（09：00 - 12：00）下午（13：00 - 18：00）为例）第二步，我们分析可能出现的可能性1、早上请假2、下午请假3、跨中午请假4、跨天但又不满一天请假5、跨天满一天请假6、跨周请假（需要除去周末）7、节假日请假...原创 2019-12-19 17:39:05 · 4224 阅读 · 0 评论 -
如何在Vue项目中使用vw实现移动端适配
有关于移动端的适配布局一直以来都是众说纷纭，对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible的布局方案，随着viewport单位越来越受到众多浏览器的支持，因此在《再聊移动端页面的适配》一文中提出了vw来做移动端的适配问题。到目前为止不管是哪一种方案，都还存在一定的缺陷。言外之意，还没有哪一个方案是完美的。事实上真的不完美？其实不然。最近为...转载 2019-11-05 09:53:55 · 145 阅读 · 0 评论 -
基于Cordova插件创建app及打包成apk
基于Cordova插件创建app及打包成apk1.配置开发环境一：下载并安装node.js（npm功能可以使用）二：利用npm安装cordova插件三：配置JAVA+ANDROID+GRDLE的系统环境1)java jdk+jre设置正确（cmd中java和javac指令可以使用）JAVA_HOME:C:\Program Files\Java\jdk1.8...转载 2019-07-11 11:14:10 · 344 阅读 · 0 评论 -
基于vue的页面加载动画
基本原理是，在window加载之前，渲染出加载动画，页面渲染完成后，移除加载动画即可在vue项目中一般只需二步第一步，写css和dom在vue项目的index.html中引入css第二步 在app.vue created中移除加载动画运行效果：这样加载动画就完成了。...原创 2019-09-18 16:37:29 · 9775 阅读 · 4 评论 -
几种炫酷的加载动画
动画一// An highlighted block<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { ba...原创 2019-09-18 16:54:05 · 1210 阅读 · 1 评论 -
vue-recaptcha 谷歌机器人验证
谷歌机器人验证主要是翻墙的问题，首先你要申请一个一个谷歌账号然后去https://www.google.com/recaptcha/intro/v3.html申请密钥下载然后下载vue-recaptcha 插件（所对应https://github.com/DanSnow/vue-recaptcha） npm install --save vue-recaptcha然后在组件...原创 2019-09-18 17:12:41 · 4149 阅读 · 2 评论 -
基于vue的分享插件
vue-socialmedia-share 是一个可以分享到facebook weibo等多个社交网站的插件使用十分简单第一步：npm install vue-socialmedia-share<template> <div class="hello"> <facebook :url="url" scale="3"></facebook&...原创 2019-09-18 17:18:07 · 4078 阅读 · 0 评论 -
基于vue的图片查看插件v-viewer
效果如图所示github地址https://github.com/mirari/v-viewer使用方法很简单具体参考gitHub最靠谱原创 2019-09-18 17:22:57 · 550 阅读 · 0 评论 -
基于vue的swiper动画轮播图
以前做轮播都是参照https://www.swiper.com.cn/去做，使用最多的是https://github.com/surmon-china/vue-awesome-swiper这个插件但是，因为介绍不够详细经常性遇到各种问题，。直到几天前我看到一个网址，忽然觉得以前解决问题的时间全部白花了。https://surmon-china.github.io/vue-awes...原创 2019-09-18 17:33:38 · 2419 阅读 · 1 评论 -
回到顶部效果
这主要展示回到顶部的效果html<div v-show="showTop" class="toTop" @click="scrollToTop"> <span class="fa fa-angle-double-up"></span> </div>--------------------------------------...原创 2019-09-18 18:05:23 · 181 阅读 · 1 评论 -
moment 时间格式的封装
在这使用一个时间工具类来做一个格式规划，获取时间的格式你可以自己定义。// 在这主要是用来：// 获取前一天的时间，时间分隔点为1小时，// 获取前一周的时间，时间间隔为一天，// 获取前一个的时间，时间间隔为一天/*eslint-disable*/import moment from 'moment'import 'moment/locale/zh-cn'moment.loc...原创 2019-06-27 16:33:41 · 519 阅读 · 0 评论 -
根据时间判断在多少时间前传入
timeConversion (data) { let curTime = Math.round((new Date()).getTime() / 1000) // 传入时间的秒数 let paramsTime = Math.round(new Date(data).getTime() / 1000) // 求时间戳 let timestamp = Ma...原创 2019-06-27 16:28:47 · 130 阅读 · 0 评论 -
基于vue项目的上拉刷新，下拉加载的效果
使用插件better-scroll安装使用教程http://ustbhuangyi.github.io/better-scroll/doc/installation.html#npm还是看官网比较好子组件：<template> <keep-alive> <div ref="wrapper" class="scroll-wrap...原创 2019-06-27 16:27:23 · 1944 阅读 · 0 评论 -
slots的内容
发现大佬一枚，传送门 这篇文章对插槽解释的非常清楚https://blog.csdn.net/sinat_17775997/article/details/52484072转载 2018-12-26 09:58:13 · 142 阅读 · 0 评论 -
在 vue项目中进行seo优化（页面的预渲染）
项目打包时有时候需要进行页面的seo的优化现在主要的优化有两种1、ssr服务器优化（在这不做过多的解释 具体vue官网上的解释 https://cn.vuejs.org/v2/guide/ssr.html）2、我们在这主要讨论的时页面的预渲染目标：对页面进行预渲染从而达到seo优化实现步骤：1、安装prerender-spa-plugin 插件npm inst...原创 2019-03-25 19:02:03 · 3319 阅读 · 1 评论 -
给已经创建好的项目添加eslint
今天拿到一个项目，发现没有安装eslint.现在就在这大概记录一下vue项目添加eslint的具体的过程实现目标:给项目添加eslint(在这叫做demo)准备工作：找一个已经开启了eslint的项目(在这叫做demo1)（没有的话，可以直接新建一个项目，新建项目的话就不再这个详细的说了 大家具体可以参考https://www.jianshu.com/p/1626b8643676/这个网...原创 2019-03-19 12:56:19 · 1903 阅读 · 0 评论 -
vue项目中的excel文件的导入
今天在做后台的时候，要实现文件导入的效果，在网上搜了好久，也没有搜到一个详细的文档。好不容易做出来了，在这记录一下实现目标：在vue项目中excel 文件的导入具体实现过程：1、添加依赖在这需要添加3个依赖包和2个js文件使用npm安装npm install -S file-saver xlsx（file-saver依赖 和xlsx依赖）npm install -...原创 2019-03-22 18:26:33 · 4778 阅读 · 1 评论 -
解决一个iview table组件报错问题You may have an infinite update loop in watcher with expression "columns"
问题如下组件如下data数据如下这是因为iview 的table 组件不支持 双表头我在网上搜了一遍，看见大佬改了ivew 的源码（666）将view.js中columns: { handler: function handler() { var colsWithId = this.makeColumnsId(this.colum...原创 2019-03-22 18:39:20 · 3148 阅读 · 0 评论 -
Vue实现动态锚点
前几天做项目的时候，需要实现一个动态锚点的效果如果是传统项目，这个效果就非常简单。但是放到 Vue 中，就有两大难题：1. 在没有 jQuery 的 animate() 方法的情况下，如何实现平滑滚动？2. 如何监听页面滚动事件？在浏览了大量文章、进行多次尝试之后，终于解决了这些问题期间主要涉及到了setTimeout 的递归用法，和 Vue 生命周期中的moun...转载 2019-04-12 10:34:55 · 19570 阅读 · 7 评论 -
vue.nextTick具体解析
对于 Vue.nextTick 方法，自己有些疑惑。在查询了各种资料后，总结了一下其原理和用途，如有错误，请不吝赐教。在此说明，全文转载自https://segmentfault.com/a/1190000012861862?utm_source=tag-newest写到这只是为了查看方便概览官方文档说明：用法：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后...转载 2019-04-12 11:07:11 · 132 阅读 · 0 评论 -
多个倒计时实现 vue
https://blog.csdn.net/qq_42221334/article/details/87864020转载 2019-04-26 15:06:32 · 870 阅读 · 0 评论 -
在 vue项目中 时间戳转换为日期
方法一：// date.jsexport function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } let o = {...原创 2019-04-26 16:24:13 · 2345 阅读 · 1 评论 -
vue 项目在 build 后 dist 文件下的 fonts 字体路径不对
今天在build 完 一个项目 生成apk 以后发现引入的fonts 全部都失效了，但是 把生成的 build 文件放在 生成的 css 文件夹下的话，又好了，很明显是路径的问题。在这涉及到 build 公共文件的路径的问题首先 我们先看一下 build 完以后的 dist 文件的目录结构可以看出 fonts 和 css 文件在同一目录下：我们在 build 文件夹下面 找到 ...原创 2019-04-23 18:21:48 · 1501 阅读 · 0 评论 -
vue-cli项目中静态文件过大的问题
我们最近在做一个项目时，因为static 文件中含有几个视频文件，导致static 文件过大，build 的时候非常慢。在这我大概介绍一下上面问题的解决方法：首先我们先要了解一下 webpack 的一个插件 --拷贝插件 copy-webpack-plugin第一步：插件的安装：npm install --save -dev copy-webpack-plugin如果你是用脚手...原创 2019-04-23 18:23:50 · 3304 阅读 · 0 评论 -
前端埋点的简单实现
要记录用户的浏览轨迹知道用户都浏览了哪些页面，在每个页面都停留了多长时间，还有 比如用户所用的手机型号 等个人信息个人信息获取的接口如下：在用户刚进入时获取用户信息3.安装js-cookie 插件npm install js-cookie --save4.在main.js中引入5.利用路由导航实现对不同页面的浏览的时间的记录// 用于...原创 2019-04-23 18:59:23 · 15445 阅读 · 2 评论 -
es6对象遍历规则
ES6一共有五种方法可以遍历对象的属性。for ... in：循环遍历对象自身的和继承的可枚举的属性（不包含Symbol属性） Object.keys(obj)： 返回一个数组，包括对象自身的所有可枚举的属性（不包含继承，不包含Symbol属性） Object.getOwnPropertyNames(obj)：返回一个数组，包含对象自身的所有属性（含继承、不可枚举属性，不含Symbol属性...转载 2019-04-28 18:01:32 · 929 阅读 · 0 评论 -
vue项目中的视频直播插件
所用插件vue-video-player 这是一款基于video.js的视频播放器插件插件的使用：安装：npm install vue-video-player --save全局引入importVuefrom'vue'importVueVideoPlayerfrom'vue-video-player'//requirevideojsst...原创 2019-06-27 15:20:31 · 14971 阅读 · 1 评论 -
基于Vue项目的回到顶部插件
在形目中经常要实现回到顶部的效果，所以我在这做了一个回到顶部的插件。首先，我们先在这说明一下，实现回到顶部的效果所要满足的要求为：要实现回到顶部效果的盒子必须出现横向滚动条。子组件如下所示：原理为监听元素的scroll距离，根据距离判断其滚动距离及滚动速度，和按钮的显示隐藏。<template> <div> <div class="pag...原创 2019-06-27 15:34:56 · 3629 阅读 · 0 评论 -
vue实现多店铺购物车的操作
终于把购物车的大致效果做完了第一步，先模拟json数据，模拟后台数据的目录，具体的数据在data文件夹下的shopcar.json中json数据的模拟（自己胡乱写的一些数据，能说明问题级就行）{ "userid" : 1.0, "totalPrice" : 0.0, "goodsInfo" : true, "checked" : true, "shops"...原创 2018-12-31 15:12:33 · 2241 阅读 · 1 评论