前端一线搬运工的博客

git push 或 git pull 的时候每次都需要输入密码, 原因是因为设置公钥的时候设置了密码, 我们只需要打开Git Bash命令控制工具, 输入以下命令删除密码即可

vue3脚手架运行各种报错汇总(持续收集)

前端ID锚点定位并滚动到指定元素位置

VUE调用方法 加不加括号 有什么区别

vue运行加载到98%, 项目无提示报错

懒加载优点解决dom一次性渲染开销大,导致浏览器卡顿, 或者内存不足崩溃技术栈Vue.js ElementUi针对vue框架做了directive(自定义指令 — Vue.js)的形式开发, 代码如下// src/directive/lazyLoading.jsfunction debounce(fn, delay) { // 防抖 var timeout = null; // 创建一个标记用来存放定时器的返回值 return (e) => { c...

本文是根据自动扫描生成国际化文件后, 叠加的操作, 传送门:国际化vue-i18n之i18next-scanner自动化使用教程_阿喵阿旺的博客-CSDN博客_i18next vue然后现在拿到的需求是需要导出一个excel文件给到产品或专业人士核对翻译是否准确, 最终效果如下:实现代码// 安装依赖npm install json2xls -Dconst json2xls = require("json2xls");const path = require("p...

项目做多入口, 默认入口为index时启动出现如下报错:Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin('preload').use(<Plugin>) first.错误代码:// vue.config.jsmodule.exports = { pages: { index: { entry: "src/main.js", .

(√ ) 解决页面使用$t('title')导致可读性差问题(√ ) 解决国际化变量命名冲突问题本文适合已经配置好i18n的开发者, 如还不会配置i18n请阅读:vue中如何使用i18n实现国际化 - 掘金在4k广告机中需要实现多语言切换，这时候接触到国际化，前端框架无数，其中几种热门的框架都有相匹配的国际化插件工具。比如： 在4K广告机项目中使用的前端框架为Vue，故而我们将使用vue-i18n这个插件进行国际化功能的实现。 1、首先在自己的项目中安装 vue-...

新建文件_globals.jsimport Vue from 'vue'const requireComponent = require.context('./components-global', false, /_base-[\w-]+\.vue$/)requireComponent.keys().forEach(fileName => { const componentConfig = requireComponent(fileName) const componentNam.

2022年了, husky配置也变了, 老代码弃坑, 直接上新代码1.配置husky1.1 安装husky包npm install husky --save-dev1.2 根目录package.json添加工程命令"scripts": { "prepare": "husky install"},1.3 生成.husky文件夹npm run prepare1.4 生成commit-msg规范入口文件(文件夹名字也可以是pre-commit)npx...

需求如嵌套路由, 一级是/home, 二级是/home/user, 这种做成动态面包屑点击面包屑内容从二级/user跳转回一级/home是完全没有问题的.但是如果home带有参数如/home?id=1, 那么vue的$route的matched是拿不到?id=1的, 只有全路径fullPath参数才能拿到.如图面包屑需要的是fullPath,但是面包屑是根据matched生成的, 而matched里面没有fullPath解决思路： 把fullPath放入matched中解决代码如下

网上搜的方法都是错误的, 比如百度搜索前十都是复制粘贴如下代码:// 错误方式function setCookie(name,value){ var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); // 错误 document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTSt

按照百度的新建common.d.ts文件并输入declaremodule'*.js'; 依然会报错common.d.tsis not a module.正确解决办法是:src下的shims-vue.d.ts中添加 declaremodule'*.js';// 目录文件: src/shims-vue.d.tsdeclare module '*.vue' { import Vue from 'vue' export default Vue}declare module ...

Webpack链式开启Gzip压缩打包

框架搭建参考如下文:从 0 开始手把手带你搭建一套规范的 Vue3.x 项目工程环境 - 掘金从 0 开始手把手带你搭建一套基于 Vite + Vue3 + TypeScript 规范的前端工程化项目环境，涵盖代码规范约束、提交信息规范约束、单元测试、自动部署等。https://juejin.cn/post/6951649464637636622#heading-14按照文章直到[#解决 Prettier 和 ESLint 的冲突]这一步骤完成后, 发现页面的引入都出现了eslint提示, 但是...

报错信息[Vue warn]: Property or method "$$v" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.or

今天正好是20211202日, 看到网上说从左往右读还是从右往左读都是一样的数字的年月日,就来了兴趣, 代码如下: const arr = []; for (let i = 1000; i < 3000; i++) { for (let j = 1000; j < 3000; j++) { if ( String(i)[0] === String(j)[3] && ...

methods: { // 自定义blot stockBlot() { // 引入源码中的BlockEmbed const BlockEmbed = Quill.import('blots/block/embed'); // 定义新的blot类型 class StockEmbed extends BlockEmbed { static create(value) { const node = s......

<!-- 设置自定义属性popper-class --><el-tooltip popper-class="diy-popper" :content="content"> 内容</el-tooltip>// 不要scoped<style lang="scss">.diy-popper{ width: 200px;}</style>

网上转换大部分到10是零一十， 11是一十一， 和需求不符合， 固自己修改了下：/** * 阿拉伯号转中文 支持1到100 （使用场景如序号） * @param {Number} num 数字 */const getChinese = (num) => { const changeNum = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九']; const unit = ['', '十', '二十', '三十', '四十', '五十

在sortablejs中排序, 使用splice, 按照vue的触发视图的方法确实对象数组的位置都更新正确了, 但是dom元素上其他一些初始化渲染的左侧ABC序号和右侧第三列就出现删除文字的渲染既然跟着sortablejs拖拽一起移动了.而我拿到的需求是拖拽后, 左侧ABC正常从上往下显示, 右侧删除文字也是从第三列开始显示.解决办法如下:// 拖拽排序 sortableFun() { const _this = this; let scrollTopTe...

解决办法 一在el-popover中加属性 :ref="`popover-${scope.$index+scope.column.id}`"隐藏弹窗方法: @click="this.$refs[`popover-${scope.$index+scope.column.id}`].doClose()"// 或@click="scope._self.$refs[`popover-${scope.$index+scope.column.id}`].doClose()"//...

// 索引转26个字母 0对应A, 25对应Z filterLetters(i) { if (i >= 0 && i <= 25) { return String.fromCharCode(65 + i); } else { return undefined; } },拓展:MDN String.fromCharCode()

export default { data: { isReady: false }, mounted() { const unwatch = this.$watch('isReady', function(newValue, oldValue){ console.log(newValue); unwatch() }); }, }作者：Momo链接：https://www.zhihu.com/question/414637440/answer/1414088153来源：知乎著作权归作者所有。商业转

场景重现当使用flex布局垂直排列并且到达父盒子高度就换行的时候, 会产生溢出的情况解决办法ul{ writing-mode:vertical-lr; li{ writing-mode:horizontal-tb; }}// 父盒子: writing-mode:vertical-lr; (垂直方向内内容从上到下，水平方向从左到右)// 子元素:writing-mode:horizontal-tb; (水平方向自上而下的书写方式。即 le...

报错: -404011 cloud function execution error | errMsg: cloud.callFunction这个范围太广了情况一 是你压根没上传云函数, 那准报错情况二 是你初始化云函数的环境id对不上, 你云端有两个环境, 一个是dev, 一个是pro, 然后你的云函数都部署到了dev, 然后初始化云函数是连了pro, 那也准报错情况三 是你本地安装了node_modules包然后安装缺失了有报错了你没看见, 然后把本地的所有文件都部署到云端, 也也也一样

框架: create-react-apppackage.json文件原配置如下:"scripts": { "start": "node scripts/start.js", },一: 场景重现1. 按照node正常流程带参配置如下:"scripts": { "start": "node scripts/start.js --http_env uat", },2. 页面获取不到console.log(process.argv) // []空数组...

Windows创建一个新的chrome浏览器快捷方式, 右键打开属性，在目标地址后面加上如下参数:--args --disable-web-security --user-data-dir="C:/ChromeDevSession"如我的目标地址: C:\Users\ThinkPad\AppData\Local\Google\Chrome\Application\chrome.exe加完后目标地址: C:\Users\ThinkPad\AppData\Local\Google\Chrom

import React from 'react';import './index.css';/** * 单击复制文本到剪切板 * @text {String} 需要复制的文本内容 * @children {Node} 渲染的Dom元素 */class copyClipboard extends React.Component { constructor(props) { super(props); this.state = { offsetLeft: 0,.

GIF展示:原理: 父盒子自适应, 子盒子大小随父盒子动态变化, 即可实现动态缩略文字;代码:<div style="width:100%"> <p style="width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">我是一段重复的长文本|我是一段重复的长文本|我是一段重复的长文本|我是一段重复的长文本</p></div>...

umi3.x 版本:Github issue：umijs3 启动后如何自动打开浏览器(3.x版本github官方回复不支持自动打开浏览器, 不知道为什么有这种反向升级)-解决办法:开发环境安装Node包npm i open-browser-webpack-plugin --save在config.ts配置文件的defineConfig中加入chainWebpack(memo, { env, webpack, createCSSRule }) { env === 'deve.

antd4.x版本 出现Warning: [antd: Switch] `value` is not a valid prop, do you mean `checked`?网络上都是3.x版本的处理办法, 4.x解决办法是添加valuePropName属性:<Form.ItemvaluePropName="checked"><Switch /></Form.Item>举一反三, 如Upload组件antd4.x版本 出现 Warnin...

场景子组件:<script lang="ts">export default { name: "child",};</script><template> <div>我是子组件</div></template>父组件(引入子组件):<script lang="ts">const Child = () => import("./components/child");// Canno

场景:一: 控制台报错:二: 错误代码:原因:一. 这是因为引入的node_modules包没有.d.ts这个类型申明文件.解决办法很简单, 首先可以参考官方是这样解决的(自行点击自己项目文件看吧):二. 而我们开发会有很多第三方包, 所以就把申明集成在文件夹内:1. src目录下 新建 @type文件夹 (这个名字也是遵循node_modules包内的定义申明存放文件夹的名字)2. @type目录下 新建 控制台报错的包名文件夹 (本文是v-click..

echart.on("legendscroll", params => { // 阻止冒泡 event.stopPropagation(); // 滚动事件派发 --(注意这是一个死循环) this.dom.dispatchAction({ type: "legendScroll",// 官方文档说全小写, 实际开发小写的dispatchAction无法触发事件 sc...

问题:出现了<compont :is="componentId">提示缺少v-bind:is的问题, 查阅官方文档明明是正确的代码片段场景:根据腾讯团队的alloy-team-eslint文档安装:npm install --save-dev eslint-config-alloy eslint-plugin-vue babel-eslint (这是官方给的,但是是错误的, 缺少了两个包, 下面会解释)然后我配置完成之后, 我的eslint正常, 可是团队的esli..

我是vue add @vue/typescript 后, 再跑项目就出现的报错解决办法一:npm list -g --depth 0 // 查看全局包npm uninstall -g typescript // 删除tsnpm uninstall -g eslint // 删除eslint解决办法二:也可以直接去文件夹删除:C:\Users\自己用户的文件夹\AppData\Roaming\npm\node_modules...

问题:> immunity-management@1.0.0 dev F:\iview-admin> vue-cli-service serve --open'vue-cli-service' 不是内部或外部命令，也不是可运行的程序或批处理文件。npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! immunity-management@1.0.0 dev: `vue-cli-service serve --open`npm ER

按照官方文档引入无显示, 查看html发现<iconstype="mm"/>是编译成<i class="iconfont icon-mm" style="font-size: 16px; color: rgb(92, 107, 119);"></i>文档地址:https://lison16.github.io/iview-admin-doc/#/icons原因是因为新建的iconfont前缀默认是icon没有横杠(默认)为了适配iView-adm...