vue使用svgsvg-sprite-loader 的插件，用来根据导入的 svg 文件自动生成 symbol 标签并插入 html，接下来就可以在模版中方便地使用 svg-sprite 技术了。 使用 svg-sprite 的好处如果不知道 svg-sprite 是什么，可以参考大神张鑫旭的文章：未来必热：SVG Sprite技术介绍 页面代码清爽 可使用 ID 随处重复调用 每个 SVG 图标都可以更改大小颜色 使用方法1.安装依赖npm install svg-sprite-loader –save-dev2.在src/components下新建文件夹及文件SvgIcon/index.vue 组件 123456789101112131415161718192021222324252627282930313233343536373839404142 <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <u ...

单文件组件sfc编写模板声明使用ts，setup标识使用composion API，组件导入在script import即可，其他template、style模块和vue2一样。 定义data、方法、生命周期函数、refs使用推荐使用ref定义数据，使用数据的时候，一些地方需要.value获取；注意：element ui 没有很好的TS类型支持，一些数据定义需要额外定义。(全局方法也是没有（需要全局定义type），好多需要补齐的地方，有点为了用而用了)此外，refs的用法注意，vue composition 里面没有this了。 使用全局注册方法 老项目体验（升级vue2.7+ts)因为项目比较老旧的原因，vue2.7还是对TS的支持还是不太够：例如取某个DOM定义的ref，获取元素调用某个方法时，需要定义：导致方法调用的可选链过长（不然会告警）：老项目存留的js方法重构ts的成本也比较大。（如果不修改的话，会有很多地方使用any，感觉为了ts而ts了) 代码例子12345678910111213141516171819202122232425262728293031323334353 ...

vue2使用typescript | composition API + tsc or sfcvue2升级到typescript的方案有很多种。vue2比较令人诟病的地方还是对ts的支持，对ts支持不好是vue2不适合大型项目的一个重要原因。其根本原因是Vue依赖单个this上下文来公开属性，并且vue中的this比在普通的javascript更具魔力（如methods对象下的单个method中的this并不指向methods，而是指向vue实例）。换句话说，尤大大在设计Option API时并没有考虑对ts引用的支持）。（由于Vue2.x版本有设计断层，导致很多类型是通过declare方式推导出，而不是基于class的API，这也是为什么Vue3.0用typescript重写的原因之一。）方案： 传统方案：vue-property-decorator | vue class component | vue-facing-decoratorvue2对ts的支持主要是通过vue class component，vue-property-decorator这里主要依赖装饰器。vue-pro ...

npm 发布小版本更新步骤可以使用 npm version patch 命令来执行小版本更新。这个命令会自动递增 package.json 文件中的小版本号，并提交一个新的 Git 标签。 下面是使用 npm version patch 命令进行小版本更新并上传到 npm 和 GitHub 的步骤： 在命令行窗口中，进入项目的根目录。 运行以下命令来执行小版本更新： 1npm version patch 这将会自动递增 package.json 文件中的版本号，并创建一个新的 Git 标签。 确保您的代码处于一个可发布状态，并且没有包含任何敏感信息。您可以通过运行以下命令来忽略不需要发布的文件或目录： 12echo "dist/" >> .npmignoreecho ".git/" >> .npmignore 接下来，登录到 npm 帐户，运行以下命令来验证您的身份： 1npm login 一旦您成功登录，运行以下命令来发布新版本的 npm 包： 1npm publish 这将会将您的代码上传到 n ...

组件设计原则 原则 一句话总结: ui 组件设计看 antd/element-ui，业务组件抽逻辑，dump 组件(展示型)纯模版，smart 组件带点 state。 组件分类: 一个模块下可能现有容器组件(layout/container)，包含多个业务组件；一个业务组件可能包含多个 UI 组件和展示型组件； 组件的能力 ●资源高内聚（组件资源内部高内聚，组件资源由自身加载控制） ●作用域独立（内部结构密封，不与全局或其他组件产生影响） ●自定义标签（定义组件的使用方式） ●可相互组合（组件间组装整合） ●接口规范化（组件接口有统一规范，或者是生命周期的管理） 组件的内容 ●每个组件对应一个目录，组件所需的各种资源都在这个目录下就近维护；（最具软件工程价值） ●页面上的每个独立的可视/可交互区域视为一个组件； ●由于组件具有独立性，可以自由组合； ●页面是组件的容器，负责组合组件形成功能完整的界面； ●当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换 组件的设计原则 ●标准性: 任何一个组件都应该遵守一套标准，可以使得不同区域的开 ...

vim|webstorm快捷键学习 vim 基本操作： Esc 从当前模式转换到“普通模式”。所有的键对应到命令。 i “插入模式”用于插入文字。回归按键的本职工作。 : “命令行模式” Vim 希望你输入类似于保存该文档命令的地方。 基础： ●当前文件搜索：/+内容 ●x：删除一个字符 ●u：撤销一个操作（相当与 Ctrl+z） ●dd：删除一行内容 ●dw：删除一个单词 ●yy：复制一行内容 ●yw：复制一个单词 ●p：粘贴一个之前删除或复制的行或者单词 ●e：跳到下个单词（LCTT 译注：词尾）（比单纯用方向键更快） ●r：替换一个字母（按 r，松开，然后再按新字母） ●切换文件窗口： ctrl + w ●:sp 文本文件名：将屏幕水平分割成上下两半，新文件展示在另一半。 ●:vsp ：水平左右分割； ●Ctrl+Shift+C 和 Ctrl+Shift+V：在终端中复制和粘贴文本。 方向键： h 光标向左移动一个字符 j 或 Ctrl + J 光标向下移动一行 k 或 Ctrl + P 光标向上移动一行 l 光标向右移动一个 ...

network在线环境调试：源码保存为覆盖内容， 在本地做文件映射，并且可以修改演示。 修改接口返回的响应，做到后端数据的mock选择接口，选中覆盖项 做本地映射，填写相关内容：

PDF 下载客户端方面所能支持的下载方式，最常见的如下几种： a 标签，例如 下载 location.href，例如 window.location.href = xxx window.open，例如 window.open(xxx) Content-disposition，例如 Content-disposition：attachment；filename=”xxx” 实现下载 的 download 属性用于指示浏览器 下载 href 指定的 URL，而不是导航到该资源，通常会提示用户将其保存为本地文件，如果 download 属性有指定内容，这个值就会在下载保存过程中作为 预填充的文件名，主要是因为如下原因： 这个值可能会通过 JavaScript 进行动态修改 或者 Content-Disposition 中指定的 download 属性优先级高于 a.download 这种应该是大家最熟悉的方式了，但熟悉归熟悉，还有一些值得注意的点： download 属性只适用于 同源 URL 同源 URL 会进行 下载 操作 非同源 URL 会进行 导航 ...

NGINX：开源的一体式高级负载均衡器、内容缓存和网络服务器、反向代理(Advanced Load Balancer, Web Server, & Reverse Proxy) 负载均衡 LoadBalance 将网络请求，或者其他形式的负载“均摊”到不同的机器上。 避免集群中部分服务器压力过大，而另一些服务器比较空闲的情况。 通过负载均衡，可以让每台服务器获取到适合自己处理能力的负载。 在为高负载服务器分流的同时，还可以避免资源浪费，一举两得。 常见负载均衡算法工作原理 轮询 顾名思义将请求按顺序轮流地分配到后端服务器上，它均衡地对待后端的每一台服务器，而不关心服务器实际的连接数和当前的系统负载。 优点: 服务器请求数据相同 不足: 服务器压力不同，不适合根据服务器配置不同的情况 随机 通过系统的随机算法，根据后端服务器的列表大小值来随机选取其中的一台服务器进行访问。 由概率统计理论可以得知，随着客户端调用服务端的次数增多，其实际效果越来越接近于均分配调用量到后端的每一台服务器，也就是轮询 ...

一、问题描述antd table不支持列可选，自己实现了一下列可选，但发现在横向滚动到中间位置时，选中某些列去展示时，会出现header错位，但此时横向滚动一下滚动条则会恢复正常header位置。 问题现象图示： 1、横向滚动到中间位置： 2、选择之前没有渲染选中的列进行展示，此时header出现了回到初始状态位置，出现错位： 3、但此时滚动一下横向滚动条，header瞬间复位成功： 4、此外，对于之前渲染成功的列，在选择取消列展示时，不会出现header错位： （不会重置ant-table-header的scrollLeft为0） 二、原因分析首先，在选择之前未渲染的列后，该column的header和data是渲染的，只是header回到了横向滚动的初始位置。 header的横向滚动的位置计算出现了错误，赋值为0，但横向稍微滚动一下，又能够正确赋值为横向滚动位置，从而恢复header的错位展示问题。 由于需求是需要table固定表头，对table的scroll属性设置了y，当没有对scroll设置y时，此时，选中列时，不会出现header错位： 当设置固定定位后，he ...