- 博客(55)
- 收藏
- 关注
RSS订阅原创 云南旅游攻略
大水车（丽江标志性地标）→大研花🌸巷（各式各样的花🌸，这个季节是三角梅比较壮观）→四方街（城中心）→五1️⃣街(美食步行街)→现文街（美轮美奂的油纸伞🌂）→振兴线（挂满灯笼🎐）→木府（懂得都懂）→狮子山（可以登高远眺丽江全景）→酒吧1️⃣条街。牦牛坪中索道（40元）和云杉坪小索道（40元）也是可选的，但冰川公园大索道是三个索道中最值得体验的一个。2、乘坐泸沽湖旅游专线车，19座左右车型，往返票价140元，途经大落水村，最后停泊在里格村，每天早上07：40到古城大水车接人，或者08：30在古城停车场发车。
2024-04-24 23:02:39
636
原创 vite+vue3+ts+eslint+prettier+husky+lint-stated 项目搭建
vite+vue3+ts+eslint+prettier+husky+lint-stated 项目搭建
2023-06-06 20:51:42
845
原创 node 脚本调试
只需要找到webpack的执行入口，然后执行以下命令，只要是node脚本都可以进行调试。执行以上命令，然后打开浏览器的控制台会发现有个node的logo。点击这个图标就可以开始调试代码。
2023-05-11 21:57:48
332
原创 Mac 终端自定义命令行
查看shellecho $0如果你的 shell 是zsh，则配置文件为.zshrc，如果是-bash 则为.bashrc添加自定义的命令通过“访达”->"前往文件夹"输入“~/”, 进入当前用户的根目录，找到上面的配置文件例如：打开.bashrc，通过alias 别名关键字添加自定义的命令alias run="npm run"alias dev="npm run dev"alias rtest="npm run release:test"alias ruat="npm run r
2022-05-05 16:51:48
1617
1
原创 项目规范之stylelint
Stylelint一个强大的现代 linter，可帮助您避免错误并在您的样式中强制执行约定。Linting CSS files安装Stylelint的标准配置npm install --save-dev stylelint stylelint-config-standard在项目的根目录下创建一个配置文件 .stylelintrc.json ，并添加以下内容// .stylelintrc.json{ "extends": "stylelint-config-standard"
2022-05-02 11:41:32
935
原创 项目规范之husky && lint-stated
HuskyYou can use it to lint your commit messages, run tests, lint code, etc… when you commit or push. Husky supports all Git hooks当您提交或推送时，您可以使用它来检查您的提交消息、运行测试、检查代码等。Husky 支持所有 Git 钩子了解详情FeaturesZero dependencies and lightweight (6 kB)Powered by m
2022-04-29 22:47:50
890
原创 项目规范之eslint & prettier 【create-react-app-typescript】
创建typescript项目npx create-react-app my-app --template typescriptvscode 设置首选项–设置–settings.json，添加以下配置 "editor.defaultFormatter": "esbenp.prettier-vscode", // 默认的格式化插件prettier "editor.formatOnType": true, // 输完一行后自动格式化 "editor.formatOnSave": true, // 保
2022-04-29 11:39:46
303
原创 二进制文件兼容下载
业务需求文件下载需要权限验证，不能单纯的通过a标签进行下载解决思路Blob表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。 借助URL.createObjectURL(blob) 生成blob 的地址，它的格式如下：blob:http://xxx,创建a标签，给a便签href属性赋上该blob地址实现下载。Blob对象 - MDNURL.createObjectURL: 生成blob地址用于下载Fi
2022-04-29 11:21:45
248
转载 Web 安全之内容安全策略详解（Content-Security-Policy,CSP）
1.CSP 简介内容安全策略（Content Security Policy，简称CSP）是一种以可信白名单作机制，来限制网站是否可以包含某些来源内容，缓解广泛的内容注入漏洞，比如 XSS。 简单来说，就是我们能够规定，我们的网站只接受我们指定的请求资源。默认配置下不允许执行内联代码（2.CSP 使用方式CSP可以由两种方式指定： HTTP Header 和 HTML。通过定义在HTTP header 中使用："Content-Security-Policy:" 策略集通过定义在 HTML me
2022-04-27 11:38:35
16527
3
原创 TypeScript 学习笔记
简介对象类型别名使用type 或者 interface// types/use.tstype Person = { name: string, age: number}interface Person1 { name: string, age: number}拓展type 拓展-&操作符拓展// types/use.ts 类型别名定义type Person = { name: string}type Person2 = Person & {
2022-04-05 11:47:21
920
原创 React 函数式组件useRef
useImperativeHandleuseImperativeHandle(ref, createHandle, [deps])useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef 一起使用。import React, { forwardRef, useRef, useImperativeHandle } from 'react';
2022-03-28 18:29:02
1660
转载 CSS 变量教程
CSS 变量（CSS variable）又叫做"CSS 自定义属性"（CSS custom properties），可以通过JS动态改变。一、变量的声明变量名前面要加两根连词线–，变量名大小写敏感。:root { --main-color: #4d4e53; --main-bg: rgb(255, 255, 255); --logo-border-color: rebeccapurple; --header-height: 68px; --content-padding: 10px
2022-03-28 10:42:05
14241
原创 Webpack Tree Shaking
Tree Shakingtree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性，例如 import 和 export。这个术语和概念实际上是由 ES2015 模块打包工具 rollup 普及起来的。webpack 2 正式版本内置支持 ES2015 模块（也叫做 harmony modules）和未使用模块检测能力。新的 webpack 4 正式版本扩展了此检测能力，通过 package
2022-03-20 15:31:08
1276
原创 Webpack优化
抽离公共代码如果多个页面引入了一些公共模块，那么可以把这些公共的模块抽离出来，单独打包。公共代码只需要下载一次就缓存起来了，避免了重复下载。//webpack.config.jsmodule.exports = { optimization: { splitChunks: {//分割代码块 cacheGroups: { vendor: { //第三方依赖
2022-03-07 16:24:36
511
原创 Video 全屏播放、禁止拖动进度条、禁止下载
全屏播放ios：默认全屏播放模式，不做处理；安卓：默认小屏播放模式，特殊处理，以下是实现代码；/*** @description 安卓全屏播放模式* @video DOM节点 */function fullscreen(video){ if (video.requestFullscreen) { video.requestFullscreen() } else if (video.msRequestFullscreen) { video.msReques
2022-03-03 22:10:22
6979
1
原创 深入理解JS单线程
前言Event Loop即事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。为啥要弄懂 Event Loop是要增加自己技术的深度，也就是懂得JavaScript的运行机制。现在在前端领域各种技术层出不穷，掌握底层原理，可以让自己以不变，应万变。应对各大互联网公司的面试，懂其原理，题目任其发挥。Event Loop 是什么event loop 是一个执行模型，在不同的地方有不同的实现。浏览器和 Node.js 基于不同的技
2021-11-24 21:35:30
289
原创 npm 、yarn、pnpm、nvm 、nrm、 npx介绍
nvm——node versions managernode版本管理工具，为了解决node各种版本存在不兼容现象npm——node package managerNode.js 的包管理工具nrm ——node registry manager管理 npm中镜像地址npx主要是用来调用项目内部安装的模块...
2021-09-28 10:00:39
786
原创 AST抽象语法树
为什么要了解AST如果你想了解 js 编译执行的原理，那么你就得了解 AST，目前前端常用的一些插件或者工具，比如说javascript转译、代码压缩、css预处理器、elint、pretiier等功能的实现，都是建立在 AST 的基础之上。JavaScript 编译执行流程js执行的第一步是读取 js 文件中的字符流，然后通过词法分析生成token，之后再通过语法分析生成 AST（Abstract Syntax Tree），最后生成机器码执行。词法分析词法分析，也称之为扫描（scanner），简
2021-08-09 22:28:56
10402
转载 代码加密混淆插件webpack-obfuscator
背景公司代码提供给第三方使用，为了不完全泄露源码，需要对给出的代码进行加密混淆，前端代码虽然无法做到完全加密混淆，但是通过使用 webpack-obfuscator 通过增加随机废代码段、字符编码转义等方法可以使构建代码完全混淆，达到无法恢复源码甚至无法阅读的目的。安装npm install --save-dev webpack-obfuscator配置// webpack.config.jsconst JavaScriptObfuscator = require('webpack-obfus
2021-07-14 12:00:56
13247
5
原创 Vue自定义指令
需求：根据账号的权限控制页面的操作按钮的方案：选择vue 的自定义指令，将权限控制逻辑进行封装1.自定义指令的封装// 路径：src/directive/permission/permission.jsimport { getMenus } from '@/utils/permission'import { getAllMenusCodes } from '@/utils/permission'function checkPermission(el, binding) { const {
2021-05-11 14:31:35
209
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人