一切福田,不離方寸,從心而覓,感無不通。

Category Archives: Frontend

最全的手写JS面试题

本文整理了前端面试高频出现的手写源码相关的题目 其中有小编面试亲自遇到的也有其他同学帮忙补充的 整体采用 es6 语法并且以简单易懂版进行实现。

龙生   03 Dec 2021
View Details

最全的TypeScript学习指南

前言 Hello 大家好 我是鲨鱼哥 这次给大家带来的是我曾经非常嫌弃 如今却爱不释手的 TS 技术 哈哈 大家看往期文章可能已经发现鲨鱼哥之前主要是 Vue 技术栈的 然后因为 Vue2 和 TS 的结合总感觉不是很丝滑 所以我果断就在技术选型的时候去掉了 TS(其实我是觉得用起来很烦 和我之前最讨厌的 eslint 一样 各种报错让人不爽)但是 鲨鱼哥今年换了新公司 开启了全新的 react hook+ts 这一套组合拳 然后在重新认真学习并在项目里用上了 ts 之后 确实真香 哈哈 最直观的感受就是可以帮我们规避很多类型错误 更友好的提示 甚至有些方法我们根据定义的类型大概就知道作用是什么了(去掉了写注释的麻烦)况且如今大火的 Vue3 也是 TS 重构的 然后 react 和 ts 的结合就更不必说了 所以还没有开始 ts 的同学就从现在开始跟着鲨鱼哥一起来学习吧 最后欢迎大家点击 链接 加入到鲨鱼哥的前端群 内推 讨论技术 摸鱼 求助 皆可 整理不易 如果觉得本文有帮助 记得点赞三连哦 十分感谢! 1 ts 安装和编译 第一步 新建一个空文件夹用来学习 ts 第二步 全局安装 ts 和 ts-node

  第三步 生成 tsconfig.js 配置文件

  我们就先按照自动生成的 tsconfig 配置项去使用 里面的配置咱们可以先不去管他 后续熟练了再去配置 第四步 在项目下新建一个index.ts 直接写入

[…]

龙生   03 Dec 2021
View Details

TypeScript+Vue实例完全教程

功能 轮播 搜索 列表 懒加载 简单动画 loading vue-router.ts vuex.ts vue-class-component使用 vuex-class使用 xxx.d.ts声明文件 基于类的编写方式 mock数据 tsconfig.json webpack配置 vue-typescript-cli 项目地址:https://github.com/SimonZhangITer/vue-typescript-dpapp-demo 完成后的简单例子 基于类的写法加上静态类型检查,简直不能再嗨

  为什么使用TypeScript JavaScript的超集 支持所有原生JavaScript的语法 强类型语言 现在很多主流语言都是强类型的,而这点也一直是JavaScript所被人诟病的地方。使用TypeScript之后,将会在代码调试、重构等步骤节省很多时间。 比如说:函数在返回值的时候可能经过复杂的操作,那我们如果想要知道这个值的结构就需要去仔细阅读这段代码。那如果有了TypeScript之后,直接就可以看到函数的返回值结构,将会非常的方便 强大的IDE支持 现在的主流编辑器如VSCode、WebStorm、Atom、Sublime等都对TypeScript有着非常友好的支持,主要体现在智能提示上,非常的方便 可运行于任何浏览器、计算机、操作系统 强大的编译引擎 迭代更新快 不断更新,提供更加方便友好的Api 微软和Google爸爸 TypeScript是微软开发的语言,而Google的Angular使用的就是TypeScript,所以不用担心会停止维护,至少在近几年内TypeScript都会一门主流开发语言 npm下载量非常高 截止2017.12.17, TypeScript在全球范围内的npm日均下载量在30w左右,这个数字将近是vue下载量的10倍,可见TypeScript还是非常受欢迎的 TypeScript配置 本项目已经配置完毕,这里记录一下当时的踩坑过程 1. Webpack 首先需要安装ts-loader,这是TypeScript为Webpack提供的编译器,类似于babel-loader

  接着在Webpack的module.rules里面添加对ts的支持(我这里的webpack版本是2.x):

  2. tsconfig.json 创建tsconfig.json文件,放在根目录下,和package.json同级 配置内容主要也看个人需求,具体可以去typescript的官网查看,但是有一点需要注意: 在Vue中,你需要引入 strict: true (或者至少 noImplicitThis: true,这是 strict 模式的一部分) 以利用组件方法中 this 的类型检查,否则它会始终被看作 any 类型。 这里列出我的配置,功能在注释中给出

  3. 修改main.js 把项目主文件main.js修改成main.ts,里面的写法基本不变,但是有一点需要注意: 引入Vue文件的时候需要加上.vue后缀,否则编辑器识别不到 把webpack的entry文件也修改成main.ts 4. vue-shims.d.ts TypeScript并不支持Vue文件,所以需要告诉TypeScript*.vue文件交给vue编辑器来处理。解决方案就是在创建一个vue-shims.d.ts文件,建议放在src目录下再创建一个typings文件夹,把这个声明文件放进去,如:src/typings/vue-shims.d.ts,文件内容: *.d.ts类型文件不需要手动引入,TypeScript会自动加载

  到这里TypeScript在Vue中配置就完成了,可以愉快的撸代码了~ 第三方插件库 现在Vue官方已经明确提出支持TypeScript,并考虑出一个对应的vue-cli,在这之前,Vue开发团队已经开发出了一些插件库来支持TypeScript,这里简单和大家介绍一下。 Vue-Class-Component vue-class-component是官方维护的TypeScript装饰器,写法比较扁平化。Vue对其做到完美兼容,如果你在声明组件时更喜欢基于类的 API,这个库一定不要错过 ps:用了这个装饰器之后写方法不需要额外加逗号,贼嗨~~~

[…]

龙生   03 Dec 2021
View Details

解决 Nginx 部署 Vue 项目路由出现 404 的问题

代码如下:

  from:https://blog.csdn.net/peng2hui1314/article/details/106690852

龙生   05 Nov 2021
View Details

ERROR in xxx.js from UglifyJs

ERROR in xxx.js from UglifyJs 问题 ERROR in app.bundle.js from UglifyJs Unexpected token: name «element», expected: punc «;» [app.bundle.js:106,8] 在用webpack对代码打包的时候报错,在网上找到了类似的答案,还是没有解决我的问题. 能解决大部分问题的链接 https://stackoverflow.com/questions/41254538/error-in-bundle-js-from-uglifyjs http://www.cnblogs.com/aredleave/p/7586911.html https://segmentfault.com/a/1190000011212544 按照以上方法对环境进行重新配置,依然报错!

报错原因 通过代码报错原因是 babel-loader 版本问题,因为 babel-loader 用的最新的版本,和 UglifyJs 不兼容. 解决方法 通过运行下面代码对babel-loader进行重新安装(低版本). npm install --save-dev babel-loader@7 通过修改后的package.json配置文件,亲测可以正确打包,无报错现象.

  奇卡奇卡 哈哈哈 个人主页:https://kankan.fun   from:https://blog.csdn.net/qq_38025939/article/details/89576282

龙生   27 Oct 2021
View Details

vue报错:Module build failed: TypeError: this.getOptions is not a function

vue-cli构建项目使用sass报错 Module build failed: TypeError: this.getOptions is not a function 出现问题的原因是安装的sass-loader版本过高,选择安装较低版本的sass-loader即可。

  Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0. 出现问题的原因是安装的sass版本过高,选择安装4.0+版本的sass即可。

  from:https://www.cnblogs.com/chenjy1225/p/14930870.html

龙生   25 Oct 2021
View Details

vue vue-style-loader !css-loader错误

最近在学习vue框架,使用webpack打包vue项目,在执行npm run start的时候 出现如下错误: This dependency was not found: * !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-1d57e5ea","scoped":false,"hasInlineConfig":false}!stylus-loader?{"sourceMap":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./a.vue in ./src/components/a.vue To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-1d57e5ea","scoped":false,"hasInlineConfig":false}!stylus-loader?{"sourceMap":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./a.vu   解决思路: npm install sass-loader --save; npm install node-sass --save; 然后运行npm run start就可以   from:https://www.cnblogs.com/hexiaobao/p/8260858.html

龙生   25 Oct 2021
View Details

18 个杀手级 JavaScript 单行代码

1、复制到剪贴板 使用 navigator.clipboard.writeText 轻松将任何文本复制到剪贴板。

  2、检查日期是否有效 使用以下代码段检查给定日期是否有效。

  3、找出一年中的哪一天 查找给定日期的哪一天。

  4、将首字符串大写 Javascript 没有内置的大写函数,因此我们可以使用以下代码。

  5、找出两日期之间的天数 使用以下代码段查找给定 2 个日期之间的天数。

  6、清除所有 Cookie 你可以通过使用 document.cookie 访问 cookie 并清除它来轻松清除存储在网页中的所有 cookie。

  7、生成随机十六进制 你可以使用 Math.random 和 padEnd 属性生成随机十六进制颜色。

  8、从数组中删除重复项 你可以使用 JavaScript 中的 Set 轻松删除重复项。

  9、从 URL 获取查询参数 你可以通过传递 window.location 或原始 URL goole.com?search=easy&page=3 从 url 轻松检索查询参数

  10、从日期记录时间 我们可以从给定日期以小时::分钟::秒的格式记录时间。

  11、检查数字是偶数还是奇数

  12、求数字的平均值 使用 reduce 方法找到多个数字之间的平均值。

  13、反转字符串 你可以使用 split、reverse 和 join 方法轻松反转字符串。

  14、检查数组是否为空 检查数组是否为空的简单单行程序将返回 true […]

龙生   20 Oct 2021
View Details

vue中加载loading

首先在components文件夹中新建一个loading.vue组件:   1.loading.vue组件内容如下:

  css代码:

   2.app.vue中设置:

  3.在main.js中设置  

  4.在.vue组件中使用

  效果如下:   from:https://blog.csdn.net/liangmengbk/article/details/90201596

龙生   27 Sep 2021
View Details

vue中引用vant,附带样式

1、首先 npm install babel-plugin-import 和 npm install vant 2、样式在项目中的  .babelrc 文件下 ["import", {"libraryName": "vant","libraryDirectory": "es","style": true}, "vant"]]  //vant样式引用 3、在main.js中 import { Button } from 'vant'   //引用vant组件库中可用组件 Vue.use(Button )  注册组件即可。 from:https://www.cnblogs.com/1rookie/p/12660684.html

龙生   14 Sep 2021
View Details
1 9 10 11 60