老君-hjs-优快云博客

原创编码规范（自用习惯）

规范文档代码规范命名规范编码风格提交规范代码规范代码规范是软件开发中至关重要的一部分，它涵盖了代码的编码风格、代码结构、命名规范、注释规则等方面的准则。命名规范命名规范按照类型 Number、String、Boolean、Object、Array、Function、Date、RegExp、Error、undefined、Null、Symbol、Set、Map将类型首字母与变量名结合例如 nAge 代表 n + age 意为年龄是number类型变量命名（目前Number、Strin

2024-01-09 10:08:48 550 5

原创 vue 打开相同页面，query不同如何进行刷新

需求：tabs打开detail?id=1和detail?id=2首次需要刷新，但是在tabs切换时需要缓存。解决方案：增加`route`，用`fullPath`判断`component`的`key`。

2023-11-23 09:55:26 322

原创 Sourcetree遇到的相关问题汇总

fatal: protocol error: bad line length character

2023-04-28 17:35:14 1784

原创【手写简易cli遇到的问题】

报错一： npm WARN xxx@1.0.0 No repository field.这个报错的意思是package.json里缺少repository字段，也就是说缺少项目的仓库字段{ ... "repository": { "type": "git", "url": "http://xxx.com" }, ...}但是自己手写的话不需要配置，只需在package.json里面做如下配置即可:{ ... "private": true,

2022-01-20 14:53:23 889

原创 vue3.x 一套代码打包多环境多项目

一套代码打包多环境多项目需求多环境打包实现多环境打包实现版本号：vue/cli：4.5.12node：v14.15.3npm：6.14.9需求代码多环境打包很常见，直接说说多项目打包：多项目打包就是一套代码，只有logo，部分样式，标题等不同。如果分好几套代码，后期改需求总不能每套代码都改一遍，所以就需要多项目打包。（当然，如果后期项目差异过大时，还是强烈建议把项目区分开来）多环境打包实现在package.json的scripts下push以下代码"dev": "vue-cl

2021-11-08 18:52:32 2492 3

原创 js：浏览器获取剪切板内容

使用示例const TEXT = navigator.clipboard.readText();TEXT.then(text => { console.log("剪切板内容：" + text); // 操作完之后，可以写空值到剪切板，防止下次还是相同数据 navigator.clipboard.writeText('');}).catch(err => { console.error('Failed to read clipboard contents: ', err);});

2021-11-08 14:51:57 4314

原创 vue3.x 路由*匹配

版本号：vue/cli：4.5.12@vue/cli-plugin-router: ~4.5.0const router = createRouter({ history: createWebHashHistory(), routes: [{ name: 'Home', path: '/', component: () => import( /* webpackChunkName: "home" */ '../views/home/index.vue'), },{ path: '

2021-11-08 12:02:21 561

原创 vue3.x报警告：Path “/“ was passed with params but they will be ignored. Use a named route alongside ...

版本号：vue/cli：4.5.12@vue/cli-plugin-router: ~4.5.0问题以下写法会导致报警告：[Vue Router warn]: Path "/" was passed with params but they will be ignored. Use a named route alongside params instead.[Vue Router 警告]：路径“/”与参数一起传递，但它们将被忽略。改为在 params 旁边使用命名路由const router

2021-11-08 11:59:29 13856

原创 vue3.x使用swiperUI “loop“: true失效

版本号：vue/cli：4.5.12swiper：^6.8.4问题动态加载图片时， swiper 的 loop: true 失效解决方案这里有两种解决方案启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。默认false，不开启，可以使用update()方法更新。observer: true,observeParents: true,observeSlideChildren: true,...

2021-11-08 11:46:32 637

原创 vue3.x使用swiper 做卡片轮播

版本号：vue/cli：4.5.12swiper：^6.8.4安装npm install --save swiper使用以及配置<div class="swiper-container home_swiper"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(item,index) in aImages" :key="index"> <img :src="item

2021-11-08 11:31:19 2856 9

原创 vue3.x使用swiperUI动态加载图片失败

版本号：vue/cli：4.5.12swiper：^6.8.4问题动态加载图片，但是动态加载图片为空，需要显示默认图片时使用v-if失效<div class="swiper-container home_swiper"> <div class="swiper-wrapper" v-if="aImages.length > 0"> <div class="swiper-slide" v-for="(item,index) in aImages" :key

2021-11-08 10:43:02 507

原创 vue3.x报警告：Do not access Object.prototype method ‘hasOwnProperty’ from target object no-prototype-bui

版本号：vue/cli：4.5.12eslint: 6.7.2问题ESLint升级后如下错误：Do not access Object.prototype method ‘hasOwnProperty’ from target object no-prototype-bui// 错误代码for (let Key in OPTIONS) { if (OPTIONS.hasOwnProperty(Key) === true) { ... }}解决方案for (let Key in

2021-11-05 18:27:41 1779

原创 vue3.x使用vantUI离开当前的组件，在onBeforeRouteLeave中触发vant弹框失效

版本号：vue/cli：4.5.12vant：^3.0.10问题离开当前的组件，在onBeforeRouteLeave中触发vant弹框失效解决方案import { ref} from 'vue';import { onBeforeRouteLeave} from "vue-router";export default { setup() { const showDialog = ref(false); onBeforeRouteLeave((to) => {

2021-11-05 18:17:02 2085

原创 vue3.x使用provide / inject进行页面刷新

需求：A, B, C三个页面，其中B页面缓存 A=>B刷新；B=>C，然后C=>B不刷新；B=>A，然后A=>B刷新；B=>D，然后D=>B根据B携带的参数判断是否让B刷新这种情况很多，页面虽然缓存了，但是很多情况都需要刷新，所以浏览了很多文章感觉这个写的是最适用于我的。vue3.0刷新页面、刷新组件(provide / inject在setup里使用) 我也做一下在自己项目中具体使用的记录~使用：App.vue<template&

2021-11-05 17:49:08 1096

原创 vue3.x使用vantUI报警告：Input elements should have autocomplete attributes (suggested: “new-password“)

问题使用van-field 输入框，当 type="password" 时, 报以下警告：Input elements should have autocomplete attributes (suggested: "new-password")解决方案<van-field type="password" autocomplete />参考资料：强烈建议大家看一下！！里面有很多其他类型，可以了解一番~input 标签原生的自动完成属性...

2021-11-05 16:41:10 470

原创 vue3.x使用vantUI报错Failed to resolve component: van--

版本号：vue/cli：4.5.12vant：^3.0.10问题：Failed to resolve component: van-cell-group at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key=0 >原因：van-cell-group 该组件未引入解决方案：在`main.js`文件中引入然后再在页面使用即可具体如下：impo..

2021-11-05 16:14:03 7392

原创 css 个人书写习惯

当UI图中要求所有标签之间的间距不同时，统一设置margin-left; 这么写主要就是为了排版。如果“二娃”因为需求原因隐藏的话，那么“大娃”与“三娃”之间还会按照“三娃”的间隙进行排版。同理：竖向排列统一设置margin-top（ps：已实际需求为准！） <!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> html, body, div, s

2021-09-26 20:30:54 103

原创 css之overflow:hidden对于溢出到padding的内容不隐藏

盒子模型的内容区域其实包括content+padding，即padding box，虽然正常情况下元素只在content内排布，但是当内容溢出到padding也是允许的，故overflow:hidden对此不做影响。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .padding ...

2021-09-26 20:06:10 5849 6

原创 vant展示组件之Lazyload 懒加载

版本号：vue/cli：4.5.12vant：^3.0.10使用方式：// 在main.js文件中import { createApp} from 'vue'import { Lazyload} from 'vant'import default from '@/assets/images/default.png'// 注册createApp(App).use(Lazyload, { lazyComponent: true, attempt: 3,

2021-09-26 19:49:20 2881

原创 vue-router 动态添加路由，二次添加遇到的问题

@[TOC] 修改记录vue-router 动态添加路由，二次添加遇到的问题问题：因为路由根据登录角色获取的路由信息，如果退出后再次登录则需要重新获取路由信息因为addRoutes 给路由表中添加路由，导致有些路由信息重复报警告：Duplicate named routes definition解决：// constantRoutes是公共路由，如下：export const constantRoutes = [{ path: '/redirect', component: Layou

2021-03-13 09:41:08 1974

原创 vue路由守卫 —— 组件内beforeRouteEnter

beforeRouteEnter在渲染该组件的对应路由被确认前调用，用法和参数与beforeEach类似，next需要被主动调用注意：此时组件实例还未被创建，不能访问this可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数beforeRouteEnter(to, from, next) { console.log(this); // 这里打印this是undefined console.log(to, '参数1:即将要进入的目标

2020-06-03 10:13:17 3499

原创 webpack摸门篇(版本号:4.43)

webpack一. 基础代码拆分Loader智能解析二. 安装删除全局webpack-cli删除本地（局部）webpack-cli删除全局webpack删除本地webpack检查webpack残余文件(可以省略这一步)安装webpack三. 使用例：借鉴文章@有人找你链接：https://blog.youkuaiyun.com/JUandjuddd/article/details/106222574解决部分问题,有问题加QQ87110230一. 基础Webpack 是一个模块打包器。它将根据模块的依赖关系进行

2020-05-21 18:04:37 651 1

老君的博客