醒途

提供良好的路由管理机制，支持页面导航、嵌套路由和路由守卫等功能，以实现灵活的页面跳转和权限控制。：支持持续集成和持续部署的流程，自动化构建、测试和部署的环节，提高开发团队的效率和应用的交付速度。：提供性能优化的建议和工具，包括代码分割、懒加载、缓存策略等，以提升应用的加载速度和响应性能。：支持多语言和多地区的应用展示，提供国际化和本地化的解决方案，以满足全球化的需求。：集成单元测试、集成测试和端到端测试的工具和框架，以确保应用的稳定性和质量。

这是由于我使用的 taro 3.0 ，但是 taro-ui 还是 2.3.4升级 taro-ui 到 3.0 版本就好了npm install taro-ui@3yarn add taro-ui@3

以为要 modal + image 自己做，发现不行又以为要用别的插件，发现 Taro 自带了Taro.previewImage({ current: 'https://jdc.jd.com/img/400x400', // 当前显示图片的http链接 urls: ['https://jdc.jd.com/img/400x400'] // 需要预览的图片http链接列表 })...

Element 的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见widgetItem.scrollIntoView({ block: 'center', // Y 轴中间位置 behavior: 'smooth', // inline: 'center' })

exports 字段 (https://webpack.js.org/guides/package-exports/)exports 字段声明了一个对应关系，用 import "package" 和 import "package/sub/path" 会返回不同的模块。这替换了默认返回 main 字段文件的行为。当指定了 exports 字段时，只有声明了那些模块是可用的，其他的模块会抛出 ModuleNotFound Error。{ "exports": { ".": "./main.

上篇 我们唠了唠 Nextjs 怎么接入自定义 Koa，也唠了下自定义的 Koa Server 都做了什么​今天就顺势补个上篇提到的坑：Nextjs Config 配置初始化​以下正文​Config 配置的介绍和必要性通常我会简单叙述下为什么要做这件事情​起码让之前没做过这件事情的伙伴了解和理解这样做的原由​也会从实际场景出发多叨叨几句，诸君见谅​配置文件配置文件在实际工程项目里一般存在两种：不会暴露的隐藏配置文件，记录如数据库账号密码、JWT密钥、非对称加密私钥等敏感类配置

上篇 我们唠了唠 Nextjs 项目的目录结构，谈了谈我经历的几次目录结构调整​今天再填个坑：Nextjs 自定义服务端框架的法子​​使用了 Nextjs 为什么还需要自定义服务端框架​Nextjs 作为客户/服务双端通吃的框架，为什么还需要自定义服务端框架呢?​一方面是 Nextjs 大包大揽，包掉了许多功能，导致丧失了一定的灵活性​另一方面则是由于一些项目是从原有的 “React + 模板引擎 + 某服务端框架” 集合而成的自研架构​但又想要无缝迁移使用 Nextjs，这个时候

上篇 我们唠了唠 Nextjs 项目如何使用 TypeScript、如何引入 Antd​还做了些预告，虽然咳咳…直接断更了 12 天​不过中间是去 la 了个双眼皮儿，休养带恢复了好些天，今儿就麻溜儿回来了​誓不烂尾​嗯~ o(￣▽￣)o–今儿也不多更，保持每篇能聚焦一两个点就可​今天讲述下我从零到现在搭起来的 Nextjs 个人项目调整了三次的项目目录结构嗯，以下正文项目目录结构初始目录​我在刚刚创建项目时，使用的是默认目录结构​手动罗列一下，大致如下：调整一​

第一种方式（推荐）nodemon 指定版本 2.0.7npm un nodemon && npm i nodemon@2.0.7第二种方式结合 babel-nodenpm i @babel/core @babel/cli @babel/preset-env @babel/node -Dpackage.json"script": { "serve": "nodemon --exec babel-node server.js"}...

诸君，好久不见。入职了新的公司，虽然找回了轻松愉快的生活状态（1075），但也逃不过头秃的窘境。由于在新环境里的技术栈：Koa + React SSR，所以最近也在思考该输出个什么系列比较贴合个人发展。家里老婆有建议我：既然工作上使用了 React，那个人用 Vue3 也不错。毕竟老婆单位用的 Vue3 …（以为我不知道让我用 Vue3 我就可以更方便解决她遇到的问题吗 ε=ε=ε=┏(゜ロ゜;)┛）终究还是要考虑各方面因素：前几年一直使用的 Vue2，后面一定是 Vue3 的天下当前工作

【HTTP】强缓存和协商缓存解题要点：强缓存和协商缓存的概念、状态码关键词：200、304、from disk cache / from memory cache强缓存相关的浏览器 Header 属性及其每个属性的介绍关键词：Expires、Cache-Control、Pragma协商缓存相关的浏览器 Header 属性及其每个属性的介绍关键词：ETag — If-None-Match、Last-Modified — If-Modified-Since牵扯的优先级（加分）a. 强缓存和

谈谈对语义化的理解语义化标签header、nav、main、article、section、aside、footermark、details、summarytime、figure、figcaptionform、table、img语义化优点：易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。方便其他设备解析，如盲人阅读器根据语义渲染网页有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。主体结构标签

说下事件模型1. 什么是事件和事件流javascript 是事件驱动型语言。当用户在网页中进行某种操作时，就产生了一个“事件”(Event)。当事件发生时，JavaScript 可以对之做出响应，具体如何响应某个事件由编写的事件处理函数完成。事件流描述的就是从页面中接收事件的顺序，早期 IE 和 Netscape 提出了完全相反的事件流概念，IE 事件流是事件冒泡，而Netscape的事件流就是事件捕获。2. 冒泡和捕获的区别，触发顺序IE 提出的事件流是事件冒泡，即从下至上，从目标触发的元素逐级

前两天进行项目总结时候，发现 Less 引入全局变量居然没生效，再一验证，发现原来的配置本来就一直没生效，只是在做主题色变化功能时候引入的样式文件里面刚好有 CSS 全局变量那个文件，而主题色里加载的样式会通过 globalVars 加载到全局，从而让我误以为自己的全局变量配置生效了…所以再归纳一下如何配置 CSS 全局变量，具体如下：注：Sass 和 Less 配置方法不一样，这里放的是 Less 的，可能 Sass 的只需要修改下配置即可，暂不表述1. 依赖npm i style-resou

我们都知道 Vue 和 React 内部都使用了虚拟 DOM，我最近刚刚开始梳理虚拟 DOM 的相关知识，下面是我梳理的笔记，简单明了、清晰易懂，建议收藏。大纲虚拟 DOM 的前情提要为什么使用虚拟 DOM什么是虚拟 DOM（Virtual DOM）虚拟 DOM 的作用一、虚拟 DOM 的前情提要当浏览器获取了一个 HTML 文档后，浏览器内核 webkit 的 WebCore 层中的 HTML 引擎会将该文档解析为 DOM 树，解析出的 DOM 树会交给同处在 WebCore 层的 D

这是迄今为止我在【突破桎梏】系列中耗时最长的文章，内容繁杂和加班等各种原因吧，鸽了快一个月，中间还跨了年写下了 [我的 2021 年度规划](https://blog.youkuaiyun.com/qq_28827635/article/details/112057435) ... 还望各位老铁多多支持~

今天我们来介绍 【前端模块化开发】。模块化是当下最重要的前端开发范式之一，而掌握模块化开发也是在招聘 JD 里总会出现的条件。因此我们根据下面问题从 模块化的目的、演进过程 开始梳理，以此来快速了解 当下/未来 必要掌握的 【前端模块化开发】，本篇为开篇内容。模块化的目的、概念 -> 解决的问题模块化的演进过程模块化的标准和规范模块化 ES Modules 基本特性ES Module 导入和导出（最为核心和常用的功能）ES Modules Import 用法ES Modules 直

TypeScript 是基于 JavaScript 的编程语言，它解决了 JavaScript 自有类型系统的不足，通过使用 TypeScript 可以大大提高代码的可靠程度。今天我们要从介绍编程语言的类型开始，再介绍 JavaScript 中类型体统存在的问题，再到为解决 JavaScript 类型系统的不足诞生出的两种最主流的 JavaScript 类型系统方案：Flow 和 TypeScript。你准备好了吗？大纲如下：不同类型的区别与意义：强类型与弱类型、静态类型与动态类型JavaScr

一万五千字长文，先码后看，务必收藏。系统化的学习 ECMAScript 很有必要，而网上的 ECMAScript 资料比较零散，因此我们根据下面问题从 ES2015 开始梳理 ES2015 的发展与新特性介绍。ECMAScript 与 JavaScript 的关系？ES6 为什么指的是 ESMAScript 2015ECMAScript 2015（ES6）新特性介绍ES2015 let 与 块级作用域ES2015 constES2015 数组的解构ES2015 对象的解构ES2015.

使用 Less，我们可以改变颜色变量的饱和度或色调。像这样： background：lighten（@blue，20%）; 我们想改变颜色变量的 alpha 不透明度，在 Less 中有什么方法做到吗？ background：fade（@blue，20%）; 如上所示，函数名称 fade 不是 alpha 。...

初识 ECMAScript今天我们来介绍 【诶可码 · 斯柯瑞噗特】和它的新特性。系统化的学习 ECMAScript 很有必要，而网上的 ECMAScript 资料比较零散，因此我们根据下面问题从 ES2015 开始梳理 ES2015 的发展与新特性介绍。ECMAScript 与 JavaScript 的关系？ES6 为什么指的是 ESMAScript 2015ECMAScript 2015（ES6）新特性介绍let 与 块级作用域const1. ECMAScript 与 JavaScr

该解决方案针对 Vue 等 hash 打包静态资源，且 nginx 部署的项目。这样的项目一般来讲打包后生成的 hash 已经帮我们解决了 js/css 的问题。但 html 资源始终是 那个 index.html，我们浏览器刷新再刷新始终是 304 状态码。怎么办！摔 ！ (′д｀ )…彡…彡那我们就只需要解决掉 index.html 这个辣鸡文件的缓存问题就好啦！nginx 配置如下：location / { gzip_static on; root /usr/share

加速效果在 5-100倍安装webpack插件compression-webpack-pluginnpm install --save-dev compression-webpack-plugin在vue.config.js中如下配置const CompressionWebpackPlugin = require('compression-webpack-plugin')const productionGzipExtensions = ['js', 'css']module.exports =

常见的浏览器内核可以分四种：Trident、Gecko、Blink、WebkitIE浏览器：Trident内核，也称为IE内核Chrome浏览器：Webkit内核，现在是Blink内核Firefox浏览器：Gecko内核，俗称Firefox内核Safari浏览器：Webkit内核Opera浏览器：最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；360浏览器：IE+Chrome双内核猎豹浏览器：IE+Chrome双内核百度浏览器：IE内核QQ浏览器：Tri

修改官方示例类，代码如下：import base64import jsonfrom Crypto.Cipher import AESclass WXBizDataCrypt: def __init__(self, appId, sessionKey): self.appId = appId self.sessionKey = sessionKey def decrypt(self, encryptedData, iv): # ba

上干货！show my code ！import introJs from "intro.js";import "intro.js/introjs.css";import "@/styles/intro.scss";export const intro = introJs;interface Step { element?: string; intro: string; position?: string;}interface Options { steps: Step[

egg-mysql：GITHUB传送门一、配置安装egg-mysqlnpm install egg-mysql -S在src/config/plugin.ts添加配置代码如下export default { …… mysql: { enable: true, package: 'egg-mysql', } ……} as EggPlugin;在src/config/config.default.ts添加配置代码如下import { EggAppConfig,

一、midway-init 创建项目安装”midway-init“npm i midway-init -g项目初始化midway-init安装依赖npm install配置启动命令"package.json"的”scripts”里修改配置"dev": "set NODE_ENV=local && midway-bin dev --ts",启动npm run dev二、配置跨域在”src/config/config.default.ts

项目根目录下创建.env、.env.development和.env.production三个文件，各文件解释如下：　　.env 无论开发环境还是生产环境都会加载的配置文件　　.env.development 开发环境加载的配置文件　　.env.production 生产环境加载的配置文件环境变量的简单使用示例。需要注意，配置文件里的属性名必须以VUE_APP_开头，比如在.env文件这样声明一个环境变量：VUE_APP_QQQ = `QQ`然后就可以在代码里这样用了：console..

一、vue create yoye-front 创建项目二、引入 normalize.css安装npm install normalize.css -S”main.ts“ 引入import 'normalize.css'三、引入 flexible 适配 PC将下面文件放入”src/utils/”，该文件是”lib-flexible”修改第72行“520”->”width”得来flexible.js”main.ts“ 引入，注意引入顺序，要放在 “normaliz

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flex</title> <style> html, body { .

验证码：type-gverify上传：simple-uploaderTable任意单元格可编辑：editArry+editObjPC适配自动转换rem：flexible客户端：electronCss初始化：normalize.cssSvg：svgiconcanvas：konva全屏与缩放：screenfull页面加载进度：nprogressCookie操作：js-cookie...

首先想说的是，video 太坑了。其次想说的是，搜到的教程都没有完整可跑起来的 demo。最后想说的是，遇到的坑搜到的解决方法都解决不了。在这里贴个 demo，在 package.json 安装指定版本一定跑的起来。package.json//dependencies"video.js": "^5.6.0","videojs-flash": "^2.2.0","videojs-sw...

WebAssembly起始、JS与Dom纠缠https://blog.youkuaiyun.com/liudiyang1212/article/details/100559646VirtuaDom与Vue瓜葛https://www.jianshu.com/p/af0b398602bc

切换淘宝yarn config set registry https://registry.npm.taobao.org查看现有yarn config get registry

每条经验都可以单独写篇 Blog 的，为了阅读以及查找方便，还是放一起吧Vue 官方文档 : https://cn.vuejs.org/v2/guide/components.html1.安装 node.jshttps://nodejs.org/zh-cn/2.安装 yarnhttps://yarnpkg.com/zh-Hans/docs/install#windows-stable...

1 手写jsonp的实现2 手写链表倒数第K个查找3 http请求头，请求体，cookie在哪个里面？url在哪里面？4 原型链的解释5 对闭包的理解，实现一个暴露内部变量，而且外部可以访问修改的函数6 基本的数据类型7 基本的两列自适应布局8 unix中常用的命令行9 OSI模型，HTTP,TCP,UDP分别在哪些层10 解释平衡二叉树，以及在数据结构中的应用（红黑树）11 ...

1.const定义的变量不可以修改，而且必须初始化。const b = 2;//正确// const b;//错误，必须初始化 console.log('函数外const定义b：' + b);//有输出值// b = 5;// console.log('函数外修改const定义b：' + b);//无法输出 2.var定义的变量可以修改，如果不初始化会输出undefined，不会报错...