vue
文章平均质量分 70
喜大普奔⁶⁶⁶
做个有思想的程序员,有木有兼职做做啊~啊,缺马内,给我掉下来个赚马内的副业吧
展开
-
Vue.js 3.x Composition APIs 及简单使用
Vue3版本Composition API 及简单例子原创 2023-06-08 22:58:32 · 1010 阅读 · 0 评论 -
发布订阅模式和观察者模式
模拟发布订阅模式原创 2023-05-18 15:15:08 · 151 阅读 · 0 评论 -
Vue数据响应式原理:V2/V3
Vue数据响应式原理:V2/V3原创 2023-05-06 13:43:50 · 615 阅读 · 0 评论 -
Vue版本2+模拟VueRouter的history模式
还有一个 router-view 的报错先不用管,是没定义 router-view 组件。注意这里只是模拟一下原理,里边还有其他的条条框框的限制判断等等其他处理就不完善了。1、修改配置,新增 vue.config.js 配置文件,修改。2、将 template 换成 render。原创 2023-05-06 10:08:16 · 584 阅读 · 0 评论 -
warning in ./node_modules/_vuex@4.0.2@vuex/dist/vuex.esm-browser.js
warning in ./node_modules/_vuex@4.0.2@vuex/dist/vuex.esm-browser.js"export ‘watch’ was not found in ‘vue’"export ‘reactive’ was not found in ‘vue’"export ‘inject’ was not found in ‘vue’"export ‘watch’ was not found in ‘vue’项目是老项目,同事想在里边添加使用 vuex,于是直接原创 2022-05-11 15:06:27 · 1361 阅读 · 0 评论 -
Hash模式和History模式的区别
首先强调一下不管哪种模式,都是客户端路由的实现方式。也就是当路径发生变化的时候,不会向服务器发生请求,是由JS监视路径的变化,然后根据不同的地址,渲染不同的内容;如果需要服务器内容的话,会发送 ajax 请求来获取。表现形式的区别Hash 模式路由中带着 # 号,# 后边的内容作为我们的路由地址,可以通过问号携带 URL 参数。官方文档上说这种模式很丑,路径中带着一些跟路径无关的符号,比如 # 号和 ? 号再来看 History 模式History 模式的 URL 就是一个正常的 URL ,原创 2021-10-19 11:42:23 · 510 阅读 · 0 评论 -
Vue自定义Loading动画,自定义全局JS组件Loading动画【记录】
创建 Loading 目录loading.vue 代码:<template> <div class="cus-loading" v-if="flag" @click="stopPropagation" @touchstart="stopPropagation" @touchmove="stopPropagation"> <div class="cus-loading-cont"> <div class="cus-loading-cont原创 2021-09-18 15:44:21 · 949 阅读 · 0 评论 -
vue项目elementUi图片预览添加自定义按钮,elementUi图片预览添加下载按钮
前言后台项目,用的element-ui,有用户上传的资料图片,预览直接使用的el-image的preview-src-list,现在需求是在点击预览之后还能在预览界面进行图片的下载,而element-ui的el-image组件预览没提供下载功能,只能自己写一个了。效果图自定义组件 cus-image创建 cusImage.vue 自定义组件代码...原创 2021-03-22 16:09:13 · 5627 阅读 · 0 评论 -
vue/cli3.+创建的项目移动端兼容,vue/cli3.+创建的项目使用lib-flexible做移动端项目兼容,lib-flexible做H5移动端兼容
cli2.+创建的项目做兼容去看另一篇文章:【查看】使用 cli2.+ 创建的项目并使用 lib-flexable 做过移动端兼容的都知道,要用 px2rem-loader 去转换单位,其实并不是非用 px2rem-loader 只需结合一个 px2rem 的工具就行,这里使用的是 postcss 提供的插件,叫 postcss-plugin-px2rem安装依赖:npm install lib-flexable --savenpm install postcss-plugin-px2rem -D原创 2021-01-16 14:29:32 · 407 阅读 · 0 评论 -
vue递归组件实现无限极分类菜单/无限极树状图,点击其中一项菜单关闭其它所有菜单项,vue递归组件通过数据定位当前组件层级及定位哪一条数据
先看效果,测试案例,随便加了个css动画:不知道使用 vue 递归组件注意事项的自行查看官方文档哈 【查看】比较简单的一个 demo 仅供参考,其它复杂功能的话,能传值,能定位到具体数据了,什么功能做不了,是不是???准备数据 store.js:// store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { l原创 2020-12-31 15:14:49 · 1337 阅读 · 0 评论 -
vue相关技术学习网址记录
1. 手摸手,带你用vue撸后台 系列一(基础篇)2. 手摸手,带你用vue撸后台 系列二(登录权限篇)3. 手摸手,带你用vue撸后台 系列三(实战篇)4. 手摸手,带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)5. 手摸手,带你用vue撸后台 系列五(v4.0新版本)6. 手摸手,带你封装一个vue component7. 手摸手,带你优雅的使用 icon8. 手摸手,带你用合理的姿势使用webpack4(上)9. 手摸手,带你用合理的姿势使用webpack4(下原创 2020-08-27 16:30:01 · 287 阅读 · 0 评论 -
记录一次解决后端接口设置cookie设置不上去经过,一级域名可以设置上去cookie,二级域名设置不上cookie
前言:公司的一个 web 端项目,项目放在一级域名的某一个目录下方访问的时候需输入 一级域名+目录+index.html,这个 index.html 是因为服务端人员没配置默认访问 index.html 所以需要加上领导说这个太麻烦,于是弄了个二级域名,直接指向项目目录的 index.html接口地址:一级域名+接口登录之后接口会设置 cookie ,每次请求都携带 cookieOK,项目基本就这样了,现在说情况:使用一级域名访问项目,谷歌调试,cookie 存在,项目正常使用二级域名访问项原创 2020-08-14 18:00:01 · 2064 阅读 · 0 评论 -
vue-devtools安装报错cross-env不是内部或外部命令【解决办法】
出现这个报错的话,可能你是用的 clone 方式克隆下来的项目吧,我也是 clone 下来的 master 分支才出现的这个报错看另一个教程,还是同样的项目地址,还是同样的项目,不同的安装手法,保你顺顺利利安装,不再出现问题 【看这里】https://blog.csdn.net/qq_38652871/article/details/106680947...原创 2020-06-11 10:54:26 · 1189 阅读 · 2 评论 -
Cannot find module @vue-devtools/build-tools,vue-dev-tools打包build报错【解决办法】
先看一下你下载 vue-devtools 项目的地址,出现这个问题的可能是 dev 分支惹的祸,看另一个教程,还是同样的项目地址,还是同样的项目,不同的安装手法,保你顺顺利利安装,不再出现问题 【看这里】https://blog.csdn.net/qq_38652871/article/details/106680947...原创 2020-06-11 10:45:35 · 682 阅读 · 0 评论 -
vue-devtools正确安装,不要克隆,克隆总出问题,vue-devtools正确安装方法,vue-devtools正确安装教程,有图有真相,不再有各种奇葩问题出现
vue-devtools项目地址:https://github.com/vuejs/vue-devtools/tree/master看清楚了,网上很多人给的地址是 dev 分支的地址,记得自己切换到 master 分支不要克隆,直接 download zip下载完之后解压缩到你想存放的位置,提醒一下:一会儿 chrome 安装 vue-devtools 之后当前目录是不能删除的,删除了对应的 chrome 扩展也就没了 … 找好自己要放的位置#进入该项目所在目录cd vue-devtools-原创 2020-06-11 10:01:35 · 1761 阅读 · 0 评论 -
vue项目webpack-dev-server本地代理携带token访问服务端接口报431(Request Header Fields Too Large)错误,解决办法
解决办法:vue项目使用webpack-dev-server本地代理报431,解决办法参考:【webpack运行内存溢出】原创 2020-05-13 17:49:50 · 3612 阅读 · 0 评论 -
vue项目本地启动服务携带token访问接口报431(Request Header Fields Too Large)错误,vue项目使用webpack-dev-server本地代理报431,解决办法
首先,声明一下:在 windows 上启动的项目,mac 本另说,没法测试是否可用,故暂时只有 windows 的解决办法后台 JAVA ,JWT 生成 token 进行验证,前台访问的时候,将 token 放入 header 里面携带过去,Authorization: Bearer token *******后台会根据用户权限不同,生成不同的 token ,这个好恶心的说,权限多的生成的 token 忒大了也,后来将本地的 nodejs 升级之后,vue 启动的本地服务访问接口总是报一个 431 R原创 2020-05-13 17:45:21 · 18033 阅读 · 3 评论 -
vue项目移动端兼容,vue项目使用lib-flexible做移动端项目兼容,lib-flexible做H5移动端兼容
项目使用的 VUE,cli 2.+ webpack 模板,没使用 VUE 的请 【看这里:原生html页面使用lib-flexible】安装 lib-flexible 依赖npm install --save lib-flexible安装 px2rem-loader 依赖npm install --save px2rem-loader全局引入 lib-flexible//main.js 里面引入import 'lib-flexible'配置 px2rem-loader// bui原创 2020-05-11 16:07:14 · 521 阅读 · 0 评论 -
vue创建项目卡住不动,vue init webpack projecctName 卡住不动,vue create projectName 卡住不动,gitbash创建vue项目上下箭头无效,解决办法
好久没有创建vue新项目了,今天创建了一个新项目,一运行 vue init webpack project_name 就卡住不动,换 vue create project_name 也是卡住不动,然后 命令行关都关不掉,后来上网找,好多人说什么vue/cli版本的问题,于是就更新了版本,更新到了4.+,还是不行还有的说nodejs版本问题,于是又从nodejs官网下载最新的 nodejs ,下...原创 2020-04-30 15:35:49 · 2030 阅读 · 0 评论 -
vue项目使用外网访问本地项目碰到Invalid Host header错误解决办法
使用外网访问本地vue项目出现错误:Invalid Host header看 webpack dev server 配置:【看这里】在 build/webpack.dev.conf.js 里面的 devServer 配置添加:disableHostCheck:true,OK,再使用外网访问,木得问题了不会用外网访问本地项目的有教程,【看这里】...原创 2020-04-30 10:19:35 · 1564 阅读 · 0 评论 -
vue2.+模板项目背景图片打包之后不显示,vue2.+模板背景图片相对路径打包图片也不显示,也不管用解决办法
先看描述:打包之后运行的地址不是服务器根目录,而是根目录下方的另外一个目录,这时候使用绝对路径是不行的,举个栗子:本来访问你的网站是酱紫:http://www.aaa.com现在服务端告诉你,项目放在了服务器根目录下边的 bbb 文件夹,打包之后存放的地址就是 bbb这时候访问地址就变成了:http://www.aaa.com/bbb 或者 http://www.aaa.com/bbb/i...原创 2020-04-29 16:28:17 · 429 阅读 · 0 评论 -
解决vue在控制台的 NavigationDuplicated 报错
解决vue在控制台的 NavigationDuplicated 报错复现vue router 升级到3.1.x 后,重复点击导航时(连续点击相同路由链接)控制台出现报错 {_name: “NavigationDuplicated”, name: “NavigationDuplicated”},虽然不影响功能使用,但也不能视而不见。原因vue router ≥ v3.1 后 ,回调形式改成p...转载 2020-04-21 09:24:25 · 268 阅读 · 0 评论 -
拿到别人的vue项目之后如何运行
首先先说情况:一、你拿到的是别人直接打包好的成品二、你拿到的是别人给你的源码,里边连依赖(node_modules)都存在的一个超大的压缩包三、别人放 git 上或者别人把 依赖(node_modules)删除之后给你的一个不大不小的压缩包,源码来说这三种情况哈:第一种,直接放你服务器根目录就可以访问了,不用运行,当然,这种的你改也没法改至于第二种和第三种,首先如果是个小白得话,建议你...原创 2020-04-21 09:17:40 · 21064 阅读 · 4 评论 -
响应式页面,插件vue-awesome-swiper在移动端乱套了,还有页面局部刷新会使得vue-awesome-swiper乱套,好纠结的说...改好之后记录一下子
首先,页面是响应式的,响应式的就不可避免的布局重新排列啊,重新渲染啊,什么resize, display:none; vibisility:hidden; transition, 等等,还有官网有一些什么动画特效啥的,结合着JS做一些简单的特效也几乎是不可避免的,有几个轮播直接用的 vue-awesome-swiper 插件,由于…怎么说呢,接口 API 也不可能一个个全看完了再去写这个轮播吧 所...原创 2020-04-17 16:27:27 · 476 阅读 · 0 评论 -
vue动态切换组件,组件无法展示,组件不显示解决记录
由于 pcHome 和 mvHome 里面都用到了 swiper 插件,所以用 v-if 老是出来一堆堆的红色错误,虽然程序照常运行,但是那一堆报错我就受不了,后来切换了 v-show 本地运行是好的,换安卓手机访问也是好的,用了一个 苹果手机 访问之后就出问题了,组件内的东西都显示不出来,用 vConsole 调试工具查看 html 结构,结构都有,就是不展示,这可急死我了,以前也没碰到这...原创 2020-04-17 15:29:12 · 5042 阅读 · 0 评论 -
vue/cli3.0创建的项目运行vue ui报错:vue : 无法加载文件 C:\Users\zgp_q\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。解决办法
今儿突然心血来潮使用vue/cli3.0创建的项目跑跑,结果就出现了错误:vue : 无法加载文件 C:\Users\zgp_q\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。按照提...原创 2020-02-28 23:19:24 · 1130 阅读 · 1 评论 -
vue的v-for循环普通数组、对象数组、对象、数字
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script></head><body> ...转载 2020-01-21 13:24:26 · 730 阅读 · 0 评论 -
vue自定义全局组件,vue自定义全局消息弹窗,vue自定义全局消息提示,一步步来,别着急
先看一下我的目录结构:首先和普通组件一样定义一个自定义组件在components下面:CusConfirm<template> <transition name="fade"> <div class="cus-confirm-mask" v-if="flag" @click="cancel"> <d...原创 2020-01-05 20:48:01 · 1538 阅读 · 0 评论 -
vue项目路由跳转添加自定义动画,路由跳转自定义动画过渡有空白页面解决办法
项目是这样的:左右切换上边的菜单栏的时候需要根据菜单栏是左侧的还是右侧的让主体里面的内容向左或者向右过度过来,这就用到了vue项目路由跳转添加过渡动画的功能,不得不说,做这个动画还是很方便的:看路由://index.js{ path:'/home', name:'home', meta:{ index:1 }, component:()=>import('@/page...原创 2020-01-02 09:45:56 · 1637 阅读 · 0 评论 -
vue的watch使用注意事项,watch使用找不到this实例情况
首先看官网截图:看到这里就知道了吧,watch的时候直接写function就好了demo:a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal)},原创 2019-12-31 17:17:14 · 5577 阅读 · 0 评论 -
vue更新data里面的数据(多维数组,多维对象同样这么解决就是了),页面不更新解决办法
官网描述:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’)vm.$set( target, propertyName/index, value ){Object | Array} target{string | nu...原创 2019-12-31 17:08:27 · 2795 阅读 · 0 评论 -
vue的for循环模拟原生JS的for循环,正序倒序做分页展示页数
<div class="page-box" v-if="pageFlag"> <button class="prev" @click="prev" v-show="curPage>1">上一页</button> <button class="page" @click="chosePage(1)" v-show="curPage>...原创 2019-12-20 14:34:05 · 837 阅读 · 0 评论 -
Vue项目全局使用scss变量,稍微变动一下就可以全局使用less变量,让scss或less变量作用全局
提示:这里使用的是 cli 2.+ 的模板注意:项目用的 less or scss如果不会改 less or scss 请自行修改 【GO>>】安装 scss-resources-loadernpm install sass-resources-loader --save-dev修改 build 中的 utils.jsscss: generateLoaders('sas...原创 2019-11-28 14:48:20 · 1023 阅读 · 0 评论 -
vue中使用vux记录(亲测可行)
前提:vue项目用的是less语言(css) 不会改less的请看这里 【go>>>】1.安装 vuxnpm install vux --save-dev2.安装 vux-loadernpm install vux-loader --save-dev3.安装 yaml-loadernpm install yaml-loader --save-dev4.改 bu...原创 2019-11-15 18:15:45 · 356 阅读 · 0 评论 -
vue实现模拟当前页面内部锚点跳转
scrollIntoView : GOhttps://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoViewElement.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。exp:element.scrollIntoView(); // 等同于element.scrollIntoView...原创 2019-11-11 11:08:45 · 1409 阅读 · 0 评论 -
vue项目报错:Cannot read property '_withTask' of undefined
Cannot read property ‘_withTask’ of undefinedvue项目见到这个错误,啥都不用寻思,直接查一下项目里边是不是绑定了事件,对应的函数没定义@click="aaa"找一下aaa函数是否定义就解决这个错误了...原创 2019-10-20 16:54:25 · 548 阅读 · 0 评论 -
vue阻止事件冒泡等修饰符记录
.stop 阻止单击事件继续传播.prevent 提交事件不再重载页面.capture 添加事件监听器时使用事件捕获模式.self 只当在 event.target 是当前元素自身时触发处理函数.once 只触发一次.passive Vue 对应 addEventListener 中的 passive 选项提供了 .passive 修饰符这个 .pas...原创 2019-10-17 10:34:18 · 434 阅读 · 0 评论 -
vue-cli创建webpck项目 版本 2.+
Vue是近两年来比较火的一个前端框架(渐进式框架)。 Vue两大核心思想:组件化和数据驱动。组件化就是将一个整体项目合理的拆分为一个一个小块小功能(也就是组件),组件可重复使用;数据驱动是前端的未来发展方向,释放了对DOM的操作,让DOM随着数据的变化自然而然的变化(尤大大原话),不必过多的关注DOM,只需要将数据组织好即可。1.下载安装nodejshttp://nodejs.cn/dow...原创 2018-11-24 11:05:03 · 6242 阅读 · 0 评论 -
vue-cli webpack 项目打包后如何运行
vue-cli webpack 创建的项目打包后生成的项目如何运行1.项目打包运行 nom run build 项目打包 会形成一个dist文件加,里面是打包之后的东西在这里进行一下描述dist 整个文件夹下的东西就是要运行在服务器端的所有东西,之外的任何东西都是本地测试的,不需要部署服务器上2.如何运行打包后的项目以express服务器为例安装express创建一个文件夹,在文件...原创 2018-11-24 11:22:10 · 3206 阅读 · 2 评论 -
VUE浅谈之性能优化
前言公司的后台管理项目最近发现首访加载特别慢,好久没有注意过network加载速度情况了,于是就随手点开查看了一下,发现有个js文件竟然加载了七八秒钟的样子,这怎么行,这种首访加载速度别说客户了,我自己都受不了,于是就有了性能优化之说方向路由懒加载插件cdn加速js、css等gz压缩mapjs屏蔽console语句过滤冗余代码,逻辑等等详细说明路由懒加载顾名思义就是按需加...原创 2019-03-06 16:25:51 · 607 阅读 · 0 评论