- 博客(23)
- 收藏
- 关注
RSS订阅
原创 VUE实战小技巧
能让你首次加载更快的路由懒加载，怎么能忘？路由懒加载可以让我们的包不需要一次把所有的页面的加载进来，只加载当前页面的路由组件就行。举个????，如果这样写，加载的时候会全部都加载进来。const router = new VueRouter({ routes:[ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About'
2021-06-01 10:34:03
194
原创 vue使用Echarts相关图表的方法以及案例
Vue 项目中 使用 Echarts 图表1、在vue项目中安装 vue-echarts使用npm安装npm install vue-echarts2、在 main.js文件中引入echartsimport ECharts from 'vue-echarts/components/ECharts.vue' // 引入vue-echarts 组件Vue.component('echarts', ECharts) // 全局注册组件import echarts from 'echarts
2021-03-05 17:47:17
4429
14
原创 vue3+ts 踩坑集锦之vue+ts声明变量时报错
vue+ts 在声明变量时报错 'xxxx.vue' cannot be compiled under '--isolatedModules' because it is considered a global scr
2022-06-14 19:59:01
4832
原创 电脑右键菜单添加打开方式-VsCode
右键菜单添加VsCode打开方式win+R 打开运行框 并输入 regedit 运行注册表编辑器在HEKY_CLASSES_ROOT\Directory\Background\shell路径下找到自己的VsCode配置修改使用的软件打开路径方式，点击确定即可。tips- 用以上方式可以实现很多类似的功能，比如cmd在当前文件中打开cmd...
2022-04-12 00:51:47
843
1
原创 Chrome插件的长链接与奇怪的API
1- 关于Chrome 的长链接: connectchrome.tabs.connect(创建) 和 chrome.runtime.onConnect(监听)popup监听当前标签页，创建长链接。 chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) { let port = chrome.tabs.connect(tabs[0].id, { name: 'julius-connect' }) //
2022-03-20 00:12:29
1742
原创 性能优化之节流&防抖
1- 防抖（debounce）什么是防抖？debounce 防抖函数：在函数触发的n秒后执行，如果时间内重复触发，就重新计时场景常用的输入框搜索时, 重发触发input或keyup等事件时，每次都会去请求接口，这样很浪费服务器资源交给朋友们，提供。Code实现 function input(val) { let debounceTimer = null // 如果时间内重复触发即清空延时器 if(debounceTimer) { clearTimeout(debounceTi
2021-12-26 01:34:58
167
原创 前端Jest自动化测试
作为一个优秀的攻城狮必备的条件随着前端的发展，前端设计的领域已经越来越多，也越来越复杂。这就对我们前端工程化能力，提出了更高的要求。 好的前端工程化一般包括三个大的方面：前端自动化测试（前提条件）高质量的代码设计高质量的代码实现Jest的优点比较新：喜新厌旧是人的天性，新技术出来后你总想动手尝试一下，这个就和家花没有野花香是一个道理。作为一个程序员，你更要有拥抱全新知识的态度。绝不能固步自封，顽固不化。（你们这些小年青永远体会不了老男人去洗浴中心的喜悦和急切心情的）基础很好：框架基
2021-12-22 22:30:11
8680
原创 你不知道ES6的那些事
1- 关于数组扁平化的处理 // 需求是获取所有车辆的id放到一哥数组集合中 const objs = { '奥拓': [100,120,130], '奔腾': [46,52,67], '宝骏': [123,234,456] } // 旧版 let carList = [] for(let item in objs) { const value = objs[item] if(carList instanceof Array) { carList = [ ...carList
2021-12-22 18:12:37
325
原创 关于Eslint配置项解析
module.exports = { root: true, parserOptions: { //此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式 parser: 'babel-eslint', sourceType: 'module' }, env: { //此项指定环境的全局变量， browser: true, node: true, es
2021-12-22 10:39:58
577
原创 JS对字符串进行base64的编码和解码
1、某些特殊场景中，可能需要对字符串进行编码输出，或者替换之类的操作。下面就带来了，比较方便的解码（decodeURI）和编码（encodeURI）encodeURI decodeURI // 编码 const enCode = (str) => { let code = encodeURI(str) // 进行URI编码 let base64 - btoa(code) // 进行base64格式的编码 return base64 } // 解码 const deCode =
2021-10-26 10:50:53
1403
原创 前端面试题集锦
1- 浏览器工作原理：从URL到页面展现到底发生了什么1、键盘出入URL并回车确认2、URL解析/DNS解析查找域名IP地址3、网络连接发起HTTP请求4、HTTP报文传输过程5、服务器接收数据6、服务器响应请求/mvc7、服务器返回数据8、客户端接收数据9. 浏览器加载/渲染页面10.打印绘制输出 2- 前端路由的两种模式 Hash模式和 History模式1. hash模式: 监听浏览器地址hash值变化, 执行响应的js切换网页;2. history模式: 利用histo
2021-09-01 17:34:19
89
原创 关于node-sass安装不上的原因及解决办法
1、尝试使用 cnpm 或者 淘宝镜像下载设置淘宝镜像如下npm config set registry http://registry.npm.taobao.org/查看当前镜像地址npm get regisrty2、有可能是本地的node版本比较旧、导致下载失败类似这种。解决办法：安装低版本的node-sassnpm install --save node-sass@4.14.13、如果是package.json 有这个包了。然后你npm install 没下载下来。1、删除
2021-08-04 23:48:54
1521
原创 js的微任务宏任务执行机制解析
console.log('1')setTimeout(function() { // 宏任务 console.log('2') process.nextTick(function() { // 微任务 console.log('3') }) new Promise(function(resolve) { // 同步 console.log('4') resolve() }).then(function () { // 微任务 console.log(
2021-03-29 17:54:30
140
原创 JavaScript 递归解决多层级数组和数组扁平化
递归解决多级数组我们考虑利用递归 就必须等有一个判断条件 中断 递归 不然容易出现死循环我们在进如函数递归是 要注意第二次调用自身是 函数的参数要是数据的子数据我们在进如函数递归是 要注意第二次调用自身是 函数的参数要是数据的子数据let arr = [ { name: '小明同学', children: [ { name: '小明同学', children: [ { name: '小明同学' } ] } ] }]function fn (arr, newArr = []) { arr
2021-03-26 23:48:50
3341
2
原创 TypeScript关于类的方法与解析
类的使用class Greeter { greeting: string constructor ( message: string ) { this.greeting = message } greet () { return "Hello" + this.greeting } }const greeter = new Greeter( "world" )// 使用new 构造了 Greeter 类的实例. 它会调用之前定义的构造函数，创建一个Greeter类型的新对象，
2021-03-26 18:06:40
328
6
原创 TypeScript 安装使用以及基本数据类型
第一步 全局安装TypeScript使用 npm 安装 npm install -g typescript使用cnpm 安装cnpm install -g typescript使用yarn安装yarn global add typescript第二步 初始化TypeScript在vscode里面 终端 >> 运行生成任务 >> tsc:监视tsconfig.json接下来就可以开始我们的typescript旅程了~TypeScript 的 基本数据类型/
2021-03-15 18:04:10
1255
10
原创 Npm查看与设置镜像源地址
看了很多的帖子都是把镜像源地址，切换成了淘宝源地址，我来个官方点的1、查看当前镜像源地址npm get registry2、设置镜像源地址npm config set registry https://registry.npmjs.org/3、设置镜像淘宝源地址npm config set registry http://registry.npm.taobao.org/PS： 如果设置不知道是否正确，沿用1去手动查看最好的心境，是静心和沉稳...
2021-03-03 14:07:32
5382
1
原创 Element-UI el-table 合并单元格
当表格某一列需要根据某种数值一样，需要合并时，可以参考如下话不多说 直接上Code <el-table :data="tableData" :span-method="objectSpanMethod" > <el-table-column label="名字" prop="name" /> <el-table-column label="年龄" prop="age" /> <el-table-column label=
2021-03-03 13:45:16
524
原创 Axios 设置 responseType：blob 导致后端返回的任意结果都会转换为 blob { }
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 **File** 或 **Blob** 对象指定要读取的文件或数据。#### 属性： - FileReader.error 表示在读取文件时发生的错误 - FileReader.readyState - FilerReader.result 读取到的结果 （上面用到的）
2021-03-02 16:46:27
5265
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人