分类：Vue

2020
09-29

SpringBoot + Vue + Electron 开发 QQ 版聊天工具的详细教程

一、简介这是一款基于JS实现的超轻量级桌面版聊天软件。主要适用于私有云项目内部聊天，企业内部管理通讯等功能，主要通讯协议websocket。也支持web网页聊天实现。文字聊天，互传文件，离线消息，群聊，断线重连等功能。先看一下效果，下图左边是web版，右边为PC版。二、本地搭建2.1技术栈后端技术栈：springboot:让开发人员快速开发的一款Java的微服务框架。tio:是百万级网络框架oauth2.0:OAuth2.0是一个行业的标准授... 继续阅读 >

2020
09-29

Vue 打包体积优化方案小结

Vue-cli3打包体积优化方案前言:公司项目完成后，打包完成后有1.18MB，其实感觉还行了，但是还可以有优化的地方，对于咱们有精益求精（有没有还是有点*数的）的精神下再去优化，可以先在项目中安装webpack-bundle-analyzer可以看到各个文件的大小npminstallwebpack-bundle-analyzer-save-dev在vue.config.js中进行配置module.exports={chainWebpack:config=>{config.plugin('webpack-bundle-analyzer').use(requir... 继续阅读 >

2020
09-29

vue通过v-html指令渲染的富文本无法修改样式的解决方案

1.问题描述在最近的vue项目中遇到的问题：v-html渲染的富文本，无法在样式表中修改样式。代码如下，div.article-context里面的图片修改成自适应，但是没有任何效果。<divclass="article-context"v-html="post.content"></div><stylescoped>.article-contextimg{width:auto;height:auto;max-width:100%;max-height:100%;}</style>2.分析原因这是为什么呢？原因很简单：如果图片（img标签）在template中先写出来，... 继续阅读 >

2020
09-29

vue模块移动组件的实现示例

一直都想实现类似于五百丁中简历填写中模块跟随鼠标移动的组件，最近闲来无事，自己琢磨实现了一个差不多的组件。其中每个模块都是组件调入（项目经验、教育经验、工作经验等），所以这里也用到了动态加载组件方式。思路：鼠标移入模块，显示相应模块的点击移动按钮，点击A模块移动按钮，此时原先A模块所在的位置上变为拖动到这里绿框模块，同时鼠标下悬浮着A模块，鼠标移动，悬浮的A模块跟随移动，绿框也跟随上下移动。父组件1、... 继续阅读 >

2020
09-29

vue父子组件间引用之$parent、$children

vue中提到【父子组件】，则一定会想到我们常用的父子组件通信：props+$on()、$emit()，如图：也就是说，虽然在一般情况下，子组件是不能引用父组件或者Vue实例的数据，但是对于在开发中出现的“数据需要在组件中来回传递”，我们最简单的解决办法就是通过props（和v-on）将数据从父组件传到子组件，再用$emit将数据从子组件传到父组件，以此循环引用。但是在另一些场景下，我们可能想要比如（在父组件中）拿到子组件对象，然后直... 继续阅读 >

2020
09-29

Vue的props父传子的示例代码

废话不多少，父传子做一个比喻首页想加一个图片，但又不想每次都用img而且又让img做css和动画事件。此时最简单的方法做一个页面封装，然后起一个名字让首页自己获取，放一个地址就行！其他什么都不用管。步骤如下:第一步:创建一个组件，相当于创意文件夹，专门存小东西以后经常用<template><div><imgsrc="./xxx.xx"alt=""></div></template><script>exportdefault{data(){return{}}}</script>第二步:... 继续阅读 >

2020
09-29

Vue项目移动端滚动穿透问题的实现

概述今天在做Vue移动端项目的时候遇到了滚动穿透问题，在网上查资料后，选取了我觉得最好的方法，记录下来供以后开发时参考，相信对其他人也有用。上层无需滚动如果上层无需滚动的话，直接屏蔽上层的touchmove事件即可。示例如下：<div@touchmove.prevent>我是里面的内容</div>上层需要滚动如果上层需要滚动的话，那么固定的时候先获取body的滑动距离，然后用fixed固定，用top模拟滚动距离；不固定的时候用获取top的... 继续阅读 >

2020
09-29

vue和小程序项目中使用iconfont的方法

一、vue中使用iconfont1、百度搜索iconfont或者阿里巴巴矢量图标库官网，注册登录；2、找到图标管理->新建项目，或者使用已有的项目，用于保存自己的图标；3、搜索自己需要的icon；4、添加到购物车中；5、购物车中就有了相应icon6、点击购物车，选择添加至项目。就是我们刚才创建的项目或者之前已有的项目7、点击确定，即可将icon添加到我们的项目中8、然后点击我的项目，找到自己的项目，即可看到刚才添加的icon9、点击下载至本地... 继续阅读 >

2020
09-29

vue相关配置文件详解及多环境配置详细步骤

1.package.json作用：package.json文件其实就是对项目或者模块包的描述，里面包含许多元信息。比如项目名称，项目版本，项目执行入口文件，项目贡献者等等。npminstall命令会根据这个文件下载所有依赖模块。文件结构如下：{"name":"sop-vue","version":"0.1.0","author":"zhangsan<zhangsan@163.com>","description":"sop-vue","keywords":["node.js","javascript"],"private":true,"bugs":{"url":"http://path/to... 继续阅读 >

2020
09-29

vue+koa2搭建mock数据环境的详细教程

前段时间写了一篇前端vue项目实现mock数据方式的文章，主要是在vue项目里使用mock数据，数据和项目耦合在一起，不太优雅，作为一个有追求的前端，怎么能容忍这种方法呢？特以此篇，记录利用koa2搭建服务端，提供mock数据的方法。初始化vue项目这里以vue项目为主，当然别的类型项目依然可以使用这种mock数据的方式。vuecreatevue-koa2-demo前提是安装了vue-cli的脚手架，我电脑安装的是vue-cli3的版本。按照要求一步一步选择后，... 继续阅读 >

2020
09-29

Vue 基于 vuedraggable 实现选中、拖拽、排序效果

今天有个朋友说要做个效果：Vue实现拖拽排序，要有checked，输出结果是排序后的，要全选，未选中的不能拖动。其实我之前基于Sortable做过一个类似的效果。也给他看过了，没看太明白，他就自己基于vuedraggable实现了一下。正好有点问题给他解决了一下。废话不多说，先上最终效果：Vue拖拽排序效果测试地址。下面就是最终效果图。效果一：实现选中和全选效果就下面这样，elementUI官方Demo。很简单毫无挑战呀。<el-check... 继续阅读 >

2020
09-29

vue el-tree 默认展开第一个节点的实现代码

vue的树形控件el-tree可以用来方便地实现树形控件，但是官方文档中，关于控件的默认展开只有默认展开全部或者默认全部关闭，如下所示：对于指定节点的展开，需要指定其id，从而通过default-expanded-keys设置默认展开的节点。对于后台返回的数据，默认展开其第一层的第一个，其实很简单：对于获取到的后台数据，将其第一层节点添加到数组中，将default-expanded-keys绑定数组，从而设置默认展开的节点。实际应用：默认展开... 继续阅读 >

2020
09-29

Vue数据双向绑定原理实例解析

Vue数据双向绑定原理是通过数据劫持结合发布者-订阅者模式的方式来实现的，首先是对数据进行监听，然后当监听的属性发生变化时则告诉订阅者是否要更新，若更新就会执行对应的更新函数从而更新视图MVC模式以往的MVC模式是单向绑定，即Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新MVVM模式MVVM模式就是Model?View?ViewModel模式。它实现了View的变动，自动反映在ViewModel，反之亦然。对于双向绑定的理解... 继续阅读 >

2020
09-29

Vue如何基于es6导入外部js文件

也许大家都是使用习惯了es5的写法喜欢直接用《Script》标签倒入js文件，但是很是可惜，这写法。在es6，或则说vue环境下不支持真的写法是怎样？首先。我们要改造我们要映入的外部js文件，改成下面这个格式。主要是红色方块内部代码，我们需要将我们的模块“抛出”，让人能获取到代码：functionrealconsole(){alert("hello.thanksuseme");}export{realconsole}其次，到我们的寄主那里，我们需要导入，仿造其他的文件，写法是这样... 继续阅读 >

2020
09-29

vue组件系列之TagsInput详解

简介TagsInput是一种可编辑的输入框，通过回车或者分号来分割每个标签，用回退键删除上一个标签。用vue来实现还是比较简单的。先看效果图，下面会一步一步实现他。注：以下代码需要vue-cli环境才能执行（一）伪造一个输入框因为单行的文本框只能展示纯文本，所以图里面的标签实际上都是html元素,用vue模板来写的话，是这样的:<template><divclass="muli-tags"@click='focus'><buttonclass='btn'v-for='(tag,index)inta... 继续阅读 >

2020
09-29

vue实现商品列表的添加删除实例讲解

我们首先来看下代码：<divid="app"><divclass="container"><formclass="form-inline"><divclass="form-group"><labelfor="exampleInputName2">ID：</label><inputid="exampleInputName2"class="form-control"type="text"/></div><divclass="form-group"><labelfor="exampleInputEmail2">Name：</label><inputclass="form-control"type="text"/></div><buttonclass="btnbtn-primary"type="button">提交</button... 继续阅读 >