Vite2.x + Vue.js3.x + TS起步
Vite2.x + Vue.js3.x + TS起步创建项目
Requires Node.js ^14.17.0, 16.0.0 or later. 因为部分依赖在低版本node中不兼容
1234yarn create vite vite-project --template vue-tscd vite-projectyarnyarn dev
修改语法检查与格式化配置
安装依赖
Requires vue-eslint-parser 9.0.0 or later.
1yarn add eslint eslint-plugin-vue vue-eslint-parser @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb-base eslint-plugin-import vite-plugin-eslint -D
修改.eslintignore文件
1234/dist//*.js/*.zip/*.rar
修改.eslintrc.js文件
12345678910111 ...
解决Xcode真机调试不兼容高版本iOS问题
解决Xcode真机调试不兼容高版本iOS问题
从Gitee下载手机系统对应版本的兼容包;
解压下载的压缩包;
关闭Xcode;
依次进入以下文件夹: /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport/;
将解压的文件夹移动到该目录;
重新打开Xcode.
APP审核被拒,使用了私有API(Guideline 2.5.1)
APP审核被拒,使用了私有API问题现象收到邮件,提示使用了私有API
Your app uses or references the following non-public APIs:com.apple.springboard.lockcompleteThe use of non-public APIs is not permitted on the App Store because it can lead to a poor user experience should these APIs change.Continuing to use or conceal non-public APIs in future submissions of this app may result in the termination of your Apple Developer account, as well as removal of all associated apps from the App Store.
解决方法如果不确定是哪个第三方使用了私有API,那就先搜索下
12c ...
解决macOS升级导致git命令报错
解决macOS升级导致git命令报错问题复现今天心血来潮想要尝试一下Monterey的实况文本,所以对Mac电脑进行系统升级,在等待了1个多小时后,终于升级到新版本,打开图片一顿操作,发现对中文的支持还是有点不尽人意. 算了,好好写代码吧,接着打开自己的VSCode准备突突突写代码，然而现实给我当头棒喝,git直接用不了QAQ
1xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
解决办法重新安装xcode-select
1xcode-select --install
如果重新安装完还不行的话,执行以下命令重置下:
1sudo xcode-select --reset
用CSS切换横竖屏显示
用CSS切换横竖屏显示今天接到个需求,页面中的部分元素需要放大到全屏显示,并且是横屏方向显示,类似于支付宝中股票K线图的样式.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> body{ margin: 0; } .wrapper { width: 100%; height: ...
监控浏览器打开开发者工具事件
监控浏览器打开开发者工具事件在某些情况下我们需要检测当前用户是否打开了浏览器开发者工具，比如前端爬虫检测，如果检测到用户打开了控制台就认为是潜在的爬虫用户，再通过其它策略对其进行处理。
12345678910111213141516171819202122232425<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div>test</div> <script> const element = new Error('test' ...
使用 verdaccio 搭建私有npm镜像(续)
使用 verdaccio 搭建私有npm镜像(续)背景
私有包,统一管理,方便开发和使用,自然也可以使用npm的付费服务,可惜贫穷限制了消费能力
安全性,内部开发的模块和一些内容并不希望其他无关人员能够看到,但是又希望内部能方便使用
加速,自己搭建npm 服务器,本身可以自带常用package的缓存, cnpm 有一些包存在路径问题,而npm 的速度有些感人,自建的服务器会缓存下载过的包,能节省时间
部署流程基础安装可以查看上一篇文章使用 verdaccio 搭建私有npm镜像
配置nginx反向代理直接运行 verdaccio, 控制台会有提示配置文件的路径,修改一下配置文件vim xxx/config.yaml
123listen: 0.0.0.0:4873# 在文件末尾增加以下配置url_prefix: /verdaccio/
修改nginx配置文件 vim xxx/verdaccio.com.conf
123456789101112131415server{ listen 80; server_name v.com; location ~ ^/v ...
Canvas拖尾效果的实现
Canvas拖尾效果的实现背景经常看到canvas的一些拖尾效果(如彗星，烟花等),看了下别人的demo发现原来实现很简单.
在我的想象中，实现这种效果是一定需要一个数组的，用来储存彗星的尾巴的位置，透明度，生命时长等信息。然后遍历这个数组，将这个尾巴画在canvas上。然而，万万没想到，真正的实现却简单的不像实力派，不需要数组.这里的技巧在于，在重绘制下一帧前，不是调用clearRect清除掉上一帧的内容，而是在上一帧基础上加上一个半透明蒙层，然后继续画下一帧。画的帧数多了，也就有了拖尾效果，拖尾效果的长短，跟蒙层的透明度有关，透明度越小，拖尾越长。
项目实战
修改前伪代码:
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455init() { this.canvas = document.getElementById('canvas'); this.ctx = this.canvas.getConte ...
使用 verdaccio 搭建私有npm镜像
使用 verdaccio 搭建私有npm镜像背景
私有包,统一管理,方便开发和使用,自然也可以使用npm的付费服务,可惜贫穷限制了消费能力
安全性,内部开发的模块和一些内容并不希望其他无关人员能够看到,但是又希望内部能方便使用
加速,自己搭建npm 服务器,本身可以自带常用package的缓存, cnpm 有一些包存在路径问题,而npm 的速度有些感人,自建的服务器会缓存下载过的包,能节省时间
部署流程安装相关包123npm i -g verdaccionpm i -g pm2npm i -g nrm
配置 verdaccio直接运行 verdaccio, 控制台会有提示配置文件的路径,修改一下配置文件vim xxx/config.yaml
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071# path to a directory with all packagess ...
Vue Cli 搭建PWA项目
Vue Cli 搭建PWA项目背景Native app或者Hybird APP缺点:
软件上线需要审核
版本更新需要将新版本上传到不同的应用商店
传统web网页缺点:
手机桌面入口不够便捷，想要进入一个页面必须要记住它的url或者加入书签
没网络就没响应，不具备离线能力
不像APP一样能进行消息推送
PWA技术优点
可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能
实现了消息推送
项目实战初始化项目并安装必要依赖1234567vue create pwa-democd pwa-demovue add routervue add storevue add pwanpm i axiosvue add style-resources-loader vue-cli-plugin-style-resources-loader
PWA相关配置
修改public/index.html文件
123456<!-- 在head标签里面增加以下配置 --><link rel="apple-t ...