- 博客(45)
- 收藏
- 关注
RSS订阅原创 Vite更新依赖缓存失败，强制更新依赖缓存
使用vite+ts开发一段时间了，感觉并不是想象中的好用，特别是出现些稀奇古怪的问题不好解决，比如下面这个问题事情的原因是：项目是有个需求是需要拾色器功能(用的vue3-colorpicker)，但是这个拾色器打包编译的时候总会出现些问题，想把它替换掉，于是执行yarn remove vue3-colorpicker将其node-modules移除并更新了package.json，下图可作证。也有代码为例，已经删除了。
2023-08-16 11:18:24
4697
1
原创 vite+vue3搭建的工程如何批量导入store的module
问题的关键是如何引入模块内的文件， const modules = import.meta.glob('./dir/*.js', { eager: true })，一开始没加第二个参数，一直都是动态加载，创建完了store模块才被附上值，然后改为这样的写法。匹配到的文件默认是懒加载的，通过动态导入实现，并会在构建时分离为独立的 chunk。但是globEager的写法已经废弃，强迫症发作一定要改，如下图。src\store文件夹下index.ts。
2023-02-14 17:13:21
1291
原创 vite+vue3搭建的工程热更新失效问题
按理说，我们无需要关心这些额外的配置，但是现在确实影响到了我们的开发体验，官网上也没明确描述，仔细想想是什么原因导致了无法热更新的问题，因为刚搭建完工程开发的时候确实是可以热更新的，仔细想了想发现好像是添加完路由出现这个问题的，猜想如果没有路由是不是可以热更新呢，于是在App.vue中修改代码发现确实可以及时热更新，现在可以基本上可以确定是路由问题的啦，各位可以自己试下。）,但是过了一段时间后，不过怎么操作页面修改页面都无法及时刷新预览页面，各种纠结。至此，我的问题解决，下面来看其他导致没有热更新的问题。
2023-02-14 15:47:41
8569
2
原创 Vue 跨工程的路由整合
最近在开发过程中，有个需求是在自己开发的应用中（以后简称：主应用）挂载第三方的页面应用（以后简称三方应用），大多数情况下，自己工程引入第三方工程页面用的是iframe嵌套，简单快捷，但是上下文处理、事件交互等方面并不是特别方便，于是就尝试另外的解决方案，当我看到vue的路由守卫，就知道问题该如何解决，大致思路如下：利用路由独享的守卫beforeEnter，在跳转到第三方相关页面前，必定经过beforeEnter路由函数，然后我们在这个路由函数写我们逻辑，区别这个url是我们需要的第三方ur...
2022-04-22 10:56:24
1584
原创 vue-router引入组件的几种方式及打包区别
本文使用@vue/cli 5.0.1创建的vue2工程做的验证，预置数据package.json详见最后，其中后三种方式vue路由懒加载的方式。之前有个操作window全局函数的时候，使用直接引入的方式，结果并没有执行，原因是这种方式会把所有引入的组件打包成一个js,而这个组件又异步引入了很多其它组件及服务，导致window函数的顺序调整导致了没有执行，改成异步加载的方式之后，window函数又能正确的执行啦。方式一：普通直接引用的方式import DemoIndex from '../vie
2022-03-16 17:53:50
3921
1
原创 vue工程屏蔽打包legacy文件
我们在进行vue工程(@vue/cli 5.0.1搭建的工程)打包的时候，总是会生成类似539-legacy.48fd84f6.js这种类型文件，这其实兼容低版本浏览器而生成的文件，如果我们的前端工程只在google等现代浏览器版本上跑，打包的时候可以屏蔽build-legacy文件，方式也很简单找到.browserslistrc。后面添加一句话即可not ie <= 11...
2022-03-16 15:03:30
3088
原创 跳出或者中断forEach循环？
1、利用try catchtry { const arr = [1, 2, 3, 4]; arr.forEach(function (item, index) { // 跳出条件 if (item === 3) { throw new Error("verynice"); } // do something console.log(item); });} catch (e)
2022-01-26 10:16:09
1623
原创 ResizeObserver监听浏览器宽高及元素宽高变化
ResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement的边界框改变。内容区域则需要减去内边距padding。（有关内容区域、内边距资料见盒子模型 ）ResizeObserver避免了在自身回调中调整大小，从而触发的无限回调和循环依赖。它仅通过在后续帧中处理DOM中更深层次的元素来实现这一点。如果（浏览器）遵循规范，只会在绘制前或布局后触发调用。Experimental:这是一个实验中的功能此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览.
2021-12-29 17:25:58
1398
原创 angular2 通过 ControlValueAccessor NG_VALUE_ACCESSOR实现自定义表单控件
一、如何实现cform.component.ts(自定义表单控件的实现)import { Component, OnInit, Input, forwardRef } from '@angular/core';import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';@Component({ selector: 'app-cform', template: '{{info}}', styleU
2021-10-27 16:02:53
647
原创 idea的pom.xml报cannot reconnect错误，无法下载正确的jar
鼠标移动到project上会报如下错误并且reload all maven projects同步的是报could not transfer artifact ^xxx从这个现象看我目前的这个${env.project.version}是有问题。可以打开help->show log in explorer，查看具体错误如果还无法精确定位问题，可以尝试进行package打包，下载依赖的版本，从控制台中查看哪个jar的版本号存在问题。这不是个正确可以识别的版本号，询...
2021-09-08 19:04:32
6154
原创 前端项目gitlab自动化部署CICD实战(windows版)
本篇文章是关于gitlab自动化部署实战的，所以不涉及理论讲解，如果很多特性及原理性的东西请参照官网（Get started with GitLab CI/CD）；
2021-05-29 17:09:01
5064
3
原创 类型“Window & typeof globalThis”上不存在属性“gspZc”
在做vue+typescript开发过程，给window对象添加属性并赋值，却发现报错，如类型“Window & typeof globalThis”上不存在属性“gspZc”。原则上，TypeScript 需要开发者做到先声明后使用。这就导致开发者在调用很多原生接口（浏览器、Node.js）或者第三方模块的时候，因为某些全局变量或者对象的方法并没有声明过，导致编译器的类型检查失败。通常情况下，我们给window对象赋值，只需求window.propoerty = 'xxx'，但是在此处编译
2021-05-19 14:32:08
21775
原创 angular2+ 使用fullcalendar
npm install 安装切换fullcalendar版本的时候，注意删除package-lock.json一、angular使用fullcalendar 4.3.0版本用法：1、npm install安装相关包，package.json包的版本 "@fullcalendar/angular": "^4.3.1", "@fullcalendar/core": "^4.3.0", "@fullcalendar/daygrid": "^4.3.0", "@fullc
2021-02-05 11:36:08
857
原创 vue 如何关闭 eslint 检查
在实际开发过程中，eslint的作用不可估量，诸如：1.审查代码是否符合编码规范和统一的代码风格；2.审查代码是否存在语法错误；But，对于初学者来说，这个功能极其不友好，各种问题层出不穷，让很多初学者头疼不已，我们有没有办法关掉它，等适当时机在启用它呢，答案是肯定的。不同vue cli版本创建工程的时候，稍微有些差别，要仔细甄别，我的vue cli v4.5.9方案一: vue脚手架创建工程的时候，不要选择Linter / Formatter选项，（那如何选择启用，请参照方案二）
2021-01-19 15:27:52
22264
原创 vue 增删改查初体验
公司最近要使用vue框架开发移动端应用，自己也积极响应公司安排，自己边学边练，制作了一个vue-curd的demo，在此记录下学习内容，希望对你也有所帮助。例子是一个费用报销单报销增删改查，内容有些不是很全，有时间慢慢补充。demo的地址：https://github.com/git407949480/vue-fybxd-mock-curd一、vue脚手架1、全局安装vue-clinpmi-gvue-cli2、vue脚手架搭建vue工程vue脚手架官网vuecre...
2020-12-24 19:26:47
466
1
原创 vue2.0+ axios如何读取本地json文件的数据
1、用vue-cli搭建起一个hello-world的工程，不做任何修改。2、引入Axios。在入口文件main.ts中引入Axiosimport Axios from 'axios'import VueAxios from 'vue-axios'……Vue.use(VueAxios, Axios);……3、在public文件夹中添加data.json文件可能很多同学问题都出在这里，从网上搜索发现很多人说json文件应该放在assets目录或static目录下，其实这些都是
2020-12-15 19:34:31
8175
2
原创 Cannot find module ‘fork-ts-checker-webpack-plugin-v5‘
用vue-clie脚手架搭建完vue3工程，执行npm run serve，会报一下错误。Error: Cannot find module 'fork-ts-checker-webpack-plugin-v5' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15) at Function.Module._load (internal/modules/cjs/loader.js:507:25)...
2020-12-14 18:49:36
6139
1
原创 vue.js生命周期的理解
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。(初始化、更新、销毁)每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。首先先看看官网的图，详细的给出了vue的生命周期:...
2018-12-03 15:06:43
228
转载 vue.js其原理
本文系转载相信大家对mvvm双向绑定应该都不陌生了，一言不合上代码，下面先看一个本文最终实现的效果吧，和vue一样的语法，如果还不了解双向绑定，猛戳Google<div id="mvvm-app"> <input type="text" v-model="word"> <p>{{word}}</p> &a
2018-11-28 09:54:46
265
原创 vuex
个人见解，如有问题，欢迎指正。1、一句话描述vuex：对‘vue应用’多个组件的共享状态进行集中式管理的一个vue插件。2、vuex主要用来解决：多个视图（不同组件）依赖同一状态，对来自不同视图的行为需要变更同一状态，也可以理解为组件通信用。比如说一个列表页，头部有个搜索（组件），中间是列表数据（组件），下面是增删改按钮（组件），三个组件都需要对列表数据进行操作，就可以用vuex解...
2018-11-13 14:59:03
199
原创 js常用内置函数
js常用内置函数常用功能汇总mapmap() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。语法：var new_array = arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[,thisArg])...
2018-11-08 10:41:01
538
原创 vue路由的使用
如果使用vue-cli脚手架工具的话，默认会给你安装路由的提示选项，根据自己需要选择安装与否，这里仅仅是了解其原理。1、首先是安装vue-router插件cnpm（npm） install --save vue-router2、然后新建在src目录下新建一个router文件夹，然后新建一个index.js的文件，紧接着自定义路由组件，许多描述在注释中import Vue fro...
2018-11-07 13:42:06
178
原创 vue组件之间的通信
边学习边用，可能会存在疏漏，后续会补充1、通过 Prop 向子组件传递数据*（由多层嵌套，可以一层一层地往下传递）Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。父组件的代码Add.vue组件使用 父组件：addComment特性的List.vue组件使用 父组件的特性2、vue自定义事件（...
2018-11-05 11:35:22
177
原创 Vue相关插件
自己学习用，项目中可能用到vue-cli:vue脚手架vue-resource(axios官方推荐)：ajax请求，但是目前来说axios用的更多vue-router:路由管理vuex:状态管理vue-lazyload:图片懒加载vue-scroller:页面滑动管理mint-ui:移动端UI组件库（vue） https://mint-ui.github.io/#!/z...
2018-10-30 09:37:36
141
原创 微信小程序开发过程中遇见的问题
1、改变传统前端开发思想，而是MVVM思想，双向数据绑定很重要，不再是操作dom。2、怎样在小程序页面中打出空格（&nbsp;）或者换行(<br/>)等需要在<text decode="{{true}}">哈&nbsp;哈</text>中，否则不起作用3、一般setData方法多用于点击后改变页面信息或者刷新后与后台交互获取最新的信息。直...
2018-09-21 11:02:58
1441
转载 使用meta标签指定内核渲染网页
1、使用meta标签指定360双核浏览器、QQ浏览器等以指定内核渲染网页content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核。若页面需默认用极速核，增加标签：<meta name="renderer" content="webkit"> 若页面需默认用ie兼容内核，增加标签：<meta nam...
2018-04-24 11:41:05
1839
转载 npm常用命令及参数详解
npm install 安装模块npm install (with no args, in package dir)npm install [<@scope>/]<name>npm install [<@scope>/]<name>@<tag>npm install [<@scope>/]<name>@&am
2018-04-18 14:41:11
7272
原创 移动端web
在PC端曾经为了兼容IE低版本浏览器而头痛不已，以为到移动端可以跟这些麻烦说拜拜,但是理想很丰满现实很骨感，自己接手做了一个移动端web的小项目之后，就发现我too young too simple,虽然现在那个项目已经上线，但是实现的方案着实让人着急，所以经过一番研究，把移动端适配相关方案分享给大家，当然很多参考，如有问题请指正。在进入正文之前最好先了解：物理像素、逻辑像素、DPR和Rem
2018-01-17 13:09:39
237
转载 理解RESTful架构
越来越多的人开始意识到，网站即软件，而且是一种新型的软件。这种"互联网软件"采用客户端/服务器模式，建立在分布式体系上，通过互联网通信，具有高延时（high latency）、高并发等特点。网站开发，完全可以采用软件开发的模式。但是传统上，软件和网络是两个不同的领域，很少有交集；软件开发主要针对单机环境，网络则主要研究系统之间的通信。互联网的兴起，使得这两个领域开始融合，现在我们必须考虑，...
2017-12-29 10:22:39
151
原创 前端性能优化二：使用雪碧图
雪碧图(CSS sprite),是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，减少对服务器的请求数量，从而加快页面加载速度，这也是CSS Sprites最大的优点。还是以淘宝为例，看看它是怎么实现的，看下图，第一个图是css如何实现的，第二个是图片（被定位的大图）css sprite优点多多，但
2017-12-19 09:44:07
1031
原创 前端性能优化一：合并css\javascript
作为前端工程师的我们都知道阿里在前端技术方面是佼佼者，所以我有空没空会经常逛淘宝，不是为购物，实则是为了查看淘宝是否推出了什么新技术，前几天按F12查看淘宝源码的时候，发现了一个奇怪的问题，一个link引用多个CSS文件或者一个JS的SRC引用了多个JS文件，中间用逗号隔开（如下图），作为菜鸟的我甚是好奇。这个叫静态资源打包，因为浏览器下载静态文件的时候是有线程数限制的：同一时间针对同一域名下
2017-12-12 14:47:12
2455
转载 在PHP中怎么接收post过来的JSON数据（可以是接口推送过来的数据）
要在PHP中整体接收POST数据，有两种方法。注意，要使用以下两种方法，Content-Type不能为multipart/form-data。方法一：使用：1file_get_contents('php://input')其中，php://input是一个流，可以读取没有处理过的POST数据（即原始
2017-11-08 17:07:19
2276
转载 事件冒泡，事件捕获，事件
事件冒泡和捕获是描述事件触发时序问题的术语。事件捕获指的是从window对象到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。绑定事件方法addEventListener的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。 IE提出的是冒泡流，而网景提出的是捕获流，后来在W3C组
2017-11-02 10:52:09
275
转载 浏览器加载javascript的工作原理
浏览器加载JavaScript脚本，主要通过标签完成。正常的网页加载流程是这样的。浏览器一边下载HTML网页，一边开始解析解析过程中，发现标签暂停解析，网页渲染的控制权转交给JavaScript引擎如果标签引用了外部脚本，就下载该脚本，否则就直接执行执行完毕，控制权交还渲染引擎，恢复往下解析HTML网页加载外部脚本时，浏览器会暂停页面渲染，等待脚本下载并
2017-11-01 16:19:24
1086
转载 sublime常用快捷键
自己觉得比较实用的sublime快捷键：Ctrl + / ---------------------注释Ctrl + 滚动 --------------字体变大/缩小Ctrl + N-------------------新建软件右下角可以选择文档语法模式Ctrl + Shift + P ------------------命令模式命令：sshtml模糊匹配-----语法
2017-10-10 09:43:32
294
原创 windows下gem install报certificate verify failed错误解决办法或者添加淘宝源镜像失败
因为其他国家一些大家都懂的原因，导致gem源间歇性中断因此我们需要更换gem源。sass中文网更换gem源的步骤如下：//1.删除原gem源gem sources --remove https://rubygems.org///2.添加国内淘宝源gem sources -a https://ruby.taobao.org///3.打印是否替换成功gem sour
2017-08-02 14:16:31
1912
转载 js的touch事件
touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间，调用preventDefault()可阻止滚动。touchend:当手指从屏幕上移开时触发。touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件，文档中没有明确说明。以上事件的event对象上面都存在如
2017-08-01 17:22:53
284
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人