Cool的博客

1.安装mockjsnpm install mockjs -D安装mockjs在你的开发依赖上，因为你生产环境用的是正式的接口，安装在开发依赖上可以减少你包的大小。2.安装axiosnpm install axiosvue ajax 请求库。3.创建src/http 目录增加api.js对axios封装import axios from 'axios'// axios.defaults.headers.get['Content-Type'] = 'application/x-www-f

官网：https://www.sveltejs.cn/Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。与使用虚拟（virtual）DOM 差异对比不同。Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样更新 DOM。...

Pinia 是什么?Pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案Pinia 支持 Vue2 和 Vue3本文只讲 Pinia 在 Vue3 中的使用, 在 Vue2 中使用略有差异，参考 官方文档Pinia 优势符合直觉，易于学习极轻， 仅有 1 KB模块化设计，便于拆分状态安装 Pinia安装需要 @next 因为 Pinia 2 处于 beta 阶段, Pinia 2 是对应 Vue3 的版本# 使用 npmnpm install

官网：PiniaThe Vue Store that you will enjoy usinghttps://pinia.vuejs.org/

官网：Mousetrap - Keyboard shortcuts in JavascriptMousetrap is a simple keyboard shortcut/event library written in Javascript.https://craig.is/killing/mice

官网：https://docs.nestjs.cn/Nest 是一个用于构建高效，可扩展的 Node.js 服务器端应用程序的框架。它使用渐进式 JavaScript，内置并完全支持 TypeScript（但仍然允许开发人员使用纯 JavaScript 编写代码）并结合了 OOP（面向对象编程），FP（函数式编程）和 FRP（函数式响应编程）的元素。在底层，Nest使用强大的 HTTP Server 框架，如 Express（默认）和 Fastify。Nest 在这些框架之上提供了一定程度的抽象，同时也

组件： vue-directive-image-previewer 1.在vue前端控制台Terminal中输入以下命令 npm install vue-directive-image-previewer -D1 2.在main.js中添加以下代码 //图片放大组件import VueDirectiveImagePrev...

公司新产品要求发布到各家小程序，最近研究对比了社区主流的几家小程序开发框架，独坑不如拉人众坑，分享给各位，欢迎和我一起入坑:)背景最近老板不知怎的很重视各种小程序平台，感觉要靠小程序完成今年大半kpi。。。产品和运营自然找我们要方案，一方面要快速铺开各种小程序，另一头hr又不给前端团队加headcount，我只能目前几杆枪，主要在微信和H5上，若按照各家规范进行原生小程序开发，肯定是不够的；所幸业内有人在做跨各种小程序的框架，趁机研究一番，看看到底做的怎么样。可选的小程序框架我们主要分析了如下

官网：http://www.mescroll.com/原生js, 不依赖jquery,zepto支持vue超详细注释, 快速使用,轻松上手一套代码多端运行, 支持uni-app完美运行于android, iOS, 手机各浏览器兼容PC端主流浏览器

官网：https://www.wuxui.com/#/introduce

Gatsby.js 是一个基于 React 的静态网站生成器Blazing fast static site generator for React前一阵看 React官网文档的时偶然发现的Kyle Mathews小哥在 2015 年开了这个坑到目前已有 17k+ 的 star，以及被 React、Reason、Sourcegraph 等用来生成官方文档，还得到了业界大佬的好评We use it forhttps://reactjs.org/. Nice to be ...

两周前（202.02.17），vite2.0 发布了，作为使用了浏览器原生 ESM 为下一代前端工具，vite 2.0 相较于 1.0 更加成熟。在此之前笔者就开始关注这类「新型」的前端工具。这次趁着 vite 2.0 发布，也成功将一个基于 vue-cli(-service) + vue2 的已有项目进行了迁移。迁移工作比较顺利，花了不到半天时间。但整个迁移过程中也遇到了一些小问题，这里汇总一下，也方便遇到类似问题的朋友一起交流和参考。项目背景在介绍具体迁移工作前，先简单介绍下项目情况。目前该

一、前言网易七鱼是提供围绕客户服务与智能营销的 SaaS 平台。在七鱼业务中，有在线系统、呼叫系统、机器人、工单系统、数据大屏等业务线，它们分布在两个业务端，管理端和客服端。这两个端的功能框架类似，都是由外层框架（顶部导航、一级菜单）及中间的内容区组成。二、业务现状随着业务体量的增大与功能的增多，主系统作为一个巨石应用复杂度越来越高，所有的业务线耦合在一起，在系统构建、业务分离、开发维护方面带来了新的挑战。为解决以上问题，我们最初采用了 「MPA + iframe」 的技术方案。先按业务维度

写在开头 由于vite这个构建工具被用在了vue3上门，而且它的构建思路我觉得优于webpack,底层也是使用了esbuild,性能上更优 那么为了照顾一些小伙伴之前没有学习过vite的，我们先来看看什么是vite 什么是vite Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用,支持热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 r.

1.什么是脚手架脚手架用于快速生成新项目的目录模板，并集成一系列体系化工具的安装,无需自己从零开始一步步配置，减少copy操作，有效提升开发体验和效率，尽管这些脚手架非常优秀，但是未必是符合我们的实际应用的，所以我们可以定制一个属于自己的脚手架，来提升自己的开发效率。平时我们在开发React-Native的时候就会使用到raect-native-cli这个脚手架为我们创建项目脚手架的作用减少重复性的工作，不需要复制其他项目再删除无关代码，或者从零创建一个项目和文件。 可...

npm:element-resize-detector// 监听dom改变图表改变 const elementresizedetectormaker = require('element-resize-detector') const erd = elementresizedetectormaker() const worldmapcontainer = document.getElementById('statisticsBox') erd.listenTo..

Axios 是一个基于 Promise 的 HTTP 客户端，同时支持浏览器和 Node.js 环境。它是一个优秀的 HTTP 客户端，被广泛地应用在大量的 Web 项目中。由上图可知，Axios 项目的 Star 数为 77.9K，Fork 数也高达 7.3K，是一个很优秀的开源项目，所以接下来阿宝哥将带大家一起来分析 Axios 项目中一些值得借鉴的地方。阅读完本文，你将了解以下内容：HTTP 拦截器的设计与实现； HTTP 适配器的设计与实现； 如何防御 CSRF 攻击。下面我们从简

computed: { rowSelection() { const _this = this const { selectedRowKeys } = this return { selectedRowKeys, onChange: (selectedRowKeys) => { this.selectedRowKeys = selectedRowKeys }, getC...

这是一个市场上最好的javascript后端库列表，甚至我会推荐你把它收藏起来，以便将来参考，就像我为自己做的那样 ????。1. Express快速，简单，极简的Node Web框架。2. Socket.ioSocket.IO支持基于事件的实时双向通信3. Body-parserNode.js body解析中间件。在处理程序之前，在中间件中解析传入的请求主体，该处理程序在 req.body 属性下可用。4. Cor...

轻量，没有依赖。安装： npm install enquire.jsAPI:　　enquire.register(mediaQuery, handler).　　　　mediaQuery: 字符串，需要响应的媒体。　　　　handler: 函数或对象，　　enquire.unregister(mediaQuery[, handler])　　　　mediaQuery: 字符串，需要注销响应的媒体。　　　　handler: 函数或对象，可不写，一旦写了，只有这个handler被注销

在表单中验证upload,当文件被删除后,form并没有验证到解决://vue<a-upload name="peoplefile" :fileList="excelList" :beforeUpload="beforeUpload" @change="fileChange" v-decorator="[ 'file', {

推荐一个npm库：axios-auth-refresh

问题背景：Vuex 解决了多视图之间的数据共享问题。但是运用过程中又带来了一个新的问题是，Vuex 的状态存储并不能持久化。也就是说当你存储在 Vuex 中的 store 里的数据，只要一刷新页面，数据就丢失了。引入vuex-persist 插件，它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中。具体用法如下：pexels-photo-1211847.jpeg安装：npm .

npm install vue-esign --save 在main.js中 Vue.use(vueEsign) <vue-esign ref="esign" style="width:100%;height:83vh !important;border-bottom: 1px dashed #c2c1c1;" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor...

官网：http://ricostacruz.com/nprogress/

// 修改市中心经纬度editMapCp(){ var chinaEchartsObj = this.$echarts.getMap('广东'); var geoJSONChina = chinaEchartsObj.geoJson; var allDefProvince = geoJSONChina.features; for(var i=0,len=allDefProvince.length; i<len; i+.

什么是monorepo最近在逛github时，偶然发现react-router这个开源项目的repository目录结构很奇怪。根目录下没有src之类的源码目录，也没有test这类的存放单元测试的目录，只有一个packages目录。顺着目录往下看，发现readme中写道 ：这个repository是一个我们用Lerna管理的monorepo。实际上，我们往npm上发布的几个package都来自于同一个codebase,包括......通常，当我们的项目不断的迭代更新的时候，我们会根据业务

这几天假期，我学习了一下Deno。它是 Node.js 的替代品。有了它，将来可能就不需要 Node.js 了。这篇文章就是 Deno 的一个初步介绍，尝试回答为什么 Node.js 不能满足需要，以及 Deno 能够带给我们什么？以下内容主要基于Bert Belder和Ryan Dahl的最新演讲。0、进入主题之前，先说一下 Deno 这个词怎么发音。两种发音，"德诺"和"蒂诺"，我都听到过。看起来，"蒂诺"这个发音应该更合适一些，因为 Deno 的标志是一只恐龙。恐龙（...

官网：http://datav.aliyun.com/tools/atlas/#&lat=31.769817845138945&lng=104.29901249999999&zoom=4

官网：https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default

export function echarts100(){ let option = { angleAxis: { max: 100, // 满分 clockwise: false, // 逆时针 // 隐藏刻度线 axisLine: { show: false }, axisTick: {...

option = { title: { text: '75%', textStyle: { color: '#48FFFF', fontSize: 12 }, left: 'center', top: 'center'},angleAxis: { max: 100, // 满分 clockwise: false, // 逆时针 // 隐藏刻度线 axi...

工作以来一直在做2b的项目，因此表单操作，权限设置，一些业务逻辑就做的比较多。首先介绍下背景：前后端完全分离，前端技术栈使用react+redux+antd，经常是没有视觉设计，全凭产品需求文档··_··！最近产品来了个需求，需要做一个流程图，在流程图上点击文字时需要弹窗显示数据，因此渣渣一个需求里做了n个弹窗，弹窗上再弹窗。。。。。（心里无数XXX奔过），因此也遇到了不少的问题，流程图是个大模...

操作列右侧固定。在列很少情况下出现重复问题对于没有bordered边框解决方案 { title: '编号', dataIndex: 'id', sorter: true, width: 100, align: 'left', render: text => text || '-'...

一、Tree 树形控件问题：树形控件在参照官方最后一个自定义render例子时，无法对树节点进行选中 return h( "span", { style: { display: "inline-block", cursor: "pointer", ...

vue-treeselect官网：https://github.com/riophae/vue-treeselect

还不知道这个插件的小伙伴可以先去官网下载，orgchart官网链接呐，下载下来就是这样的：我们把他解压出来：点进去以后，直接找到index.html文件用浏览器打开，就是这样的啦：这1--24都是样式样例了，大家可以任意点进去查看啦、学习套用啦。。。接下来就附上我所写出来的效果图【我修改了一点它的js和css代码，红色为所占百分比】：然后附上代码，仅供参考，如有不足，还请赐...

Math.js。Math.js 是一个用于 JavaScript 和 Node.js 的扩展数学库。它具有支持符号计算的灵活表达式解析器，大量内置函数和常量，并提供了集成的解决方案来处理不同的数据类型，例如数字，大数，复数，分数，单位和矩阵。强大且易于使用。decimal.jsJavaScript 的任意精度的十进制类型。big.js一个小型，快速，易于使用的库，用于任...

问题：在iview的table组件中，前端在多选时如果点击下一页则丢失了上一页table的多选数据（由于采用的后端分页，每次翻页会直接刷新为新数据）<Table border ref="selection" :columns="orderColums" :data="orderData" :loading="loadings.table" @on-select="handleSele...

vue:<Page id="pageId" show-total show-elevator show-sizer :page-size= "page.pageSize" :total = "page.total" :current = "page.pageNum" @on-change="pageChange" @on-page-size-change="on...