web前端
关注
分享
扫一扫
文章平均质量分 80
苦呀君
前端萌新
展开
-
Vue3：naive-ui组件自动引入后ts定义类型丢失解决方案
使用naive-ui按需引入时经常单页面引入过多组件，并且有时漏掉一个引入，也不回报错，排查起来很麻烦，就改成了官方的自动引入方法：使用一段时间后发现不对劲，怎么naive最爽的ts定义怎么崩了，所有的组件类型都改成any了：在网上找相关内容也没有类似解决方案，心情瞬间不爽了最终自己摸索，完美解决：在查找定义类型时，发现有两处类型定义：目录均为naive包下的volar定义，因为一个any定义导致全局的组件定义均覆盖成了any，删除这个定义就可以恢复，但是这个毕竟是node_modules包内原创 2022-06-15 15:20:41 · 3508 阅读 · 1 评论 -
vue：如何用js（h()函数/VNode类型）渲染dom
vue版本：3.x setup语法 + ts原创 2022-05-27 17:02:16 · 2458 阅读 · 0 评论 -
vue-cli4 scss安装使用
今天新建一个cli4的项目，安装scss时总是报错，百度各种也没有解决，最终clone了一个成型的项目install了一下，发现竟然能正常使用scss，一步步拍错最终完成了安装，分享一下我遇到的错误。项目版本"devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-service": "~4.5.0", "babel-eslin原创 2021-04-21 17:55:31 · 2685 阅读 · 3 评论 -
微信：网站应用第三方微信扫码登录实现
官方文档：微信开放平台网站应用文档项目框架：VUE1. 流程大体流程如下：2. 平台申请首先要在官方微信开放平台申请创建网站应用：微信开放平台-网站应用开发审核通过后，就可以在：管理中心-网站应用 下查看创建的网站应用其中需要的用到的参数如下所示：AppID、AppSecret、授权回调域：3. 前端代码实现（VUE为例）首先要引入 wxLogin 的js文件，在 /public/index.html 中，添加引入：<body> <noscript>.原创 2020-08-22 10:57:15 · 2578 阅读 · 0 评论 -
webpack：Code Splitting 打包项目分割文件，优化页面加载
参考文章：知乎：Webpack 大法之 Code Splitting来源项目：vue-element-adminRuoYi下图左侧为为分割的打包，右侧为分割的打包，很明显的看出，右侧将element和echarts这两个比较大的包从其中分离出来：而这种做最直接明显的优势就是，像element及echarts这种很大的文件，在很大的情况下是不会改变内容的，比如我们在一个页面的功能修改了一下，打包上传，如果未分割的打包，浏览器会发现这个js文件有变动了，就会重新加载很大的几百KB甚至上M的js.原创 2020-08-20 10:58:50 · 2261 阅读 · 0 评论 -
Vue：首屏加载页实现
众所周知vue项目通常首屏加载会非常慢，在浏览器加载资源时，可以在首屏加入一个loading页面。首先找到在根目录下的 /pulic/index.html：在 index.html 中找到我们的id为app的div元素：示例修改如下：<!-- public/index.html --><!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <me原创 2020-08-19 15:44:31 · 2580 阅读 · 1 评论 -
高德地图JSAPI Loader使用攻略
高德地图api文档：https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare安装安装推荐使用 JSAPI Loader 进行加载，使用npm安装，引入包的大小非常小。按 NPM 方式使用 Loader安装：npm i @amap/amap-jsapi-loader --save// 官方文档中加了-dev字段，加了-dev字段就只能在本地的时候使用，部署到服务器后将不引入包使用：import AMapLoader from '@amap/a.原创 2020-06-19 10:43:17 · 13955 阅读 · 13 评论 -
vue mockjs使用方法
大部分内容参照简书文章：https://www.jianshu.com/p/1f6a3180051b安装开发依赖npm install mockjs -D安装mockjs在你的开发依赖上，因为你生产环境用的是正式的接口，安装在开发依赖上可以减少你包的大小。main.js：import './mock' //引用mock建立mock目录在 src目录 中，建立一个mock的文件夹:index.js样例index文件用于来合并mock拦截相应请求接口，并使用mock的方法模拟后端.原创 2020-05-27 14:29:05 · 489 阅读 · 0 评论 -
CSS:纯css样式实现左右两侧文字中间填充点或线（仿账单报表样式），自适应
效果图：实现原理很简单，使用flex布局，中间的填充使用border属性，看似是很多点，其实是一个盒子的border。并且flex特性可以自动适应填充的长短。html代码：<div class="text-container"> <p>交通出行</p> <p class="fill"></p> ...原创 2020-04-12 19:24:42 · 1167 阅读 · 0 评论 -
element-ui：dialog表单类型弹窗提交表单及关闭自动重置表单
今天在使用element做弹窗类型的表单时，发现提交或者关闭弹窗，表单中的v-model数据及验证的rules都不会重置，dialog写法是这样的：<el-dialog title="标题" :visible.sync="dialog.show"> <el-form ref="form" :model="formData" :rules="...原创 2020-03-26 17:40:02 · 5753 阅读 · 0 评论 -
element-ui：el-popconfirm弹出框组件确认按钮触发方法绑定
在使用element-ui时，发现弹出框要触发click事件文档与例子中也没有说明：我原本的button组件是这样的：<el-button @click="del()">删除</el-button>// del()del(){ console.log('del')}加入气泡框后：<el-popconfirm title="这是一段内容确定删除...原创 2020-02-28 15:32:41 · 36786 阅读 · 16 评论 -
（转）爬虫，其实本就是这么简单
本文转载自：爬虫，其实本就是这么简单-掘金作者：吸取我无，分享我有时至今日，大前端思想已经深入人心，很多知识都要涉及到。所以对于现在的前端儿来说也是来着不拒的，练就吸星大法的时候，尽量多的吸收知识，最后达到物尽其用的效果最近，我也是一直在学习关于爬虫方面的知识，源于之前项目中需要用到的地铁信息数据并不是用爬虫爬下来的数据，而是直接copy的尽管这些数据一时半会确实不会有太大的变化，不过...转载 2020-02-27 16:43:54 · 211 阅读 · 0 评论 -
ES6学习总结目录
本文用来记录自己ES6学习的总结目录，是自己通过在 CODECASTS的ES6视频所学习进行的总结以及自己的一些理解ES6:let&constES6:箭头函数(Arrow Function)ES6:函数参数默认值ES6:字符串模版( `` )ES6:字符串函数 startsWith() endsWith() includes() repeat()ES6:对象解构ES6...原创 2020-01-24 16:45:11 · 1570 阅读 · 0 评论 -
ES6：Map() 与 WeakMap()
Map() 、 WeakMap() 其实与 Set() 、 WeakSet() 的方法与特性大致相同，这里只是来说一下他们的不同关于Set() 与 WeakSet() ：ES6：Set() 与 WeakSet()新建一个Map()const people = new Map([['Tom', 18], [ 'Jerry', 21], ['Mario', 25]]);可以明显看出来M...原创 2020-01-24 16:31:32 · 2664 阅读 · 0 评论 -
ES6：Set() 与 WeakSet()
Set() 是ES6新增的一种类似Array的集合类型，它最标志的特性就是所有元素都是唯一的不重复的新建一个Set()const people = new Set(['Tom', 'Jerry', 'Mario']);在控制台上打印可以看到它的属性和可以使用的一些方法：sizeSet计算长度的单位是size而不是lengthadd() 与 delete() 方法从名字上可以明确...原创 2020-01-24 16:01:31 · 421 阅读 · 2 评论 -
ES6：Proxy
Proxy用于重写对象上的默认的方法语法const p = new Proxy(target, handler);target：需要代理的对象handler：一个对象，包含想要重写的操作所有的方法可以在MDN中查询：MDN处理器对象简单例子先定义一个对象：const person = { name: 'Tom', age: 20 };再定义一个Proxy实例来代理这个对象...原创 2020-01-23 21:25:52 · 253 阅读 · 0 评论 -
ES6：Generator 生成器
关于迭代器的信息，可以查看：ES6：迭代器 Iterator关于生成器，个人的理解就是一个迭代器的函数，你可以控制它每次的return内容，并且可以想迭代器一样使用 next() 方法按步进行，通过这种特性也可以达到实现可以暂停和继续运行的函数书写方式function* peoples() { yield 'Tom'; yield 'Jerry'; yield 'Mario'; ...原创 2020-01-23 16:53:35 · 223 阅读 · 0 评论 -
ES6：迭代器 Iterator
迭代器是一个统一的接口，也可以叫遍历器它的作用是使各种数据结构可被便捷的访问，它是通过一个键为Symbol.iterator 的方法来实现定义一个数组：const people = ['Tom', 'Jerry', 'Mario', 'Yoshi'];在控制台打印它，会发现它具有这样一个属性：可以进行这样的操作：const people = ['Tom', 'Jerry', 'Ma...原创 2020-01-23 16:17:51 · 509 阅读 · 0 评论 -
ES6：类 class
ES6引入了class，其跟其它语言的class大致相同，JS中的class本质是function它可以看做是语法糖1.类的声明class name { //...}2.类的定义//匿名类const a = class { //...}//命名类const b = class name { //...}3.实例化class name { //...}c...原创 2020-01-23 15:19:48 · 267 阅读 · 0 评论 -
ES6: Symbol
Symbol是新增的一种数据类型，它用于生成唯一的标志Symbol实例实例一个Symbol：const Tom = Symbol('Tom');其中括号内写的是对这个变量的描述简单应用比如你在班级里，可能有两个人都叫李狗蛋，用一个对象来记录他们的分数：const students = { '王建国' : { Chinese: 78, English: 65, math: 82 }...原创 2020-01-17 16:35:11 · 154 阅读 · 0 评论 -
ES6: Promise的AJAX应用(同步、异步理解)
为方便理解，大部分代码由省略号代替JS是单线程的语言，它所处理任务只能一个一个排着队来，而使用AJAX时，如果也要排队做任务，那么处理信息时，之前一个请求没有完成，后面的只能排着队等待，属实影响用户体验，因此设计AJAX时就想到这个问题，所以AJAX并不由JS控制而由浏览器控制，它是异步请求，...原创 2020-01-16 23:07:32 · 981 阅读 · 0 评论 -
ES6:拓展运算符(...)
es6新增拓展运算符，它主要有两种作用：合并和拆分合并比如我们定义这么一个数组：const player1 = ['Tom', '020123', 15, 23, 18, 43];用这个数组来存储Tom玩家与他的姓名，id和他的分数，我们定义三个变量来获取这三个值：const [name, id, scores] = player1;console.log(name, id, sco...原创 2020-01-15 17:03:28 · 204 阅读 · 0 评论 -
ES6:数组方法(二) find() findIndex() some() every()
先声明一个测试变量：const peoples = [ {name: 'Tom', age: 20}, {name: 'Jerry', age: 16}, {name: 'Mario', age: 19}, {name: 'Yoshi', age: 23}];1.find()find() 方法可以找到数组中符合条件的元素并返回它：const findMa...原创 2020-01-15 16:03:16 · 1545 阅读 · 0 评论 -
ES6:数组方法(一) Array.from() Array.of()
Array.form() 将可迭代对象转化为数组以数组和字符串为例，他们的原型( __proto__ )有所不同：其所能使用的方法（仅截取部分）也各不同：而通过 Array.form() 方法，则可以将 可迭代对象 转化为数组，可以使用数组的丰富强大的各种方法了：//以字符串为例const arr=[1,2,3,4,5];const str = '123456';console....原创 2020-01-15 15:29:18 · 2318 阅读 · 2 评论 -
ES6:for of 循环
先定义一个测试用的数组：const peoples = [ 'Tom', 'Jerry', 'Mario', 'Yoshi'];最基本的for循环通过定义一个索引值 i 来循环：for(let i = 0; i < peoples.length; i++) { console.log(peoples[i]); //Tom Jerry Mario Yoshi}数组forEac...原创 2020-01-15 14:45:09 · 209 阅读 · 0 评论 -
ES6:数组解构
当获取数组元素时，会通过索引获取：const users = ['Tom', 'Jarry', 'Mario'];const user1 = users[0]; //Tomconst user2 = users[1]; //Jarryconst user3 = users[2]; //Marioes6中通过数组解构可以这么改写：const users = ['Tom', 'Jarr...原创 2020-01-14 22:26:47 · 503 阅读 · 0 评论 -
ES6:对象解构
当从一个对象中获取属性时，会进行这样操作：const p1 = { name: 'Tom Shmith', age: 20, familly: { father: 'Jack Shmith', mother: 'Mary Shmith' }}const name = p1.name;//Tom Shmithconst age = p1.age;//20const fat...原创 2020-01-14 14:23:42 · 457 阅读 · 1 评论 -
ES6:字符串函数 startsWith() endsWith() includes() repeat()
1.startsWith()startsWith() 方法可以检测字符串开头，有两个参数，第一个为匹配的字符串，第二个为起始位置（以0为开始），省略则为0开始：const str = '12345abcdEF!$%';console.log(str.startsWith('123')); //trueconsole.log(str.startsWith('abc', 5)); //tru...原创 2020-01-14 13:53:26 · 597 阅读 · 0 评论 -
ES6:字符串模版( `` )
在ES6之前，要在字符串中加入变量，需要这么写：var name = 'Tom';console.log('hello ' + name + ',how are you');//hello Tom,how are you而使用字符串模版，可以极大方便的书写：console.log(`hello ${name},how are you`);//hello Tom,how are you...原创 2020-01-14 13:25:00 · 240 阅读 · 0 评论 -
ES6:函数参数默认值
1. 逻辑或( || )实现默认值在es6之前，逻辑或可以做到函数的参数设置默认值：function showName(name) { var n = name || 'Tom'; console.log(n);}showName();//Tom逻辑或具有一个隐藏的特性，它能够找到第一个真值表达式（即不为false）并返回它var name = null || 'Tom' || ...原创 2020-01-13 17:20:22 · 3894 阅读 · 0 评论 -
ES6:箭头函数(Arrow Function)
1.语法通常书写匿名函数是这样的：function (){ //...}改写为箭头函数：() => { //...}带参数的改写：//单个参数(x) => { //...}//单个参数可省略()x => { //...}//多个参数(x, y, z) => { //...}总结起来就是：function去掉，()后加=&g...原创 2020-01-11 16:20:21 · 405 阅读 · 0 评论 -
ES6:let&const
与var对应，ES6新增两种声明变量的关键字let和const，本篇用来记录其特性1.块级作用域var声明的变量作用域为函数作用域，如下所示：function getNum(){ var num = 10; console.log(num);//10}getNum();console.log(num);//referenceErrorlet和const声明的变量作用域为块级作...原创 2020-01-11 14:08:14 · 190 阅读 · 0 评论 -
JS：数组的filter()方法实现简单的搜索功能
直接上效果图和代码<body> <!-- 搜索组件 --> <input type="text" id="searchBox"> <button id="searchBtn">搜索</button> <!-- 搜索结果展示区域 --> <ul id="searchResult"...原创 2019-12-19 15:16:26 · 4059 阅读 · 0 评论 -
JS：array数组增、删方法
栈方法 push() pop()js中数组有出栈入栈的方法，也就是向“数组栈”中入栈、出栈，"栈"简单来说就是添加与删除都会从后面一个一个来push() 方法会返回入栈后的数组长度，并将内容添加到数组后var students=["Tom","Gary","Lucy"];alert(students.push("Jack","Mario"));//5alert(students);//T...原创 2019-12-17 21:39:47 · 272 阅读 · 0 评论 -
css:憨憨也能学会的CSS3渐变（Gradients）
渐变这个东西看起来很炫酷，高大上，但对于小白的我，一看到代码，瞬间。。。菜鸟教程对渐变的使用是这样的：好像还看得懂，我觉得我可以！然后找一找大佬们的小Demo（https://blog.youkuaiyun.com/huantuo4908/article/details/70209224）这是什么东西？渐变怎么还能搞成条纹背景用了？然后再看看更复杂点的代码（https://leaverou.g...原创 2019-11-24 17:47:50 · 262 阅读 · 0 评论 -
css:纯CSS极少代码实现打字动画效果（有缺陷）
直接上效果图：代码：<style> /* 通用属性 */ .common{ /* 盒子高度与行高一致， 2em是为了不让底部出现下一行文字的头部一部分 */ height: 2em; line-height: 2em; /* 强制换行，强制拆解英文单词 */ ...原创 2019-11-07 17:54:25 · 212 阅读 · 0 评论 -
css:shadow阴影（box-shadow&text-shadow）
前言css3中新增两种阴影，分别是box-shadow&text-shadow。从字面上意思即盒子阴影和文本阴影，本文主要内容简单的介绍一下阴影的使用。一、box-shadowW3school中的语法为：box-shadow: h-shadow v-shadow blur spread color inset;/* h-shadow:水平阴影的位置，必选，允许为负 v-s...原创 2019-11-03 14:36:34 · 561 阅读 · 1 评论 -
css:border样式制作几何图形（圆形&三角形）
前言html中制作几何图形的方法有很多，canvas，SVG等等。我们可以运用css的border样式来制作一些常见的几何图形，相对于canvas来说只使用css就能实现，相对于SVG来说便于理解，上手容易。常见的几何图形总体可以分为两种，一种是有棱角的（多边形）和边为弧线的（圆），稍微复杂一点的类型像星星之类的也可以理解为是这两种类型的拼接而成的。三角形-bordercss制作三角形其...原创 2019-11-02 17:28:46 · 1851 阅读 · 0 评论