分类：vue

2020
09-24

如何解决vue在ios微信"复制链接"功能问题

这个问题在安卓上是完全没有问题的，可是到了iPhone上就彻底失效了。因为ios微信对vue路由中的#号识别问题。我的解决办法是在初始进入项目时重新拼接项目地址，再重定向到拼接的地址去。先获取到#号前的路由地址，再手动添加我们的#号和当前项目地址后缀：在路由router.js里的beforeEach函数写截取地址//重定向功能，为解决ios微信上复制链接功能不能复制到动态路由问题//获取地址前段部分，不算参数varreplaceUrl=window.lo... 继续阅读 >

2020
09-24

vue在线动态切换主题色方案

主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css具体实现步骤如下：1.添加webpack插件，新建文件webpack/themePlugin.jsconstThemeColorReplacer=require('webpack-theme-color-replacer')constforElementUI=require('webpack-theme-color-replacer/forElementUI')constconfig=require('../src/config/appConfig')module.exports=newThemeColorReplacer({fileN... 继续阅读 >

2020
09-24

vue+element 实现商城主题开发的示例代码

本文介绍了vue+element实现商城主题开发的示例代码，分享给大家，具体如下：<template><div><divclass="set-phone"><el-form:model="theme":rules="rules"ref="ruleForm"class="demo-ruleForm"><el-form-itemlabel="主题名称:"prop="name"><el-inputv-model="theme.name"size="small"maxlength="18"show-word-limit></el-input></el-form-item><el-form-itemlabel="顶部背景色:"prop="backgroundColor"... 继续阅读 >

2020
09-24

vue页面更新patch的实现示例

patch的流程组件页面渲染时，将render返回的新vnode（新节点）和组件实例保存的vnode（旧节点）作为参数，调用patch方法，更新DOM。判断两个节点是否相同处理过程中，需要判断节点是否相同。相同节点需要满足以下条件：key相同标签类型相同注释节点标识相同，都是注释节点，或者都不是注释节点data的值状态相同，或者都有值，或者都没值functionsameVnode(a,b){//判断两个VNode节点是否是同一个节点return(a.k... 继续阅读 >

2020
09-24

Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）

最近有使用vue+elementUI实现多图片上传的需求，遂做此纪录。本次主要写一下前端的实现细节，至于后台以Multipart[]数组接收即可，不再赘述，网上一搜大把文章可供参考。本次使用elementui的上传图片控件的照片墙类型，其使用示例可具体查看官方文档Elementui多图上传控件需要注意的是，官方文档中的示例采用自动上传的方式，大多数情况我们是需要点击上传按钮或和表单一起提交才开始上传的（即手动上传），此时官方的示例就不满... 继续阅读 >

2020
09-24

vue ssr+koa2构建服务端渲染的示例代码

之前做了活动投放页面在百度、360等渠道投放，采用koa2+模版引擎的方式。发现几个问题相较于框架开发页面效率较低，维护性差兼容性问题，在页面中添加埋点后发现有些用户的数据拿不到，排查后发现通过各个渠道过来的用户的设备中仍然包含大量低版本的浏览器。 服务端渲染 服务端渲染和单页面渲染区别查看下面两张图，可以看到如果是服务端渲染，那么在浏览器中拿到的直接是完整的html结构。而单页面是一些scri... 继续阅读 >

2020
09-24

vue-autoui自匹配webapi的UI控件的实现

vue-autoui是一款基于vue和element扩展的一个自动化UI控件，它主要提供两个控件封装分别是auto-form和auto-grid;通过这两个控件可以完成大多数的信息输入和查询输出的需要.auto-form和auto-grid是通过json来描述展示的结构，在处理上要比写html标签来得方便简单，但这控件的最大优势并不是在这里，它最重要的功能是可以结合webapi的信息来自动输出界面，只需要调整webapi的信息结构即可完成UI的调整。基础使用控件可以直接在vue... 继续阅读 >

2020
09-24

vue项目配置使用flow类型检查的步骤

你是否经常在debug那些简单可避免的bug？可能你给函数传参的时候搞错了参数的顺序，或者本来应该传个Number类型的参数，你传了一个String类型？JavaScript的弱类型是这一类bug的罪魁祸首，静态类型语言中不存在此类bug。Flow就是JavaScript的静态类型检查工具，该库的目标在于检查JavaScript中的类型错误，开发者通常不需要修改代码即可使用，故使用成本很低。同时，它也提供额外语法支持，使得开发者能更大程度地发挥Flow的作用。... 继续阅读 >

2020
09-24

Vue项目中使用flow做类型检测的方法

在vue2.0的项目中加入flow类型检查。当前项目是用js写的，当项目越来越大，由于js弱类型的特性，相比ts(typescript)这种强类型的语言而言，后期维护会越来越困难。为了解决这个问题，决定使用flow加入类型检查。flow了解flow是fackbook公布的javascript静态类型检查器。可以检查js中一些bug，eg：自动类型转换中出现的问题。flow官网首先，安装flownpmiflow-bin--save-dev然后在package.json中添加脚本"scripts":{"flow":... 继续阅读 >

2020
09-24

vue 封装 Adminlte3组件的实现

之前找了一下vue关于adminlte3的组件库，github大部分都是2的。比较老了，都是几年前更新的。有adminlte3的，但是都只封装了一两个组件，而且居然还引入jq，然后一股脑把adminlte3的html代码复制进去，这样就成了一个组件。感觉没啥用。感觉是那些作者在练手。vue引入jq我觉得真的没必要，会产生很多bug，可能可以解决，但是我之前遇到过引入jq出现单页面进入之后jq没法挂载，要刷新才能挂载的情况，蛋疼，一直没解决。所有我打算... 继续阅读 >

2020
09-24

vue+ESLint 配置保存 自动格式化代码

1.在.eslintrc.js添加vscode终端启动服务//添加⾃定义规则'prettier/prettier':[//eslint校验不成功后，error或2则报错，warn或1则警告，off或0则⽆提示'error',{singleQuote:true,semi:false,//结束是否加分号printWidth:160//每行最长字符}]2.打开VScode文件》首选项》设置》扩展》ESLint》//eslint格式化字符串"editor.codeActionsOnSave":{"source.fixAll.eslint":true},如... 继续阅读 >

2020
09-24

Vue中keep-alive 实现后退不刷新并保持滚动位置

什么是KeepAlive？首先，我们要明确我们谈的是TCP的KeepAlive还是HTTP的Keep-Alive。TCP的KeepAlive和HTTP的Keep-Alive是完全不同的概念，不能混为一谈。实际上HTTP的KeepAlive写法是Keep-Alive，跟TCP的KeepAlive写法上也有不同。TCP的keepalive是侧重在保持客户端和服务端的连接，一方会不定期发送心跳包给另一方，当一方端掉的时候，没有断掉的定时发送几次心跳包，如果间隔发送几次，对方都返回的是RST，而不是ACK，那么... 继续阅读 >

2020
09-24

Visual Studio 2019配置vue项目的图文教程详解

一，环境安装1：Vue项目一切基于Node.js，必须先安装NodeJS，下载地址：https://nodejs.org/zh-cn/安装nodejs,一路next就行了Additonal工具可以不用安装。win+r输入cmd输入node-v和npm-v得到版本信息证明装好了。2：确认VisualStudio2019环境：看扩展工具里有没有勾选NodeJs二，使用VS2019创建Vue项目后期会新增多个vue的项目，所以建议加一个vue名称方案管理文件你要是熟悉typescript可以选第一二个项目名字可以默... 继续阅读 >

2020
09-24

vue css 引入asstes中的图片无法显示的四种解决方法

这里主要针对的是vuecli2中的一些问题。vue项目中，常常会有很多的图片资源，这样的资源存放位置，通常我们有两个选择：1.static，2.assets关于这两者之间的区别，和如何选择这里就不多说了！这里我们来说说assets目录下存放图片时，在vue组件的css样式中引入图片时将会遇到的一些问题！正常情况，我们在本地开发调试的时候，无论什么样的方式引入图片都不会有问题。但是，一大包发布打线上，就会出现图片无法加载的情况！这是因... 继续阅读 >

2020
09-24

vue从零实现一个消息通知组件的方法详解

本文实例讲述了vue从零实现一个消息通知组件的方法。分享给大家供大家参考，具体如下：利用vue从零实现一个消息通知组件平时，我们肯定用过类似element-ui,antd等一些UI框架，感受它们带给我们的便利。但当我们的需求或者设计这些框架内置的相差太大，用起来，就会觉得特别别扭，这时候，就有必要自己来重新造轮子。重新造轮子，有几个好处，1.所有代码都是服务你的业务，没有太多用不上的东西。2.代码是由自己维护，而不是第三方... 继续阅读 >

2020
09-24

vue中的双向数据绑定原理与常见操作技巧详解

本文实例讲述了vue中的双向数据绑定原理与常见操作技巧。分享给大家供大家参考，具体如下：什么是双向数据绑定？vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也是算是vue的精髓之处了。值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提，如果我们使用vue... 继续阅读 >