Vue
关注
分享
扫一扫
shidouyu
这个作者很懒，什么都没留下…
展开
-
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit
if (process.env.NODE_ENV === 'production') {// 为生产环境修改配置...productionSourceMap: false, // 生产环境是否生成 sourceMap 文件。assetsDir: "static", //放置生成的静态文件目录（js css img）config["performance"] = {//打包文件大小配置。outputDir: 'dist', // 输出文件目录。publicPath: './', // 基本路径。原创 2022-10-28 09:00:07 · 7350 阅读 · 0 评论 -
vue展示.md文件
将md文件作为组件导入，注意：class的值必须包含 markdown-body ，否则样式无法生效！链接：https://www.jianshu.com/p/a84f8ddf0b04。需求：在vue项目中导入并展示markdown文件（使用的vue-cli3）安装 vue-loader 、vue-template-compiler。安装 github-markdown-css、highlight.js。在vue.config.js中配置webpack。安装 vue-markdown-loader。转载 2022-10-08 10:43:11 · 1026 阅读 · 0 评论 -
正则表达式中，如何获取括号中的内容，不包含括号和单引号
正则表达式中，如何获取括号中的内容，不包含括号和单引号转载 2022-09-27 08:42:08 · 6825 阅读 · 0 评论 -
vue中model命令的三个特殊用法
vue中model命令的三个特殊用法原创 2022-08-19 08:59:10 · 274 阅读 · 0 评论 -
报错Unknown custom element: ＜组件名＞ - did you register the component correctly?的原因及解决办法
模块系统发现它需要 A，但是首先 A 依赖 B，但是 B 又依赖 A，但是 A 又依赖 B，如此往复。为了解决这个问题，我们需要给模块系统一个点，在那里“A 反正是需要 B 的，但是我们不需要先解析 B。第三种：检查引入的组件 确定是否需要{} , import XXX from "...." 还是 import { XXX } from "...."假如有A,B两个组件，渲染A组件的时候，A组件中引入了B组件显示，在渲染B组件的时候又引入了A组件，会导致控制台一直报是否正确注册了组件的错误。...原创 2022-08-17 17:14:08 · 65335 阅读 · 3 评论 -
vue针对循环中slot的传参数
vue针对循环中slot的传参数原创 2022-06-20 11:14:17 · 1184 阅读 · 0 评论 -
vue兼容谷歌48(含qiankun兼容)
控制台定位到相应插件的js，找到插件：1,在vue.config.js中配置：'transpileDependencies': ['@jiaminghi/*',],transpileDependencies为特别需要将es6代码翻译成es5的插件说明；2,css3的var兼容：npm install css-vars-ponyfill mutationobserver-shim —saveimport 'mutationobserver-shim'import cssVar原创 2022-04-26 09:17:51 · 2689 阅读 · 0 评论 -
html转成base64/blob/file
import html2canvas from 'html2canvas'async saveImage(divText, _this) { let canvasID = _this.$refs[divText]; let a = document.createElement('a'); return new Promise((resolve, reject) => { html2canvas原创 2022-04-20 14:38:34 · 1339 阅读 · 0 评论 -
单文件vue.js组件化
<body style="background-color: #E7F1FF;height:100vh;"> <div id="loginhtmlshow"></div> <div id="loginhtml" class="height100 lglr flexbox"> <userdifine /> </div> <script type="text/javascript"&.原创 2022-03-17 19:54:08 · 273 阅读 · 0 评论 -
前端预览 PDF 文件
PDF.js 是什么？PDF.js由 Mozilla 提供支持。目标是创建一个通用的、基于 Web 标准的平台，用于解析和呈现 PDF。预览 PDF使用 iframe、embed、新窗口打开测试地址，方案比较简单，属于看天吃饭，全靠浏览器爸爸赏。使用方式<embed src="https://www.lilnong.top/static/pdf/B-4-RxJS%E5%9C%A8React%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8-%E9%BE.转载 2022-01-12 15:53:03 · 791 阅读 · 0 评论 -
require图片相对路径时，有些图片能显示，有些不能
let img = require(`../assets/images/index/icon_ku.png`) let img2 = require(`../assets/images/index/icon_DB2.png`) console.log(img) // 结果：/img/icon_ku.b259504f.png console.log(img2) // 结果：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAAtCAYAAAD7na..原创 2022-01-06 10:38:10 · 1799 阅读 · 0 评论 -
vue 刷新当前路由
<router-view v-if="isRouterAlive" />isRouterAlive:truereload() { this.isRouterAlive = false this.$nextTick(() => { this.isRouterAlive = true })}原创 2021-11-22 17:03:47 · 729 阅读 · 0 评论 -
前端组件库大合集-必备收藏
前端组件库 搭建web app常用的样式/组件等收集列表(移动优先) 0. 前端自动化(Workflow) 前端构建工具 Yeoman – a set of tools for automating development workflow gulp – The streaming build system grunt – the JavaScript Task Runner F.I.S – 前端集成解决方案 前端模块管理器 Bower – A p..转载 2021-09-18 17:53:49 · 14605 阅读 · 0 评论 -
element Form当el-input有焦点时，按下回车会发生页面刷新事件
问题描述：在提交某项业务时，需要输入一次密码，点击下方确定后提交，但是当el-input有焦点时，按下回车会发生页面刷新事件，url中的参数也被清空。代码如下：<div class="password ft12"> <el-form> <el-form-item label="密码：" label-width="95px" prop="password" class="password"> <el-input clas...转载 2021-09-10 10:36:27 · 368 阅读 · 0 评论 -
vue之$emit返回值
vue之$emit返回值应用场景：子组件调用父组件的方法并获取到父组件方法的返回值// 父组件getdata(){ return data}// 子组件let data = this.$emit("getdata", bounds)return data这种写法是错误的，拿到的data是指向方法的this，无法获取到data正确写法：// 父组件getdata(bounds, callback){ callback(data)}// 子组件let d转载 2021-08-27 17:35:58 · 6882 阅读 · 1 评论 -
同一浏览器下多用户登录问题解决
问题：在如果在同一个浏览器下只有一个用户登录的情况，在服务端可以使用 Session 存储用户登录信息。但是在项目中如果需要在同一个浏览器下允许多个不同的用户登录，这样做会存在问题，因为服务端区分不同用户是通过 Cookie 中存储的 JSESSIONID 区分的，如果 JSESSIONID 相同，那么他们在服务端将会使用同一个 Session 对象。而同一浏览器使用的 Cookie 是相同的， 从而 JSESSIONID 也是相同的，无法区分不同的用户。当浏览器登录第一个用户后，用户信息写入到 Ses..转载 2021-08-05 09:57:25 · 7108 阅读 · 0 评论 -
Promise.all和Promise.race方法区别
Promise.all:1，有一个失败的请求，其他都失败；若需弥补这个缺陷，在每个Promise中增加Catch错误捕捉，且return出来；2，返回结果的顺序按照参数的顺序进行；Promise.race:1，根据第一个请求来返回结果，若第一个成功，全局都成功，第一个失败，全局都失败；2，返回结果的顺序，按请求时间顺序来，时间快的先返回；...原创 2021-07-19 11:00:28 · 1307 阅读 · 0 评论 -
Promise.all同时处理多个请求
需求：多个请求，不管成功或失败，都希望拿到这些请求的结果，比如，第一个请求失败了，后面的请求还是继续，请问怎么实现？初版将所有的异步请求的结果放入一个数组 使用 Promise.all 来处理 代码如下：// Vue.prototype.$http = axios data() { return { data: {}, ids:['https://cnodejs.org/api/v1/topics','https://cnodej转载 2021-07-19 10:46:15 · 1479 阅读 · 0 评论 -
vue中将元素加入body中
// 将弹框加入Body中 addRemoveDateWinToBody(type) { this.$nextTick(() => { const body = document.querySelector('body') if (type) { // 显示 let zDateWin = this.$refs.zDateWin let pTabName = zDateWin.paren...原创 2021-07-07 13:44:59 · 6622 阅读 · 0 评论 -
vue自定义组件库，49浏览器上报token...的错
由于业务需求，所以必须兼容49等IE老浏览器；然而，es6语法无法被兼容，所以需在打包时转成es5；通常用的都是babel插件，但是npm上对于babel的种类繁多，而且所引入方式也有所不同。1，本人最开始尝试的是babel-polyfill，但，并没有什么用，原因是babel-polyfill插件包中包含了core-js版本2，有提示说core-js3.3版本以下，已经不被官方所维护，所以在很多高版本的项目中，babel-polyfill已经无效；2，尝试使用"@vue/cli-plu原创 2021-07-02 14:46:34 · 841 阅读 · 2 评论 -
Vue】自定义loadmore指令实现下拉加载更多
使用自定义指令loadmore，实现下拉加载更多。首先是loadmore.js, el 为绑定的元素，通过el.scrollHeight - el.offsetHeight === el.scrollTop判断滚动条到达底部，这里引入了loadsash实现节流，以免每一次滚动到底部都加载数据（手抖或故意滚动），加入flag字段，控制首次触底后直接执行，后续的触底至少间隔一秒，不介意第一次会慢一点的可以直接在if语句内，调用fun()。// loadmore.jsconst _ = requir.转载 2021-06-30 10:00:14 · 1263 阅读 · 0 评论 -
vue 滑到底部，加载更多
html部分：<divref="biReportLayout"@scroll="scroll($event,item)"></div>js部分：// 滚动事件 scroll(ev, item) { const _this = this if (item.isPage && item.pageSize) { // 是否分页 let scrollTop ..原创 2021-06-30 09:43:26 · 346 阅读 · 0 评论 -
error Unable to authenticate, need: BASIC realm=“Sonatype Nexus Repository Manager“
今天在做vue项目,切换私服nexus,npm login时,遇到了下面的问题error Unable to authenticate, need: BASIC realm="Sonatype Nexus Repository Manager"我在网上搜索了一下,好像在登录和注册,还有发布的时候,都可能遇见这个问题.问题原因也很明确,就是权限验证 没通过.下面是我把网上的解决办法整合了一下.第一种:就是信息输入不正确.仔细比对你输入的用户,密码,邮箱是否正确（不要使用网页记住的密码登录,因为很可能已经转载 2021-06-29 09:59:16 · 1658 阅读 · 0 评论 -
npm自定义按需加载组件报错Cannot read property ‘install‘
导入后一直报错：Cannot read property 'install' of undefined[bug]不停安装和卸载后，发现：babel.config.js需加上：原创 2021-06-17 16:07:51 · 731 阅读 · 1 评论 -
npm 仓库搭建常见的问题
1、在命令行先查看npm config get registry2、修改本地或者tb镜像（搭建私服教程点这里 ）淘宝镜像npm config set registry http://registry.npm.taobao.org/或官方镜像npm config set registry https://registry.npmjs.org/或个人镜像npm config set registry http://198.216.15.203:8081/repository/npm-all/(这原创 2021-06-16 14:31:42 · 257 阅读 · 0 评论 -
搭建npm私服
前置条件搭建好nexus 3一.创建npm仓库1.创建nx-deployer 角色2.创建deployer 用户 密码也为 deploye3.分别创建npm的hosted、proxy和group分别为下面三幅图hostedproxygroup二、客户端的.npmrc配置registry=http://192.168.48.128:8081/repository/npm-all/email=deployer@skytech.comalways-aut...转载 2021-06-16 08:36:17 · 408 阅读 · 0 评论 -
npm 401 BASIC realm=“Sonatype Nexus Repository Manager“
今天在做vue项目,切换私服nexus,npm login时,遇到了下面的问题error Unable to authenticate, need: BASIC realm="Sonatype Nexus Repository Manager"我在网上搜索了一下,好像在登录和注册,还有发布的时候,都可能遇见这个问题.问题原因也很明确,就是权限验证 没通过.下面是我把网上的解决办法整合了一下.第一种:就是信息输入不正确.仔细比对你输入的用户,密码,邮箱是否正确（不要使用网页记住的密码登录,因为很可能已经转载 2021-06-15 17:51:38 · 3933 阅读 · 2 评论 -
vue cli3 通过url访问本地json文件
本人需要对已经封装好的table组件，通过json文件对数据进行模拟；第一步：将json文件放与public下：第二部：安装axios插件，进行get请求：路径如下：'/config/targetBase.json'切记：不要用public，不然像我这样找了一个小时的404.。。。。。。。...原创 2021-03-22 10:16:54 · 1045 阅读 · 1 评论 -
D3时间轴的相关记录
1，初始化时间轴比例this.zoom.scaleTo(this.svg, minScale) // 初始化到置顶倍数；minScale为倍数，如1等2，定位时间轴this.zoom.translateTo(this.svg,this.width - this.padding.left - this.padding.right,0) // 初始化定位到最后3，解决超出最大时间和最小时间的问题一定要注意translateExtent（可拖动宽度）和extent（展示视图宽度原创 2021-03-09 16:36:42 · 399 阅读 · 0 评论 -
D3获取坐标轴上的刻度数据和格式化数据
如果你有参考axis,你可以使用：axis.scale().ticks()如果你想要将它们全部格式化,我会从DOM中获取它们：d3.selectAll(".tick>text") .nodes() .map(function(t){ return t.innerHTML; })完整代码如下：<!DOCTYPE html><meta charset="utf-8"><svg width="960" height="500"></svg..原创 2021-02-24 15:30:32 · 810 阅读 · 0 评论 -
vue使用screenfull模拟F11实现全屏和退出全屏
①：下载组件jsnpm install --save screenfull②：在需要用到得页面引入和使用引入import screenfull from "screenfull";1使用：直接调用方法，会自动判断是否是全屏screenfull.toggle();1 完整代码，使用组件是Ant Design of Vue <template> <!--是否全屏--> <a-ico.转载 2021-01-15 15:24:46 · 1151 阅读 · 0 评论 -
Vue CLI3搭建组件库并实现按需引入实战操作
Vue CLI3搭建组件库并实现按需引入实战操作在Vue CLI3搭建组件库并用npm发布实战操作中介绍了单个组件的组件库怎么开发，本文将一步一步教大家怎么开发多个组件集成的组件库，怎么实现组件库按需引入。觉得有用点个赞支持一下。本文将略过安装Vue CLI3、搭建组件库的项目、清洁组件库项目的步骤，不懂的地方可以看Vue CLI3搭建组件库并用npm发布实战操作一、建立两个git仓库放本文的示例代码组件库 引用组件库demo二、组件库项目中webpack一些基础配置在Vu转载 2020-12-25 11:59:01 · 3549 阅读 · 1 评论 -
Vue CLI3搭建组件库并用npm发布实战操作
Vue CLI3搭建组件库并用npm发布实战操作在公司项目逐渐多起来的情况下，公共组件也多起来。不想每一次修改一下公共组件，都要去每个项目中修改。这时候你就该学会用Vue CLI3 搭建组件库并用npm发布了，本文以基于element组件中Select 选择器和Tree 树形控件扩展出来的树结构数据下拉选择器的组件为例子讲解。一、安装Vue CLI3首先你要卸载Vue CLI2,用命令npm uninstall vue-cli -g卸载； 输入命令npm install -g @vue/c转载 2020-12-24 17:03:26 · 1641 阅读 · 2 评论 -
使用http-server开启一个本地服务器
1 下载node.js官网地址：https://nodejs.org下载完成后在命令行输入命令$ node -v以及$ npm -v检查版本，确认是否安装成功。2 下载http-server在终端输入：$ npm install http-server -g3 开启http-server服务终端进入目标文件夹，然后在终端输入：$ http-server -c-1 （⚠️只输入http-server的话，更新了代码后，页面不会同步更新）Starting up http-s..原创 2020-12-10 09:18:53 · 550 阅读 · 0 评论 -
vue的随意拖拽插件
1，Vue-Drag-Resize安装$npmi vue-drag-resize -S预览地址：http://kirillmurashov.com/vue-drag-resize/#github地址：https://github.com/kirillmurashov/vue-drag-resize2，VueDraggableResizable安装$npmi vue-draggable-resizable -S预览地址：https://mauricius....原创 2020-11-07 10:34:36 · 3275 阅读 · 0 评论 -
Vue+Element-UI 多个form表单验证
Vue+Element-UI 多个form表单验证在开发的过程中 有时根据业务需求提交的表单内容分区分块 内容繁多 业务控制相对复杂的时候 我们应该将页面内容分成若干个组件 这样方便后期维护查找问题 不然时间长了后期维护找问题头都大了如上图所示 页面表单分为基本设置，上架设置，更多设置3大块 分别将3大块写到3个组件（A,B,C） 提交表单的时候我们要进行表单验证思...转载 2020-04-30 11:22:53 · 2807 阅读 · 0 评论