随笔分类 - 前端技术栈
摘要：什么是AppleScript AppleScript是苹果公司开发的一种脚本语言，用于操作MacOS及其应用程序，在实现MacOS自动化工作方面非常给力。 我们可以使用AppleScript用来完成一些重复琐碎的工作，AppleScript具有简单自然的语法，另外系统也提供了语法查询字典，可以很方便
阅读全文
摘要：linux系统以8进制表示文件权限 如755 第一位7，定义拥有者的权限 第二位5，定义所属组的权限 第三位5，定义其他人的权限 三位数都是8进制，8进制转成2进制之后的三位数分别表示读、写、执行的权限 比如： 八进制7，二进制是111，代表rwx权限都有, 即可以读、写、执行该文件 八进制5，二进
阅读全文
摘要：打开 chrome://flags/ 搜drak mode 选择Enabled with selective EveryThing，然后点relaunch, 会自动重载浏览器，但是不用担心，标签页会保留(Mac Chrome) 最好搭配一个暗黑色Chrome 主题一起使用。 选择Chrome主题皮肤
阅读全文
摘要：安装依赖 package.json "devDependencies": { "@babel/core": "^7.18.2", "@babel/preset-env": "^7.18.2", "babel-jest": "^28.1.0", "jest": "^28.1.0" } 配置babel
阅读全文
摘要：测试Promise 注意需要return让Jest意识到是异步case, 通过then和catch，在回调中拿到对应的result再去进行测试 describe('Test runTask', () => { test('Invalid domains length', () => { return
阅读全文
摘要：Vite环境变量 通过import.meta.env区分 npm run dev main.js console.log(import.meta.env); /** BASE_URL: "/" DEV: true MODE: "development" PROD: false SSR: false
阅读全文
摘要：url json raw worker / worker line webassembly ... url import testUrl from './test?url' console.log(testUrl,'~~~'); // /src/test.ts ~~~ json import {ve
阅读全文
摘要：vite并不会校验ts是否通过，需要添加typescript 安装ts yarn add typescript 校验ts "scripts": { "dev": "tsc --noEmit && vite", }, 配置ts tsconfig.json { "compilerOptions": {
阅读全文
摘要：支持css3 variables src/styles/index.css /* css3 variable */ :root{ --main-font-color: blue } #app{ font-size: 20px; color: var(--main-font-color); } mai
阅读全文
摘要：npm init @vitejs/app // 选react yarn npm run dev
阅读全文
摘要：脚手架初始化项目，安装依赖 npm init @vitejs/app // 选vanilla { "devDependencies": { "vite": "^2.9.9", "vite-plugin-vue2": "1.6.2" }, "dependencies": { "vue": "2.6.1
阅读全文
摘要：Vite1.0 为vue3而生 Vite2.0 跨框架，流行版本，内部不包含框架相关内容，通过插件提供不同开发框架的功能 vite中index.html 是必须的，html里引入入口文件的js script之后，vite的server就对其进行解析 脚手架初始化项目，安装依赖 npm init @v
阅读全文
摘要：安装vite依赖 npm i vite -D vite.config.js import reactRefresh from '@vitejs/plugin-react-refresh' export default { plugins:[reactRefresh()] } 在index.html中
阅读全文
摘要：什么是Vite Vite是尤随Vue3正式版一并发布的工具，起初是和Vue绑定的，后续发展成了框架无关的一个工具 Vite其实是构建工具的高阶封装，内部是其他的构建工具，最多的是rollup,rollup一般用于个人项目的三方库 Vite的目标 使用简单(底层是rollup,兼容rollup插件，较
阅读全文
摘要：语法 <Link href="/first-page"> <a>查看first-page</a> </Link> 优点 页面不会刷新，用Ajax请求新页面内容 不会请求重复的HTML、CSS、js内容 自动在页面插入新内容、删除旧内容 因为节省了很多请求和解析过程，所以速度很快 借鉴了Turboli
阅读全文
摘要：Next.js的团队背景 开发团队是zeit, 后改名为vercel 核心团队成员平均年龄20岁 拥有star数，zeit是Github组织的前20 全员远程工作 官网 https://www.nextjs.cn 关于 Nextjs Nodejs全栈框架 css-in-js 页面预渲染+ssr 前后
阅读全文
摘要：h5离线缓存 离线缓存： 用户没有联网时，可以正常访问网站站点和应用 用户联网时，更新用户机器上的缓存文件 原理 通过一个.appcache文件的缓存机制(不是存储技术), 通过这个文件上的解析清单解析清单离线存储资源 这些资源会像cookie一样存储下来，当网络处于离线状态下时，通过离线缓存的数据
阅读全文
摘要：beforeunload 事件触发于 window、document 和它们的资源即将卸载时。 当事件属性 returnValue 被赋值为非空字符串时，会弹出一个对话框，让用户确认是否离开页面（示例如下）。否则，事件被静默处理。一些浏览器实现仅在框架或内置框架接收到用户手势或交互时才显示对话框。
阅读全文
摘要：const getTag = (roots, map = {}) => { if (!roots?.length) return [] Array.from(roots).forEach(node => { map[node.tagName] = ''; getTag(node.children,
阅读全文
浙公网安备 33010602011771号