项目中遇到的小问题
宋哈哈
2018. 7 本科毕业,从此步入前端。。。。。。。。。
展开
-
新建 vue3 项目报错 Cannot find module ‘./App.vue‘ or its corresponding type declarations.ts
运行起来之后,点进 main.ts 以及其他引用了 vue 文件的地方发现报错。报错原因:typescript 只能理解 .ts 文件,无法理解 .vue文件。原创 2024-02-19 10:52:00 · 1336 阅读 · 1 评论 -
pnpm add vite -D报错
【代码】pnpm add vite -D报错。原创 2023-06-07 09:42:10 · 4637 阅读 · 2 评论 -
vscode终端node版本与mac终端中node版本不一致问题
通过nvm管理多个node版本,发现终端node版本和vscode终端node版本不一致。在vscode终端中输入。原创 2023-05-24 16:34:51 · 786 阅读 · 0 评论 -
mac 安装cnpm报错internal/modules/cjs/loader.js:905
mac 安装cnpm报错。原创 2023-05-17 12:52:30 · 2757 阅读 · 2 评论 -
eslint报错Parsing error: Unexpected token =eslint
如图 配置了eslint。原创 2023-04-21 01:26:18 · 1317 阅读 · 0 评论 -
mac vscode终端node版本与系统node版本不一致问题
MacOS中vscode与系统终端默认的node版本不一致原创 2022-03-27 22:08:57 · 3059 阅读 · 0 评论 -
自己写的webpack项目如何使用可选链式操作符
一:安装转义babelnpm install --save-dev @babel/plugin-proposal-optional-chaining二:在项目根目录创建.babelrc文件配置如下内容{ "plugins": ["@babel/plugin-proposal-optional-chaining"]}三:在js中使用//链式写法if(res?.data?.obj){ // 判断data中是否有obj属性 并且非null非undefined.原创 2021-02-20 10:47:34 · 5250 阅读 · 3 评论 -
div高度固定,内容区不换行,不要滚动条
外部div:内容部分:样式 .swiper-box{ height: 30px; background-color: #161719; width: 100%; overflow: hidden; height: 30px; line-height: 30px; .swiper-content{ width: 100%; .原创 2020-12-07 17:54:06 · 299 阅读 · 0 评论 -
移动端页面点击按钮出现点击效果
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>demo</title> <meta name="wap-font-scale" content="no"> <meta name="viewport" content="width=device-width, initial-scale=1.原创 2020-08-18 18:52:48 · 2280 阅读 · 0 评论 -
纯css实现实心三角形,向右箭头
效果如下实现之前先了解一下css的一个属性:也就是说 这个属性可以设置透明的色值,举个例子:看这个形状是如何实现的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl...原创 2020-07-14 21:28:06 · 7091 阅读 · 0 评论 -
flex布局实现最后一行左对齐
最终效果如下:源代码使用vue开发:其中keyboard_word_wrap样式如下:display: flex; justify-content: flex-start; flex-wrap: wrap; max-width: 37.5rem; margin: 0 auto; padding: 2rem 0;关键代码标红,如果justify-content为center,那么效果是不规定左右自适应 效果是(因为这页面本身没做font-size自适应 所以我也懒...原创 2020-07-07 21:08:56 · 3452 阅读 · 0 评论 -
script标签中的crossorigin属性详解
在前端监控逐渐完善的今天,页面中错误日志的上报可以说对我们的日常工作带来了极大的帮助。而使用window.onerror事件来捕获 js脚本中的错误信息是 重要的手段 。但是对于跨域的资源 ,onerror事件通常会上报 "Script error"由于这并不是JavaScript的 bug,所以浏览器出于安全考虑,会主动隐藏其他域下js抛出的具体错误信息,但是onerror事件可不管 你这么多,就是直接上报 ,在不做过滤的情况下,你会在 监控平台中看到特别的"Script error"错误日志原创 2020-07-02 09:58:56 · 15297 阅读 · 0 评论 -
vuecli3打包资源在html中的引用路径问题
在默认情况下,通过vuecli打包出来的路径是绝对路径。如果想修改vuecli的默认配置,通过在vue.config.js中进行配置,关于打包路径是通过publicPath属性进行配置。如果想使用相对资源地址 则将publicPath配置为'././' 打包出来的路径就是 这样的'./static/js/aaaa.js'了...原创 2020-04-08 14:51:08 · 1395 阅读 · 0 评论 -
npm run dev报错 Module build failed: Error: Cannot find module 'node-sass'
一个项目,可能你从其他库里拉下来,或者换了一台电脑,或者出于其他原因,你需要重新安装依赖环境,有时候会遇到node-sass安装失败的情况,这个现象太正常了,比如:遇到报错不要慌,先看报错的开头,一般就能找到答案,他说没有找到这个模块 node-sass这时你可以去项目依赖node_module里边去找一下 ,发现确实没有这个包,那就重新装一下吧npmins...原创 2019-11-27 14:51:30 · 10393 阅读 · 2 评论 -
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }
运行npm run dev 时 虽然项目可以正常启动。但是报了一条提醒 如下:{ parser: "babylon" }已被弃用;我们现在将其视为{ parser: "babel" }解决方法:找项目目录的\node_modules\vue-loader\lib\template-compiler\index.js将其改为bable重新运行运...原创 2019-11-26 09:30:15 · 2073 阅读 · 0 评论 -
如何实现一个call或 apply方法,手写一个call或apply
call语法:fun.call(thisArg,arg1,arg2,...),调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。apply语法:func.apply(thisArg,[argsArray]),调用一个函数,以及作为一个数组(或类似数组对象)提供的参数。Function.call按套路实现call核心: 将函数设为对象的属性...原创 2019-11-25 21:14:16 · 1046 阅读 · 0 评论 -
如何实现一个JSON.parse ,手写一个JSON.parse
JSON.parse()方法用来解析JSON字符串,构造由字符串描述的JavaScript值或对象。提供可选的reviver函数用以在返回之前对所得到的对象执行变换(操作)。语法JSON.parse(text[, reviver])参数text要被解析成JavaScript值的字符串,关于JSON的语法格式,请参考:JSON。reviver可选转换器, 如果传...原创 2019-11-21 09:40:08 · 1848 阅读 · 2 评论 -
如何实现一个JSON.stringify() ,手写JSON.stringify
JSON.stringify()方法将一个 JavaScript 值(对象或者数组)转换为一个 JSON 字符串,如果指定了 replacer 是一个函数,则可以选择性地替换值,或者如果指定了 replacer 是一个数组,则可选择性地仅包含数组指定的属性。语法JSON.stringify(value[,replacer[,space]])参数1.value将要序列化成 一...原创 2019-11-19 08:51:09 · 2423 阅读 · 0 评论 -
如何实现一个new,手写一个new操作符
要想手写一个new 需要先知道new这个关键字做了哪些事情 它创建了一个全新的对象。 它会被执行[[Prototype]](也就是__proto__)链接。 它使this指向新创建的对象。 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。 如果函数没有返回对象类型Object(包含...原创 2019-11-19 08:36:23 · 951 阅读 · 0 评论 -
前端网页字体科普
字体分类常见的字体可以分为两类:衬线体、无衬线体。1、serif(衬线体):在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。常见的衬线体有:•宋体、楷体•Times New Roman2、sans-serif(无衬线体):笔划粗细基本一致,只剩下主干,造型简明有力,起源也很晚。适用于标题、广告等,识别性高。常见的无衬线体有:•黑体•Wind...原创 2019-11-15 09:39:30 · 2946 阅读 · 1 评论 -
关于h5唤起App的方式
唤起 App 应该是很常见的问题了。我们在开发 H5 的时候,有一些链路上的功能在 H5 不支持,只能去 App 才能完成。比如,下单、支付等功能。那么在更多的场景能够唤起 App 就显得很重要了。 判断浏览器,动态加载对应浏览器的下载逻辑 通过universal link、URL Scheme、a 标签、iframe几种方式找出最适合这个浏览器的唤起方式。 如...原创 2019-11-15 08:55:29 · 3199 阅读 · 1 评论 -
chrome开发工具各种调试的办法
一:代码格式化有很多css/js的代码都会被 minify 掉,你可以点击代码窗口左下角的那个{ }标签,chrome会帮你给格式化掉。二:强制DOM状态有些HTML的DOM是有状态的,比如<a> 标签,其会有 active,hover, focus,visited这些状态,有时候,我们的CSS会来定关不同状态的样式,在分析网页查看网页上DOM的CSS样式时,我们...原创 2019-11-07 09:08:36 · 189 阅读 · 0 评论 -
vue启动报错Module build failed: Error: ENOENT: no such file or directory
vue启动项目报错,一大坨 如下Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/songmengda/Desktop/aaa/xxx-aaa/develop/gmac/node_modules/node-sass/vendor' at Object.fs.readdirSy...原创 2019-11-05 16:37:40 · 28284 阅读 · 0 评论 -
Markdown编辑工具Typora教程
1. 基本操作1.1 内容目录语法[toc]1.2 标题语法# 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 1.3 引用语法> 引用内容1> 引用内容2>> 引用内容3效果...原创 2019-11-05 11:01:59 · 246 阅读 · 0 评论 -
css动画animation详细解读
以一个小球为例 向右匀速运动200px 然后再移动回来,然后再移动到200px处 停在那里效果如下 div{ width:40px; height:40px; border-radius:50%; background:#0ff; animation:move 2s linear 3 alternate both; } @keyframes ...原创 2019-10-22 09:59:42 · 4625 阅读 · 0 评论 -
浏览器性能优化
Web 页面性能是前端开发特别需要关注的重点,评判前端 Web 页面性能的指标有很多,页面的流畅度是其中的一种,如何让页面变得 “柔顺丝滑”,要讨论起来可就是个相当有料的话题了。之前开发移动端 H5 页面的时候,就遇到过一个有趣的性能问题 —— 某个卖场页面在 IOS 手机上出现了严重的卡顿,但在安卓机型下却表现得十分流畅。归纳一下在 iPhoneX 上测试的具体表现: 页面加载时存在明显的...原创 2019-10-16 10:16:28 · 2500 阅读 · 0 评论 -
前后端分离有什么好处?为什么要前后端分离?这是我见过的最好的答案
一、前端前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IOS等等)打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。核心思想是前端html页面通过ajax调用后端的restufu...原创 2019-04-26 09:12:24 · 5761 阅读 · 1 评论 -
input标签type为number时 去除向上和向下的箭头
<input type="number" ...><style> input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"]{ -...原创 2019-04-26 09:20:58 · 508 阅读 · 0 评论 -
移动端h5点击按钮复制指定的文本至手机的剪切板
一般在移动端页面,会禁止页面元素可选择。但是也会出现这种需求。点击复制按钮 复制前边的文案。这里给大家推荐一个js插件。传送门===》clipboardjs实现h5复制功能使用步骤:安装 npm install clipboard --save 引入import ClipboardJS from 'clipboard' 使用 ...原创 2019-04-22 21:31:44 · 3532 阅读 · 1 评论 -
移动端星星评分组件,支持半颗星,1/4颗星,展示与选择
写了一个简单的评分组件 ,已封装为组件 有注释,目前满足自身需求源代码地址:github地址原创 2019-05-10 11:11:53 · 1592 阅读 · 0 评论 -
ios低版本有多少用户在使用,有多少量?
这个数据在苹果的官网上并没有找到具体的数据,苹果官网只公布了最新ios系统占比:https://developer.apple.com/support/app-store/对于其他的 比如ios8.0 、10以下系统占有量有多少,并没有公布。方式一:我们可以使用微信公众平台去查看(由于目前我个人的小程序账号已经注销,没办法进去看,所以一些开发过小程序的人应该有知道如何查看)方式...原创 2019-06-20 19:21:48 · 1276 阅读 · 0 评论 -
什么是外边距重叠?重叠的结果是什么?
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。(当两个垂直外边距相遇时,它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。)情况一:当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。情况二:当一个元素包含在另一个元素中时(...原创 2019-07-25 08:40:03 · 2038 阅读 · 0 评论 -
js计算浮点数,js计算小数误差解决方案,js计算丢失精度,decimal.js的使用
众所周知,计算机在计算浮点数的过程中会丢失精度。这在编程语言中都会出现,js也不例外。0.1+0.2并不等于0.3这就导致了在某些情况下,如果单纯的采用四舍五入toFixed 会出现我们不想要的结果。尤其在计算金额方面,一分都不能出错。为此java中的JDK中提供了BigDecimal类来解决丢失精度的问题。js中也有这样一个库,叫做decimal.js。特点:整数型...原创 2019-08-27 09:26:14 · 535 阅读 · 0 评论 -
fileheader-vscode插件,自动生成头部注释 koroFileHeader
给使用vscode的开发的小伙伴分享一个自动生成头部注释的插件,使用效果如下: 生成这个注释的快捷键是ctrl+alt+i 1.安装 在vs商店搜索koroFileHeader 2.进入vscode的设置里边搜索fileheader.customMade 3.双击左边的设置,然后去右边编辑,他会取代默认的 4.保存一下,然后去ctrl+alt...原创 2018-09-06 10:09:08 · 36655 阅读 · 3 评论 -
获取cookie和设置cookie,设置cookie有效时间
整理一份操作cookie的代码export const docCookies = { getItem: function (sKey) { return decodeURIComponent(document.cookie.replace(new RegExp('(?:(?:^|.*;)\\s*' + encodeURIComponent(sKey).replace(/[\-...原创 2019-03-21 22:02:12 · 4058 阅读 · 0 评论 -
flex布局实现上下固定,中间滑动的布局方式
例如这样的一个页面,希望有个头图,有个底部的底栏,中部内容区域可滑动。简单介绍一下如何实现: 固定头部和尾部,中间部分可滑动,使用flex布局 1.设置html,body高度为100% 2.设置最外层div的布局方式为弹性布局display:flex; 3.设置最外层div的主轴方向为flex-direction: column;主轴为垂直方向,起点在上...原创 2019-02-20 22:20:11 · 8279 阅读 · 0 评论 -
HTML5的popstate、pushState、replaceState如何玩转浏览器历史记录
一、popstate用来做什么的?简而言之就是HTML5新增的用来控制浏览器历史记录的api。二、过去如何操纵浏览器历史记录?window.history对象,该对象上包含有length和state的两个值,在它的__proto__上继承有back、forward、go等几个功能函数在popstate之前,我们可以利用back、forward、go对history进行后退和前进操作。例...原创 2018-10-22 09:46:16 · 14287 阅读 · 0 评论 -
js中字符串的方法:replace;替换字符串中的某个字符
定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。 语法stringObject.replace(regexp/substr,replacement)参数 描述 regexp/substr 必需。规定子字符串或要替换的模式的 RegExp 对象。请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不...原创 2018-10-22 09:38:52 · 14915 阅读 · 0 评论 -
手机(移动端)点击事件失效问题(微信?使用iscroll?)
1.问题重现: 微信ios内置浏览器认为,不是button a标签之外的非点击元素 比如div 是不可点击的,比如给div绑了click事件 在微信里边是不生效的,解决办法是给这个div元素添加一个样式属性cursor: pointer; 那么我今天遇到的问题当然没有这么简单。 2.弹框中某个区域内内容很多,我们希望使用overflow:scroll;当超过之后,可以滚动查...原创 2018-10-10 08:55:23 · 10428 阅读 · 0 评论 -
如何查看手机app的ua及版本信息
在app内 打开 http://www.ip138.com/useragent/ 这个地址会看到如下展示 这里包含了所有关于window.navigator.userAgent的信息原创 2018-10-18 18:51:04 · 12647 阅读 · 0 评论