⭐️ vue
文章平均质量分 65
vue
丶乘风破浪丶
前端
展开
-
H5 vue项目中实现录音功能
当在Vue项目中需要实现录音功能时,你可以使用Web API中的接口来进行录音操作。原创 2023-07-07 16:26:00 · 2322 阅读 · 2 评论 -
vue-cli4.x安装sass/scss/less方法及全局引用公共scss
由于不同的电脑node环境可能版本不一样 所以造成直接使用npm去安装node-sass 和 sass-loader 很容易会造成版本不匹配。如果你已经安装过了 但是报错了的 停掉项目 然后卸载掉node-sass和sass-loader (没有cnpm可以用npm)然后重新安装相匹配的版本:(我这里以我自己的 node版本 v10.16.0为例 v14.17.6也适用)mac的话没有node-sass环境 使用以下版本。安装指定版本 4.1.0。原创 2023-02-02 09:45:12 · 420 阅读 · 0 评论 -
vue 中 jsx 使用 jsx 绑定属性的拓展写法
一、在 vue2 中你需要把 属性 放在。二、vue3 中函数渲染属性被展平了。原创 2023-01-17 18:02:27 · 1099 阅读 · 0 评论 -
proxy 配置
1、单独配置文件 proxy.js。2、vue.config.js 中引用。原创 2023-01-16 14:55:07 · 294 阅读 · 0 评论 -
vue3+vite插件配置unplugin-auto-import
自动导入composition api 和 生成全局typescript说明 无需每个文件中手动导入 api2、vite.config.ts 配置3、组件中使用 【不需再单独引入 api】 VUE常用插件库总结原创 2022-07-12 15:40:22 · 1463 阅读 · 0 评论 -
vue中install 和 vue.use()
install 方法Vue.js 的插件应该暴露一个 install 方法。第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象用途 开发插件 以及 全局注册组件等MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或 property Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive('my-d原创 2019-11-29 19:13:00 · 446 阅读 · 0 评论 -
vue-cli 单元测试报错 jest 报错(图文)
vue-cli 单元测试报错vue-cli 单元测试报错 jest 报错(图文)原创 2022-04-22 16:48:50 · 1556 阅读 · 0 评论 -
vue3 template 的用法
vue3 template 的用法vue template #原创 2022-04-07 19:00:00 · 2535 阅读 · 0 评论 -
策略模式在vue中的应用 [element-ui 表单验证]
策略模式在vue中项目使用原创 2022-03-31 20:45:00 · 892 阅读 · 0 评论 -
Vue中的发布订阅分析(Vue3中使用 emit )
Vue中的发布订阅分析(Vue3中使用 emit )原创 2022-03-23 19:00:00 · 3738 阅读 · 0 评论 -
VUE常用插件库总结
VUE常用插件库总结转载 2022-03-23 14:34:11 · 1690 阅读 · 0 评论 -
深入研究-webkit-overflow-scrolling:touch及ios滚动
1. -webkit-overflow-scrolling:touch是什么?MDN上是这样定义的:-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.auto: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的...原创 2018-05-08 10:26:26 · 1860 阅读 · 0 评论 -
IE9下JQuery发送ajax存在跨域问题
最近在做项目的时候,测试PC端网页,在IE9下会失效,不能正常的发送POST请求,经过仔细的排查,发现是IE9下JQuery发送ajax存在跨域问题。 目前有两种解决方案: 解决方案一: 设置浏览器安全属性,启用【通过域访问数据源】选项,如下图所示:原创 2018-01-08 14:52:01 · 1717 阅读 · 1 评论 -
[CSS] Firefox required input textarea 粉红色边框去除方案
[CSS] Firefox required input textarea 粉红色边框去除方案原创 2017-11-22 09:49:51 · 1478 阅读 · 0 评论 -
https://blog.csdn.net/qinlulucsdn/article/details/80559229
请求拦截器/ 请求拦截(配置发送请求的信息)axios.interceptors.request.use(function (config){ // 处理请求之前的配置 return config; }, function (error){ // 请求失败的处理 return Promise.reject(error); });// 响应拦截(配置请求回来的信息)axio...原创 2018-11-01 18:40:48 · 431 阅读 · 0 评论 -
vue2的$refs在vue3组合式API中的替代方
如果你有过vue2的项目开发经验,那么对$refs就很熟悉了。由于vue3的断崖式的升级,在vue3中如何使用$refs呢?想必有遇到过类似的问题,我也有一样的疑惑。通过搜索引擎和github,基本掌握如何使用$refs。在vue3中使用组合式API的函数ref来代替静态或者动态html元素的应用。最近业余在学习vue3项目《蜡笔(Crayon)管理模板:Vue3 + Vuex4 + Ant Design2》开发,这两天迭代推进了一点,实现了chart图表组件,写文章的时候发现提交代码的commit有错原创 2021-07-08 23:12:58 · 892 阅读 · 1 评论 -
组件上使用v-model
一、最近在工作过程中要实现一个搜索模糊匹配功能,考虑到组件的复用,就单独把搜索框抽出来作为一个子组件。在以往的开发中,我一般会在input框中的值变化时向父组件emit一个事件,并带上一些父组件中需要的参数(比如搜索的关键词,或者搜索之后返回的结果)大概的实现方式如下:父组件<template> <div> <search @test="getData"></search> <button @cli原创 2021-06-16 10:55:23 · 172 阅读 · 0 评论 -
Vue 路由模块化配置
Vue 路由模块化配置算法|模式2019-08-139958vuerouter13:14:21前端路由流行的模式有两种 hash 模式和 history 模式,两者分别利用浏览器自有特性实现单页面导航hash 模式:window.location 或 a 标签改变锚点值,window.hashchange()来监听锚点变化 history 模式:history.pushState()、history.repalceState() 定义目标路由,window.onpop...转载 2021-04-15 10:41:06 · 594 阅读 · 0 评论 -
你不知道的前端·权限控制篇 之 中后台系统
一、前言你不知道的前端之——中后台系统的权限控制,总的来说可以分为两大类,页面权限与按钮权限。如果说编程的职业道路就像是在游戏中打怪升级的话,那么走这个分支练级的童鞋,首先要面对的第一只劝退boss就是——权限控制了。1. 本文适合什么样的群众来阅读?本文适合小白玩家,或者手残党,将要进军这分支(中后台),以及各路大神,操作党,欧皇党(坐在家里,咦,项目完成了!)等童鞋们食用哈,如果在食用的过程中,若感不适,敬请谅解。2. 阅读完本文后你可以学到什么?对于前端的权限控制会有更深的理解。原创 2021-04-02 19:35:49 · 1618 阅读 · 0 评论 -
[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example becaus
vue报这个错[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted如何解决使用css3touch-action: none;touc...原创 2019-06-04 15:29:47 · 7630 阅读 · 0 评论 -
vue2中使用sass并配置全局的sass样式变量
在vue中使用样式文件sass,如果每个.vue文件都引入该样式,build出来文件后,势必会造成样式的重复,冗余,如果在main.js中全局引入一个scss文件,在其中定义变量在其他组件或者页面中引用报变量未定义错误,其他的样式可以正常显示,显然是编译的问题。那么,全局设置并加载样式就显得很有必要了!首先,npm安装好 "sass-loader": "^6.0.7", "sass-r...原创 2018-09-03 16:54:44 · 1687 阅读 · 0 评论 -
缓存架构
缓存架构今天所说的缓存是针对于api数据的缓存。缓存实际上有两个方面的缓存:1、api数据的缓存2、资源的缓存:前端的话无需要太多关心的,因为html+css+js在没有设置特殊请求头的情况下,浏览器是默认缓存的优化三字经:快、小、省快1、选择更快的api2、算法层面--尽量减少自己的操作步骤小--说的其实是请求资源1、通过webpack压缩,例如:tree-shaking----(治标不治本)2、尽量不要去写无用(重复)的代码----(治本)从vue3层面谈一下快和小原创 2021-03-18 10:30:32 · 404 阅读 · 2 评论 -
移动端滑动切换组件封装 vue-swiper-router
组件部分<template> <div class="main"> <div class="page-tab"> <div :class="nowPath == item.path ? 'tab-item tab-item_active' : 'tab-item'"原创 2018-05-30 14:54:18 · 6354 阅读 · 2 评论 -
vue真机调试
修改以下文件 修改以下文件原创 2018-04-04 00:34:07 · 2031 阅读 · 0 评论 -
vue怎么在移动端调试
手机和电脑连同一个wifi, ipconfig查看电脑的ip地址, 比如是192.168.1.213, 电脑自己访问是localhost:8080, 手机访问就是192.168.1.213:8080连接同一个网段的wifi,把localhost改为你电脑的ip就好了啊?别忘了关闭防火墙......原创 2018-04-04 00:23:22 · 1553 阅读 · 2 评论 -
vue 全局方法(单个和多个方法)
一、单个方法新建goBack.jsvar goBack = function() { xxx}export default goBack;main.js中引入并定义import goBack from '../static/js/goBack';Vue.prototype.$back = goBack; //用$与组件内自定义的函数区分,其他符号也可以组件中使用go: function() { this.$back(); ...原创 2020-12-11 14:07:37 · 1070 阅读 · 0 评论 -
VUE实现在前端导出EXCEL
安装依赖进入项目文件夹,打开cmd或者在Webstorm中的Terminal中输入npminstall -Sfile-saver xlsxnpminstall -D script-loader添加js文件下载所需的两个文件:Blob.js、Export2Excel.jshttps://download.csdn.net/download/badao_liumang_qizhi/10767801新建vendor,名称不一定非是vendor,建议但不非得将此目录放在与单...原创 2020-12-02 17:33:00 · 708 阅读 · 0 评论 -
在 Vue Cli 3+ 中使用 px2rem-loader
安装 amfe-flexible cnpm install amfe-flexible -S 安装 px2rem-loader cnpm install px2rem-loader -D 在mian.js中引入 import 'amfe-flexible' 在vue.config.js中配置module.exports = { chainWebpack: config => { config.module ...原创 2020-10-09 11:29:56 · 1791 阅读 · 1 评论 -
Vue.js插件axios——封装一个可以灵活使用的ajax
Vue.js插件axios——封装一个可以灵活使用的ajax原创 2017-11-29 11:37:43 · 645 阅读 · 0 评论 -
如何在Vue中建立全局引用或者全局命令
1 一般在vue中,有很多vue组件,这些组件每个都是一个文件。都可能需要引用到到相同模块。我们不想每个文件都import 一次模块。如果是vue编写的插件我们可以用 Vue.use(...) 2 但是如果想添加一个全局命令,同时又让每个vue的文件都能用到怎么办?第一步:最好建立一个全局的命令文件例如:directive/directive.js第二步:利用Vue.directive()建立一...原创 2018-03-16 09:23:57 · 2351 阅读 · 1 评论 -
vue-loader
其他loader:css-loader、url-loader、html-loader等 先来了解一下模块的概念,比如在nodeJS中,有require和exports关键字。很早有个broserify,是个js模块加载器。 现在流行的是webpack,因为它不光你能加载js文件,还可以是css文件或图片等资源。 webpack,我们可以认为也是更加高级的模块假期,围绕它一切东西都是模块。这些loa...原创 2018-03-16 12:07:33 · 219 阅读 · 0 评论 -
点击事件
点击事件v-on:click<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"&原创 2018-03-16 12:08:47 · 189 阅读 · 0 评论 -
v-model和v-for指令
http://cn.vuejs.org/v2/guide/ 1.基本雏形<!DOCTYPE html><html><head> <title></title> <script src="https://unpkg.com/vue/dist/vue.js"></script>原创 2018-03-16 12:09:43 · 876 阅读 · 0 评论 -
元素的隐藏和显示(v-show指令)
除了click单击事件,还有mouseover,mouseover等鼠标事件原创 2018-03-16 12:10:42 · 4193 阅读 · 0 评论 -
详解vue-cli本地环境API代理设置和解决跨域
前言我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了,通常我们的请求地址是以localhost:8080来请求接口数据的,localhost是没有办法设置cookie的。我们可以在vue-cli配置文件里面设置一个代理,跨域的方法有很多,通常需要后台来进行配置。我们可以直接通过node.js代理服务器来实现跨域请求。vue proxyTable接口跨域请求调试在v...原创 2018-04-08 11:55:07 · 553 阅读 · 0 评论 -
使用keepAlive对上下拉刷新列表数据 和 滚动位置细节处理 - vue
【前言】 使用vue处理项目中遇到列表页面时,之前项目中总会有一些细节问题处理得不太好,这里总结一下,以便优化以后的代码。如下: 1. 使用mint-ui中的LoadMore组件上下拉刷新时,有时无法触发上拉加载更多的方法。还有ios上滚动不太流畅。 2. 从列表进入详情,再返回时,列表页需要记住之前的滚动位置,记住它上次的数据,但从其他页面进入列表页时,需要它重新刷新。 【需要实现效果】 ...转载 2018-04-08 16:15:05 · 2311 阅读 · 0 评论 -
解决vue单页使用keep-alive页面返回不刷新的问题
使用vue单页开发项目时遇到一个很恶心的问题:在列表页点击一条数据进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用<keep-alive>解决这个问题,下面是我的使用心得。<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。首先在App.vue页面上有下面一段代码,我们都知道这是页面...原创 2018-04-14 23:14:15 · 11372 阅读 · 13 评论 -
vue项目打包后一片空白解决办法
网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白。这个主要原因是路径的问题。1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的。先看一下默认的路径。module.exports = { build: {...原创 2018-04-10 09:38:40 · 4198 阅读 · 0 评论 -
vue验证登录
vue的项目的登录状态如果用vuex状态管理,页面一刷新vuex管理的状态就会消失,这样登录路由验证就没有意义了。可以将登录的状态写到web Storage中进行存储管理。步骤如下:1、在登录组件里,将登录状态写入web Storage里。(一般写入session Storage,会话关闭,存储数据自动删除) if('登录成功') {sessionStorage.s...原创 2018-04-03 00:21:18 · 2251 阅读 · 0 评论 -
Vue 2.x 如何利用proxyTable实现跨域请求(反向代理)
在项目运行的时候吗,不可缺少就是的设置反向代理的 详细的文档 http-proxy-middleware 下载的官方的脚手架打开文件的build/dev-server.js搜索:(这个插件官方已经下载好了,只需要简单的配置一下就好的)var proxyMiddleware = require('http-proxy-middleware')//获取插件1添加下列代码: 方法一:app.use('/...原创 2018-04-03 00:43:09 · 1047 阅读 · 0 评论