分类：vue

2020
09-28

浅析vue cli3 封装Svgicon组件正确姿势(推荐)

vuecli3手把手教学封装Svgicon组件第一步:在src文件下新建一个放置svg文件的文件夹第二步:在components文件下新建一个Svg组件这是一个文件夹专门用来存放项目里面需要使用的svg文件，比如a.svgb.svg…svg组件源码<template><svg:class="svgClass"aria-hidden="true"><use:xlink:href="iconName"></use></svg></template><scripttype="text/ecmascript-6">/*icon组件实现自动引入../../Icons/svg下面所有的图标了... 继续阅读 >

2020
09-28

Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)

今天，我们使用VueCLI3做一个移动端适配。 前言首先确定你的项目是VueCLI3版本以上的。一、移动端适配包1、安装移动端适配包npmilib-flexible-S2、在main.js引入适配包importVuefrom'vue'importAppfrom'./App.vue'import'lib-flexible'//引入适配包Vue.config.productionTip=falsenewVue({render:h=>h(App),}).$mount('#app')3、在index.html编辑viewport<!DOCTYPEhtml><htmllang="en"><head... 继续阅读 >

2020
09-27

vue项目中自定义video视频控制条的实现代码

最近公司项目中，添加了视频模块，但是产品觉得Video自带的控制条有点LOW，于是自己设计了一个。于是开始了自定义Video控制的采坑之旅。。首页效果图： 需求描述：当鼠标放在图片上的时候，自动播放视频，并显示预览进度条，当鼠标移开，显示预览图片，再次hover图片，继续上次播放视频详情页的效果图：需求描述：能自定义的暂停和播放模仿进度条可实现拖拽播放速度显示当前时间能选择倍速能控制声音能全屏播放... 继续阅读 >

2020
09-27

vue项目启动出现cannot GET /服务错误的解决方法

上午做了项目，中午吃完饭后回来再跑一次服务器，出现CannotGET/：控制台中并没有报错；npmrundev命令行窗口也没有报错。原因在网上查了一堆，发现这个问题还挺多呢，而且各个回答的解决方式都竟然有许多不同…于是把能改的地方都改了…（基本上相当于将配置信息改回来）关闭history模式关闭history模式，用/#/路由的方式开启，（history模式要跑在服务端里面）；更改端口号更改端口号（没改的话打开原端口号自动加上登陆... 继续阅读 >

2020
09-27

详解vuejs中执行npm run dev出现页面cannot GET/问题

1.问题描述最近用vue-cli搭建了一个小项目,其中在对项目进行打包测试时修改了webpack.base.conf.js中的配置信息,之后再用npmrundev之后出现如下的情况:1.浏览器中无法呈现已有页面,并且在浏览器控制台中报404错误2.命令窗口中并没有报错其中有人说是路由等问题,后来通过创建新的项目对比配置文件信息,发现是配置信息导致:注释部分是打包时需要修改的地方(根据打包时网站根目录,这个没处理好可能会出现图片路径加载失败问题),而上... 继续阅读 >

2020
09-27

vue 使用 vue-pdf 实现pdf在线预览的示例代码

背景之前的demo增加了图片预览，于是今天下午追完番剧就突然想到能不能把pdf在线预览也做了，说干就干，刚开始查了很多教程，我发现很多人都在说什么pdf.js这个库，这当然没什么问题，pdf.js的确可以非常完美的实现pdf在线预览的过程，但是感觉这样直接进去有点不太优雅，于是找找看看有没有什么现成的组件，发现有vue-pdf这个组件，虽然说它没有原生那样强大，比如不支持pdf文字复制，打印会乱码，但是我感觉已经足以满足我的需求... 继续阅读 >

2020
09-27

详解关于Vue单元测试的几个坑

一、写在前面这篇文章的代码使用karma，mocha，chai，sinon-chai配合Vue的实例属性进行单元测试二、全局的组件的坑由于我的g-icon是全局注册的，所以使用g-input组件时的时候g-icon是直接用的，所以测试时有关icon的代码永远是错的。把g-icon局部注册的组件三、在测试中触发点击事件模拟我在app.vue里使用g-input组件<g-inputv-model="message"></g-input>使用newevent和dispatch模拟事件在组件上触发，虽然这个事件和我们实... 继续阅读 >

2020
09-27

Vue中函数防抖节流的理解及应用实现

防抖和节流的目的都是为了减少不必要的计算，不浪费资源，只在适合的时候再进行触发计算。一、函数防抖定义在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。实现原理函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，知道函数请求停止并超过时间间隔才会执行。使... 继续阅读 >

2020
09-27

vue 路由懒加载中给 Webpack Chunks 命名的方法

最早的路由定义方式importVuefrom'vue'importVueRouterfrom'vue-router'importHomefrom'../views/Home.vue'importAboutfrom'../views/About.vue'importLoginfrom'../views/Login.vue'Vue.use(VueRouter)constroutes=[{path:'/',name:'Home',component:Home},{path:'/about',name:'About',component:About},{path:'/login',name:'Login',component:Login}]constrouter=newVueRouter(... 继续阅读 >

2020
09-27

vue中使用带隐藏文本信息的图片、图片水印的方法

一.带隐藏文本信息的图片通过RGB分量值的小量变动，不影响对图片的识别。因此，我们可以在图片加入文字信息。最终达到如下效果:首先，在该组件中加入img用于显示图片<canvasref="canvas"v-show="0"></canvas><img:src="imageUrl"v-if="imageUrl"/>调用方法encryptionImg({width='',height='',content='',}){letimg=this.imgconstimgRatio=img.naturalWidth/img.naturalHeight;const... 继续阅读 >

2020
09-27

基于Vue实现微前端的示例代码

  前端微服务化一直是前端社区的一个热门话题，早在2018年就有不少开发者提出过各种解决方案。或许是未得精髓，个人认为基于WebComponents的实现脱离整体打包逻辑的，难以工程化。直到遇到了vue-cli3，子模块打包的问题得以迎刃而解。2019年秋，团队内部初步实现前端分布式开发，解决了集中式开发部署的“老大难”问题。个人认为，随着WebAssembly等技术的兴起，“前端后移”越来越明显，前端微服务会成为大前端的... 继续阅读 >

2020
09-27

Vue通过getAction的finally来最大程度避免影响主数据呈现问题

企业信息列表，查看某条记录时，弹窗页里要求展示企业的用户名，而用户名字段不在企业表里。为此，我们需要修改弹窗页的渲染方法。methods:{enterpriseInfo(record){this.form.resetFields();letproduct;if(record.product=='HUICHUXING'){product='惠出行';}elseif(record.product=='BOSSKG'){product='BOSS开工';}elseif(record.product=='HUICHUXING，BOSSKG'||record.product=='BOSSKG，... 继续阅读 >

2020
09-27

Vue中通过vue-router实现命名视图的问题

在用vue-router路由处理一些需求的时候例如有时需要同时同级展示多个组件而不是嵌套展示例如：创建一个布局有侧导航和主内容两个视图此时命名视图就派上用场了在路由对象中使用components属性以使一个路径下可挂载多个子组件：之后即可为每个要展示的组件指定一个名字默认name为default即不设置名字<script>varheader={template:"<h1>头部</h1>"}varleftBox={template:"<h1>左侧边栏</h1>"}varmainBox={tem... 继续阅读 >

2020
09-27

浅谈vue权限管理实现及流程

一、整体思路后端返回用户权限，前端根据用户权限处理得到左侧菜单；所有路由在前端定义好，根据后端返回的用户权限筛选出需要挂载的路由，然后使用addRoutes动态挂载路由。二、实现要点（1）路由定义，分为初始路由和动态路由，一般来说初始路由只有login，其他路由都挂载在home路由之下需要动态挂载。（2）用户登录，登录成功之后得到token，保存在sessionStorage，跳转到home，此时会进入路由拦截根据token获取用户权... 继续阅读 >

2020
09-27

Vue Cli3 打包配置并自动忽略console.log语句的方法

下载插件npmi-Duglifyjs-webpack-plugin在vue.config.js引入使用constUglifyJsPlugin=require('uglifyjs-webpack-plugin')module.exports={configureWebpack:{plugins:[newUglifyJsPlugin({uglifyOptions:{compress:{drop_console:true,},},}),],},devServer:{proxy:{'/xxx':{target:'http://192.168.150.17:8080/',changeOrigin:true,ws:true,p... 继续阅读 >

2020
09-27

vue项目打包之开发环境和部署环境的实现

项目开发阶段和生产环境可能不一样如前端在开发阶段，接口可能是自己使用node.js搭建的服务器，API返回的也都是假数据，等后台接口开发好后，再切换成后台提供的接口，等测试没有问题，服务端上线后，又要改成正式的接口手动改动接口，既繁琐又容易出错（当然，区别还不止这些）优雅的解决方案是，分别使用两个入口文件，一个用于开发环境打包，一个用于生产环境打包具体来说，分为下面几个步骤1、创建入口文件在src目录下新... 继续阅读 >