- 博客(33)
- 收藏
- 关注
RSS订阅原创 实践积累：用Vue3简单写一个单行横向滚动组件
目录效果图需求分析实现分析样式展示分析变量分析方法分析实现步骤1. 实现模板2. 实现css3. 首先获取list4. 页面挂载后监听groupBoxRef的scroll事件并获取当前的滚动位置5. 计算展示的宽度显隐箭头，当卡片宽度大于外层宽度就展示6. 控制箭头展示方向7. 监听外层宽度改变和窗口大小改变箭头显隐完整代码效果图把之前完成的一个效果图摘出来记录一下，核心代码在这里，如果项目中用到其他的技术，也很容易改。需求分析展示数据始终一行，多余的部分可以出滚动条，同时隐藏滚动条样式。支持
2021-08-09 16:09:20
1576
原创 TCP的三次握手和四次挥手
目录名词解释TCP的三次握手TCP建立链接的步骤TCP的三次握手步骤思考：TCP握手为什么不是两次 or 四次？TCP的四次挥手TCP断开链接的步骤TCP的四次挥手步骤思考：为什么断开链接的时候要多一个步骤2呢？思考：为什么最后客户端确认断开链接之后还要等待2WSL呢？面试题：TCP为什么是3次握手，4次挥手？这是一个计算机网络中一个很热门，很基础的问题，也是面试常考的一个题，如果你会那不稀奇，如果你不会，那就会凉凉。我这里来对我学的东西做一个整理，看完时候对这里的知识应该会很清晰。首先先来名词解释，如
2021-05-24 14:56:21
723
原创 用简单思维解决LeetCode中困难级别的题 —— 接雨水问题
目录问题描述问题分析代码整理优化分析之前看面试题的时候，看到了一个接雨水的问题，和小黄鸭讨论之后，觉得很有趣呢，这里和大家分享一下这个解法。后来看到LeetCode上面有这道题，题号42，有兴趣的可以做一下。问题描述给定n个非负整数表示每个宽度为1的柱子的高度图，计算彼此排列的柱子，下雨之后能接多少雨水。示例1：输入：height = [0,1,0,2,1,0,1,3,2,1,2,1]输出：6实例2：输入：height = [4,2,0,3,2,5]输出：9你能不能先思考一下，遇
2021-04-21 18:46:47
781
原创 前端刷题 —— 牛客网前端题库60道详解(六)
目录引言乘法 (入门)改变上下文 (入门)批量改变对象的属性 (入门)属性遍历 (简单)判断是否包含数字 (入门)检查重复字符串 (简单)判断是否以元音字母结尾 (入门)获取指定字符串 (简单)判断是否符合指定格式 (简单)判断是否符合 USD 格式 (中等)引言牛客网这个前端笔试题库，可以说这60道是最基础的了，也是考察的东西比较杂，有时间4天差不多就可以刷完，巩固基础还是有些用的。做完题回顾一上午就可以过完一遍。现在我结合我的答案和参考的其他人的答案，在这里做一个总
2021-04-15 23:05:42
1332
原创 前端刷题 —— 牛客网前端题库60道详解(五)
目录引言使用 arguments (入门)使用 apply 调用函数 (简单)二次封装函数 (简单)柯里化 (入门)或运算 (入门)且运算 (入门)模块 (较难)二进制转换 (简单)二进制转换 (入门)二进制转换 (简单)引言牛客网这个前端笔试题库，可以说这60道是最基础的了，也是考察的东西比较杂，有时间4天差不多就可以刷完，巩固基础还是有些用的。做完题回顾一上午就可以过完一遍。现在我结合我的答案和参考的其他人的答案，在这里做一个总结，也是自己知识的整理结果。前端刷
2021-04-15 12:20:43
597
原创 前端刷题 —— 牛客网前端题库60道详解(四)
目录引言正确的函数定义 (简单)正确的使用 parseInt (入门)完全等同 (入门)计时器 (中等)流程控制 (中等)函数传参 (入门)函数的上下文 (入门)返回函数 (简单)使用闭包 (中等)二次封装函数 (入门)引言牛客网这个前端笔试题库，可以说这60道是最基础的了，也是考察的东西比较杂，有时间4天差不多就可以刷完，巩固基础还是有些用的。做完题回顾一上午就可以过完一遍。现在我结合我的答案和参考的其他人的答案，在这里做一个总结，也是自己知识的整理结果。前端刷题
2021-04-14 18:03:38
710
原创 前端刷题 —— 牛客网前端题库60道详解(三)
目录引言删除数组最后一个元素(入门)添加元素(入门)删除数组第一个元素(入门)数组合并(入门)添加元素(简单)计数(入门)查找重复元素(中等)求二次方(入门)查找元素位置(入门)避免全局变量(入门)引言牛客网这个前端笔试题库，可以说这60道是最基础的了，也是考察的东西比较杂，有时间4天差不多就可以刷完，巩固基础还是有些用的。做完题回顾一上午就可以过完一遍。现在我结合我的答案和参考的其他人的答案，在这里做一个总结，也是自己知识的整理结果。前端刷题 —— 牛客网前端题库
2021-04-13 20:11:41
918
原创 前端刷题 —— 牛客网前端题库60道详解(二)
目录引言将字符串转换为驼峰格式(中等)字符串字符统计(入门)加粗文字(中等)段落标识(简单)设置文字颜色(较难???)查找数组元素位置(简单)数组求和(入门)移除数组中的元素(简单)移除数组中的元素(中等)添加元素(简单)引言牛客网这个前端笔试题库，可以说这60道是最基础的了，也是考察的东西比较杂，有时间4天差不多就可以刷完，巩固基础还是有些用的。做完题回顾一上午就可以过完一遍。现在我结合我的答案和参考的其他人的答案，在这里做一个总结，也是自己知识的整理结果。前端刷
2021-04-13 16:51:29
1781
1
原创 前端刷题 —— 牛客网前端题库60道详解(一)
目录引言修改 this 指向(中等)获取 url 参数(较难)dom 节点查找(入门)根据包名，在指定空间中创建对象(入门)数组去重(较难)斐波那契数列(入门)时间格式化输出(中等)获取字符串的长度(简单)邮箱字符串判断(中等)颜色字符串转换(中等)引言牛客网这个前端笔试题库，可以说这60道是最基础的了，也是考察的东西比较杂，有时间4天差不多就可以刷完，巩固基础还是有些用的。做完题回顾一上午就可以过完一遍。现在我结合我的答案和参考的其他人的答案，在这里做一个总结，也是自己
2021-04-13 16:46:04
6715
2
原创 gridsome develop Gridsome v0.7.23 Initializing plugins... Error: No transformer for ‘text/markdown
目录出错现象出错原因解决方案出错现象这个报错是我在使用Gridsome创建项目之后，使用md文件作为数据导入，用cnpm先安装了@gridsome/source-filesystem插件，为了正确编译又引入了插件@gridsome/transformer-remark 之后没有起作用的问题。> gridsome developGridsome v0.7.23Initializing plugins...Error: No transformer for 'text/markd
2021-01-23 14:44:12
250
1
原创 Job for docker.service failed because the ../ Failed to start Docker Application Container Engine.
目录出错现象出错原因解决方案出错现象这个报错是我配置镜像加速daemon.json之后重启docker失败报的错误报错信息# systemctl restart dockerJob for docker.service failed because the control process exited with error code.See "systemctl status docker.service" and "journalctl -xe" for details.#
2021-01-14 11:12:00
171
原创 GIT实操手册 —— 所以到现在合并分支你只会用 git merge 吗
目录实践是检验真理的唯一标准git merge 合并分支创建分支和提交记录进行合并解决冲突回滚代码补充操作再来看看使用 git rebase 合并分支创建分支和提交记录进行合并处理冲突版本回滚git rebase 还有什么优化的空间吗?**为什么要对版本进行合并?****如何对代码进行合并呢?**git merge VS. git rebase 总结相同的地方不同的地方为什么要推荐使用 git rebase 呢?这里还有几点重要的说明我们现在分支合并想到最多的就是git merge，还有一个合并代码的命令
2020-12-20 00:50:32
358
1
原创 GIT实操手册 —— 如何做到精准回滚
目录一、如何将在工作区中修改的文件进行回滚（git checkout）恢复单个文件恢复所有文件编译器：VSCcode 源代码管理二、如何将暂存区修改的文件进行回滚（git reset）恢复暂存区指定文件到工作区恢复暂存区所有的文件到工作区编译器：VSCcode 源代码管理三、如何将提交后的文件进行回滚（git reset、git revert）将刚提交的版本回滚到未提交状态回滚到以前指定版本四、远程机器如何进行回滚方法一：先git reset回滚到本地，然后再强制push到远程。方法二：先git rever
2020-12-19 16:28:38
255
1
原创 GIT实操手册 —— Git Tag是时间的里程碑
目录为什么有必要使用Git Tag?git tag的基本操作git tag的分类轻量级标签创建带有说明的标签git tag的作用那么问题来了？为什么有必要使用Git Tag?每一个提交都有一个commitID，但是每次记录commitID都很复杂，使用git tag可以在一些重要的版本和修改中加入一个标识，可以很快速的找到我们需要的版本。git tag和git commitID的作用，就和IP地址和域名的作用是一样的，一个 git tag 对应一个commitID，命名的时候不能重复。git
2020-12-19 15:46:54
152
1
原创 GIT实操手册——手把手教你如何解决commit太多的情况
目录背景方法一：追加commit(提交不要新建commit)Step1：先git log看之前的commit记录、Step2：将当前代码提交到暂存区Step3：进入提交信息界面Step4：提示提交成功Step5：检查是否提交完毕Step6：提交到远程仓库方法二：合并需要的commitStep1：查看log，我们要合并几条commitStep2：进行合并操作Step3：修改commit messageStep4：进行验证背景我们在开发过程中，及时提交commit这个其实是一个比较好的习惯，就和我们需要经常
2020-12-18 22:03:39
2824
2
原创 Fira Code字体——在PC+VSCode中使用
目录下载字体VSCode中设置效果参考下载字体github-FiraCode下载压缩包zip -> 解压 -> distr -> 目录下面的字体全部安装，windows应该安装ttf就可以VSCode中设置设置 -> font -> Editor:Font Ligatures 在setting.json中编辑 -> 末尾添加者两个之后重启即可"editor.fontFamily": "Fira Code","editor.fontLigatures": tr
2020-12-02 11:38:28
428
原创 端口被占用——如何杀死指定端口运行的程序
目录问题描述问题解决1. 运行cmd2. 去指定目录下3.可以查看所有端口获取PID4.也可以用端口准确定位获取PID5.杀死运行的程序6.重新运行问题描述因为启动一个vue项目的时候，程序监听了9000端口，再启动会报错，说端口已经被占用。问题报错是Error: listen EADDRINUSE 127.0.0.1:9000问题解决解决的思路就是把9000端口运行的程序给杀死。1. 运行cmd【win】+ r (运行)–> cmd2. 去指定目录下cmd中输入cd c:
2020-12-02 11:35:57
1610
原创 npm publish —— 发布npm包
目录一、在npm官网注册账户二、在填写的邮箱中验证邮箱三、在命令行中登录四、使用npm源五、进入需要发布的目录发布项目六、修改更新版本记录一次发布npm包的过程以做参考一、在npm官网注册账户进入进行注册，如果已经注册进入跳到第三步二、在填写的邮箱中验证邮箱如果注册之后没有验证邮箱，那么发布的时候会报错三、在命令行中登录npm login# Username: authorname# Password:# Email: (this IS public) email@em
2020-12-02 11:32:24
1099
原创 nvm——node版本管理
nvm是什么？node版本管理工具，可以在同一台电脑上安装多个不同的node版本，并且随意切换。下载这个是安装windows版本nvm-gitHub下载地址 其中，可以看到nvm-noinstall.zip：绿色免安装版，但使用时需进行配置。nvm-setup.zip：安装版，推荐使用安装注意，在安装之前需要先卸载nodejs下载到本地之后进行安装，一路next之后完成安装检验在命令行中写nvm看是否能正常运行命令nvm version —— 查看当前nvm版本nvm
2020-12-02 11:31:18
108
原创 nodemon —— Node服务自动重启实时刷新
目录起步使用nodemon作用就是实时更新，不用每次都运行一个node <filename>了起步github-nodemonnpm-nodemonnpm i -g nodemon使用nodemon <filename>举个例子：// 00.jsconsole.log("test")nodemon .\00-parpare.js# [nodemon] 2.0.4# [nodemon] to restart at any time, ent
2020-12-02 11:30:37
244
原创 nrm——管理npm源不再繁琐
目录什么是nrm？nrm有什么特点？如何安装？如何使用？查——浏览所有配置的镜像源切——切换不同的镜像源增——添加私有的镜像源删——删除不需要的镜像源测——可以测试不同镜像源的速度什么是nrm？nrm——npm的镜像源管理工具nrm有什么特点？专门管理镜像源，之前都是从网上找到taobao的镜像源的网址，然后copy，现在有了这个，可以一个命令直接切换。而且外网下载资源速度慢，切换淘宝源，下载资源非常的快。npm nrm如何安装？so easy！！npm i nrm -g如何使用？查—
2020-12-02 11:29:50
127
原创 ERROR in ./src/App.vue Module Error (from ./node_modules/vue-loader/lib/index.js): [vue-loader] v...
目录出错现象出错原因解决方案出错现象这个报错是我在用webpack+vue-loader的时候报的错误报错信息ERROR in ./src/App.vueModule Error (from ./node_modules/vue-loader/lib/index.js):[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler impleme
2020-11-30 20:39:43
15147
5
原创 使用Vue+Webpack打包图片时出现src为“[object Module]“的问题
目录出错现象出错原因解决方案出错现象这个错误是我在用vue-cli中使用webpack打包的时候，页面内容已经展示出来但是图片显示不出来，一看引用链接src为"[object Module]"的问题。报错信息出错原因也是找到了大佬的博客看到的，他说这个是file-loader的版本问题，我现在的file-loader版本是^6.2.0。原来file-loader里面有一个esModule的配置，低版本默认为false，高版本默认为true。解决方案降低file-loader版
2020-11-30 20:36:41
1075
2
原创 nodemon —— Node服务自动重启实时刷新
目录起步使用nodemon作用就是实时更新，不用每次都运行一个node <filename>了起步github-nodemonnpm-nodemonnpm i -g nodemon使用nodemon <filename>举个例子：// 00.jsconsole.log("test")nodemon .\00-parpare.js# [nodemon] 2.0.4# [nodemon] to restart at any time, ent
2020-11-19 16:22:17
484
原创 [Vue warn]： You are using the runtime-only build of Vue where the template compiler is not availa...
目录出错现象出错原因Vue的构建版本解决方案M1：将运行时版换成完整版本M2：直接使用render函数渲染出错现象这个报错是我在vue-cli项目中写vue组件用到template属性并测试的时候报出来的问题。报错信息出错原因关于Vue构建版本的问题，因为template属性不能在运行时版本中使用。Vue的构建版本运行时版：不支持template模板，需要打包的时候提前编译，把模板转换成render函数。vue-cli默认使用次版本，因为其效率高。完整版本
2020-11-17 11:21:17
111
原创 ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src Module not found: Error: C...
目录出错现象报错信息出错原因解决方案出错现象这个错误是我在用vue-cli中使用webpack打包的时候，进行环境分离操作，将webpack.config.js分成三个包webpack.common.jswebpack.dev.jswebpack.prod.js之后启动npm run serve（也就是webpack-dev-server --open）的时候报的错误，package.json文件是下面这样"scripts": { "serve": "webpack-dev-ser
2020-11-14 11:12:04
22704
原创 Cannot resolve dependency ‘snabbdom‘ or ‘snabbdom/init‘
目录出错现象出错原因snabbdom v0.7.4snabbdom v1.0.1+解决方案总结M1：将Snabbdom的版本降级成v0.7.4即可M2：使用package.json的exportsM3：将引用路径直接改为完整路径出错现象这个报错是我在安装snabbdom并导入的时候报的错误。我用了两种引用方式：CommonJSconst snabbdom = require('snabbdom')ESModulesimport { h, chunk, init } from 'snab
2020-11-13 16:14:21
330
原创 ERROR in ./src/App.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-loader/lib??vue-loade...
目录出错现象出错原因解决方案出错现象这个报错是我在用webpack+vue-loader的时候无法解析App.vue文件中<style>中css样式导致的错误源代码<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div
2020-11-07 13:53:47
22625
3
原创 Error: Cannot find module ‘webpack/lib/rules/BasicEffectRulePlugin‘
目录出错现象出错原因解决方案出错现象这个报错是我在安装webpack+vue-loader的配置中遇到的，如果你不是这个背景请绕行，不然可能无法解决你的问题。主要是安装了npm i vue-loader-plugin --save-dev引用了vue-loader-plugin导致的。E:\professer\lagou-homework\fed-e-task-02-02\code\vue-app-base\node_modules\webpack-cli\bin\cli.js:93throw e
2020-11-07 13:52:39
5318
原创 ERROR in ./src/style.less Module build failed (from ./node_modules/less-loader/dist/cjs.js): Erro...
目录出错现象出错原因解决方案出错现象这个报错是我在用webpack安装less加载器less-loader的时候遇到的问题。ERROR in ./src/style.lessModule build failed (from ./node_modules/less-loader/dist/cjs.js):Error: Cannot find module ‘less’出错原因查阅了其他人的解决，发现是安装less-loader的时候必须安装less，才可以正常工作。但是光有less-loa
2020-11-07 13:50:23
4596
原创 npm ERR! Refusing to install package with name “ “ under a package npm ERR! as the dependency you...
目录出错现象出错原因解决方案出错现象npm init -y初始化之后，安装项目npm i prettier -D报错PS E:\professer\StyleLint\Prettier> npm i prettier -D npm ERR! code ENOSELFnpm ERR! Refusing to install package with name "prettier" under a packagenpm ERR! as the dependency you're i
2020-11-07 13:48:35
841
原创 Error: .eslintrc.js » eslint-config-standard: Environment key “es2021“ is unknown
目录出错现象出错原因解决方案出错现象这个报错在环境中安装了gulp-eslint，eslint并初始化之后，在gulp中使用的时候报的错误。Error: .eslintrc.js » eslint-config-standard: Environment key "es2021" is unknownalidator.js:169:19 at Array.forEach (<anonymous>) at validateEnvironment (E:\p
2020-11-07 13:46:28
9769
原创 Error: Cannot find module ‘webpack-cli/bin/config-yargs‘解决方案
目录出错现象出错原因解决方案出错现象这个报错是我在安装webpack-dev-server之后命令行使用的时候出现的，按理这里应该出现我打包完成并且启动服务的，但是却有了报错。出错原因查阅了其他人的解决，发现是因为webpack-cli的新版本对webpack-dev-server版本的不兼容，表示很无奈：之前的版本是node -v —— v12.19.0 npm -v —— v6.14.8 webpack -v —— "^5.1.3" webpack-..
2020-11-07 12:24:47
311
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人