图片优化前端大部分的工作都围绕在 JavaScript 和 CSS 上，考虑如何更快地下载文件，如何提供给用户复杂而优雅的交互，如何高效合理地应用有限的处理和传输资源等，这些是用户感知的全部吗？当然，他们在前端开发和性能优化中的地位举足轻重，但 JavaScript 和 CSS 对用户感知而言，并不是最重要的部分，图像才是。我们在公众号发布文章或用 PPT 进行演讲时，都知道一条高效传递信息的原则

Storybook介绍Storybook 是开发组件库的必备开发工具，翻译为“故事书”。我们可以把每一个组件想象成一个故事，Storybook就好像在讲一个个故事。Storybook 是一个可视化的展示组件的平台使用 Storybook 可以在独立的环境中，创建组件，并在隔离的开发环境中，以交互式的方式展示组件Storybook 在主程序之外运行，因此用户可以独立开发组件库，而不必担心应用程序之间

Storybook介绍Storybook 是开发组件库的必备开发工具，翻译为“故事书”。我们可以把每一个组件想象成一个故事，Storybook就好像在讲一个个故事。Storybook 是一个可视化的展示组件的平台使用 Storybook 可以在独立的环境中，创建组件，并在隔离的开发环境中，以交互式的方式展示组件Storybook 在主程序之外运行，因此用户可以独立开发组件库，而不必担心应用程序之间

Monorepo 方式组织项目代码开发一个组件库，其中可能会有很多的组件。当组件库开发完毕后，还要发布到NPM或私有仓库供其他人使用。在使用 ElementUI 的时候，可以完整的引入，也可以根据需要按需引入部分组件以减少打包的体积。按需引入还需要安装Babel的插件babel-plugin-component，配置.babelrc，比较麻烦。组件库为了让用户使用方便，可以把每一个组件作为一个单独

Plop 基于模板生成组件基本结构当每个包的结构确定之后，就可以基于模板生成一个组件的基本结构，不需要每次手动配置相应的设置。可以使用 Plop 实现这个功能。安装 plopyarn add plop -D -W编写模板在根目录创建 plop_template/component 文件夹存放组件模板文件。复制一份写好的组件到这个目录进行修改：|- __tests__||- component.te

Yarn workspaces介绍workspaces 是工作区的意思。下面是一个简单的 monorepo 的组件库项目结构，每个组件都依赖了一些第三方模块：|- package.json|- packages||- button|||- package.json # 依赖lodash 4||- form|||- package.json # 依赖lodash 4||- formitem|||-

用户登录页面添加登录接口// src\api\common.ts// 公共基础接口封装import request from '@/utils/request'import { DemoData, LoginResponse } from '@/api/types/common'export const demo = () => {return request<DemoData>

前端在向服务器 API 发送请求时一般会设置一个超时时间，避免超过期望时间的持续等待。以 Axios 为例，一般会设置 timeout 请求超时选项。但是浏览器判断超时并不是这么简单。搭建环境express + axios 搭建 web 服务。在项目目录下安装依赖：npm i express axios添加文件：// start.jsconst express = require('express

正则表达式 边界

History API模拟vue-router的history模式的实践时，需要用到 History API 的知识。historywindow.history对象是一个只读属性。提供了操作浏览器会话历史（浏览器地址栏中访问的页面，以及当前页面中通过框架加载的页面）的接口。history.gohistory.backhistory.forwardhistory.pushStatehistory.r