前端一线搬运工的博客

uniapp+vue 配置全局组件的两种方式(手动和自动)

微信小程序[ app.json 文件内容错误] app.json: app.json 未找到(env: Windows,mp,1.05.2204250; lib: 2.26.0)

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

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

表格中的fixed列就会出现排版错误的解决办法

微前端

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

项目做多入口, 默认入口为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.

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

按照百度的新建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 ...

框架搭建参考如下文:从 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

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

在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()"//...

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来源：知乎著作权归作者所有。商业转

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,.

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

我是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...

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

vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>，穿透scoped。有些Sass 之类的预处理器无法正确解析 >>>。可以使用 /deep/ 操作符( >>> 的别名)原文链接：https://blog.youkuaiyun.com/Alex81320/article...

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。所以传值传对象即可provide(){ return { provObj: { uuidList:{} } } },this._provided.provObj.uuidList = r...

起因vue执行了npm i vue@2.6.10的更新命令, 就会出现如下提示:解决思路:npm i vue-template-compiler和vue版本需要一致解决办法:更新vue-template-compiler, 命令行输入:npm i vue-template-compiler@2.6.10(你的vue版本号)...

解决办法一:在main.js 中添加代码router.afterEach((to, from, next) => { window.scrollTo(0, 0)})解决办法二在路由文件夹的index.js里添加scrollBehaviorexport default new Router({ routes: [{...}], scrollBehavior(to, ...

以下demo组件名用Form做演示解决办法1:命令行报错如下:翻译:已定义“Form”，但未使用已定义变量解决方式如下:解决办法2 :命令行末尾提示如下:翻译:若要忽略，请在前面的行中添加 //eslint disable next line解决方式如下:解决办法3:找到.eslintrc.js 文件, 在rul...

需求:项目是JQuery做成的网站,后来为了迎合seo需求,首页需要修改成vue的ssr即服务端渲染,其他页面因为时间关系只能先不修改,但是上线新的首页后,其他页面访问不了.便写下解决过程以此记录与分享.解决办法一:未改造的页面放在vue的static这个文件夹中即可.**因为我的vue项目里面不存在其他页面,即vue项目里面只有一个首页页面index.vue,所以项目部署vu...

步骤一: 监控项目文件首先Nuxt.js项目的入口文件是packge.json,项目名是ssrqiu006,也就是PM2需要监控用到的项目名 pm2 start  npm --name "ssrqiu006" -- run build --watch步骤二:  修改版本号当你的项目重新打包上传文件时,网站的内容还是旧的,这时候就需要更改packge.json的版本号...

目录一.问题来源二.解决思路三.解决办法四.总结一.问题来源平时使用nuxt和部署上线都是正常运行的,偶尔有一天报500的错误;Nuxt.js运行(npm run dev)报错如下:服务器错误日志如下:0|qiu | ERROR Request failed with status code 500 ...

第一步: 检查包检查package.json文件是否有 cross-env 这个包,没有的话执行下面命令;npm install  cross-env -save简写: npm i  cross-env -S*cross-env --跨平台设置及使用环境变量包 第二步: 修改配置package.json文件修改配置(baseUrl=测试域名或正式域名)"scr...

样式解析&lt;div :style="{'border-left':'10px solid'+ $value.color}"&gt;多种数据解析&lt;div :data-lang="$value.events.short_name_zh+',' +$value.events.short_name_zht+','+$value.events.short_name_en"&gt;a标...

一、问题描述首次进入聊天窗口，数据加载之后先显示最早消息，后显示最新消息，也就是数据加载完之后，延迟了一个时间滚动条才自动定位到最底部。二、解决方案  如果数据在刚好加载完的时候滚动条就定位到了最底部就好了，就不会在进入聊天窗口之后还看到滚动条在往下滚动，出现的问题就是因为获取数据和设置滚动条位置的代码不是同步的不是按顺序执行的，后者加了定时器。  像微信聊天窗口一样，一进入到...

 当methods:{}中的一个函数声明打印命令,命令是输出数字1:methods:{ abc(){ console.log(1) }} 如果这个方法在create钩子中调用,则会在命令行和控制台中都会打印数字1:created:function(){ this.abc();},  如果在mounted钩子中调用,则只会在...

一: 安装需要用到的loadernpm install --save-dev node-sass sass-loader官方文档传送门: css配置 二: 页面调用(注意不要漏了lang="scss",不是sass)&lt;style lang="scss"&gt;//注意!这里很关键,很多配置成了不编译就是漏了lang="scss"    @import '../ass...

父子组件传值原理图一般页面的视图App.vue应为这样一.父组件向子组件传值1.创建子组件，在src/components/文件夹下新建一个Child.vue2.Child.vue的中创建props，然后创建一个名为message的属性3.在App.vue中注册Child组件，并在template中加入child标签，标签中添加message属性并赋值4.保存...

write EPROTO 101057795:error:14077410:SSL routines:SSL23_GET_SERVER_HELLO:sslv3 alert handshake failure:openssl\ssl\s23_clnt.c:802: unable to verify the first certificate ↓↓↓----------...

vue模板也好还是art-template模板引擎也好,使用谨记下面这条规则:静态数据(不用交互的)直接在模板引擎上输出,动态数据则写在方法(js)里,是为了后期修改维护!微不足道不值得一提的点,却十分重要! ...

v-on:click="showVal($event)"showVal($event){console.log($event.target.innerText)}

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script></head><style> ...