笔记
关注
分享
扫一扫
文章平均质量分 83
wuyxinu
持续更新前端知识点合集以及各种前端知识。关注一下⑧
展开
-
我不知道的那些HTML和CSS知识（一）
记录一些我不清楚的玩意。原创 2022-07-30 12:27:06 · 1473 阅读 · 1 评论 -
Vue 不加载字体包 导致elementUI的icon显示为正方形小框框问题解决
在一次开发任务中遭遇的一个问题正常使用 element-ui的icon时却发现不知道为什么显示都为正方形小框框于是，我就将element-ui 版本由 2.12.0 提升为 2.15.2但是无法解决这个问题失败Vue.config.js 配置问题也就是 webpack的配置问题通过将vue-cli预设配置弹出的操作，我查看了一下 Vue-cli 预设Webpack配置，和我自己的webpack配置，没看出问题来。感觉一切正常...原创 2022-06-08 17:31:13 · 6526 阅读 · 2 评论 -
Vue3+TypeScript从入门到进阶（八）——项目打包和自动化部署——附沿途学习案例及项目实战代码
一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l原创 2022-05-29 18:37:47 · 1566 阅读 · 1 评论 -
Vue3+TypeScript从入门到进阶（七）——项目实战——附沿途学习案例及项目实战代码
一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l原创 2022-05-29 18:28:07 · 3898 阅读 · 0 评论 -
Vue3+TypeScript从入门到进阶（六）——TypeScript知识点——附沿途学习案例及项目实战代码
一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l原创 2022-05-29 18:18:29 · 3094 阅读 · 0 评论 -
Vue3+TypeScript从入门到进阶（五）——Vue3基础知识点（下）——附沿途学习案例及项目实战代码
一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l原创 2022-05-29 18:07:38 · 1015 阅读 · 0 评论 -
Vue3+TypeScript从入门到进阶（四）——Vue3基础知识点（中）——附沿途学习案例及项目实战代码
一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l原创 2022-05-29 17:37:52 · 872 阅读 · 0 评论 -
Vue3+TypeScript从入门到进阶（三）——Vue3基础知识点（上）——附沿途学习案例及项目实战代码
一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l原创 2022-05-29 17:05:52 · 2691 阅读 · 1 评论 -
Vue3+TypeScript从入门到进阶（二）——Vue2和Vue3的区别——附沿途学习案例及项目实战代码
一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l原创 2022-05-10 09:31:53 · 3148 阅读 · 0 评论 -
Vue3+TypeScript从入门到进阶（一）——Vue3简介及介绍——附沿途学习案例及项目实战代码
一、简介二、Vue2和Vue3区别见后续文章三、Vue知识点学习见后续文章四、TypeScript知识点见后续文章五、项目实战见后续文章六、项目打包和自动化部署见后续文章七、沿途学习代码地址及案例地址1、沿途学习代码地址https://gitee.com/wu_yuxin/vue3-learning.git2、项目案例地址https://gitee.com/wu_yuxin/vue3-ts-cms.git3、项目访问地址http://101.34.91.130:8330/l原创 2022-05-07 21:03:05 · 5908 阅读 · 0 评论 -
Webpack从入门到进阶（三）---附沿路学习案例代码
文章目录Webpack从入门到进阶（三）---附沿路学习案例代码一、Webpack简介1、前端发展的几个阶段2、前端三个框架的脚手架3、Webpack是什么？4、webpack和vite5、vue-cli-service运行过程6、Webpack的官方文档7、Webpack的依赖和安装8、webpack默认打包9、Webpack配置文件10、Webpack依赖图二、Webpack知识点七、DLL1、DLL认识、打包和使用2、Terser3、Tree Shaking4、HTTP压缩八、打包分析和webpack原创 2022-03-02 09:43:54 · 1031 阅读 · 0 评论 -
Webpack从入门到进阶（二）---附沿路学习案例代码
文章目录Webpack从入门到进阶（一）---附沿路学习案例代码一、Webpack简介1、前端发展的几个阶段2、前端三个框架的脚手架3、Webpack是什么？4、webpack和vite5、vue-cli-service运行过程6、Webpack的官方文档7、Webpack的依赖和安装8、webpack默认打包9、Webpack配置文件10、Webpack依赖图二、Webpack知识点四、Babel的深入解析1、认识Babel2、polyfill3、React和Typescript的支持4、ESLint5、原创 2022-03-01 09:29:26 · 743 阅读 · 0 评论 -
Webpack使用ReactRefreshWebpackPlugin对JSX文件进行本地热更新解析时 $RefreshSig$ is not defined
前提最近在进行Webpack5学习时，学习到HMR，也就是模块热替换，也叫模块热更新的时候，遇到了一个问题。问题在进行开发环境内模块热更新的时候，React是借助于React Hot Loader来实现的HMR，目前已经改成使用react-refresh来实现了。于是乎，我进行了以下代码的编写// webpack.config.jsconst path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin原创 2022-02-19 00:10:15 · 2601 阅读 · 0 评论 -
数据可视化-echarts入门、常见图表案例、超详细配置解析及项目案例
数据可视化-echarts入门、常见图表案例及项目案例一、简介一、数据可视化简介什么是数据可视化？数据可视化是将数据库中每一个数据项作为单个图元元素表示，大量的数据集构成数据图像，同时将数据的各个属性值以多维数据的形式表示，可以从不同的维度观察数据，从而对数据进行更深入的观察和分析；主要是借助于图形化手段，清晰有效地传达与沟通信息。二、echarts简介ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备原创 2022-02-13 01:29:29 · 5653 阅读 · 3 评论 -
emmet语法简介及在Vscode中使用Emmet快速编辑代码
文章目录Emmet语法一、Emmet语法简介1、什么是Emmet？二、基础用法1、元素(Elements)2、文本操作符(Text)3、属性操作符(Attribute operators)4、嵌套操作符(Nesting operators)5、分组操作符(Grouping)6、乘法(Multiplication)7、自动计数(numbering)三、常见用法及举例1.生成后代元素：>2.生成兄弟元素：+3.生成上级元素：^4.生成多个元素：*5.生成类名和id：. 和#6.生成文本内容：{}7.生成属原创 2021-04-25 23:47:08 · 1757 阅读 · 1 评论 -
JavaScript设计模式浅析
JavaScript设计模式浅析JavaScript设计模式浅析一、工厂模式1、简单的工程模式2、工程模式实例二、建造者模式1、建造者模式例子三、单体模式1、普通创建对象方式2、单体模式创建对象四、装饰器模式1、装饰器模式例子五、组合模式1、组合模式例子JavaScript设计模式浅析一、工厂模式工程模式是一种比较简单的设计模式，主要用来创建对象用的1、简单的工程模式//1.简单的工程模式.html<!DOCTYPE html><html lang="en"><原创 2021-04-25 16:48:06 · 2108 阅读 · 8 评论 -
elementUI 表单校验在await中变成异步的情况
引言最近，在项目中遇到了一个问题。在表单校验中调用await方法，并调用接口，在得到接口的返回值时，返回一些数值给上一层函数。但是由于elementUI的表单验证内部的某些原因，导致本该是同步的方法变成了异步的。直接上代码按照正常的理解，这个地方应该是没有问题的，但是从结果上却是啪啪打脸。一直拿不到应该拿到的结果而后自己写了个demo测试async buttonTest() { let submitLess = false submitLess = await this.testTest(原创 2021-03-18 16:37:07 · 5805 阅读 · 4 评论 -
Vue页面内修改外部引进组件CSS(局部修改)
前言在实际的Vue项目中，我们经常需要引进一些外部组件，elementUI, ant-designed，之类的，而且我们总需要在某些下，对这些个组件的某些样式进行修改（不影响全局样式的情况下修改）实现第一种在选择器前面加个id选择器来限制<template> <div id ="wrapper"> <el-dialog></el-dialog> </div></template><style>#wra原创 2021-02-28 20:57:14 · 3003 阅读 · 0 评论 -
React中的setState的同步异步与合并
文章目录前言引入同步和异步合并浅析原理图总结最后再看一道常见面试题前言这篇文章主要是因为自己在学习React中setState的时候，产生了一些疑惑，所以进行了一定量的收集资料和学习，并在此记录下来引入使用过React的应该都知道，在React中，一个组件中要读取当前状态需要访问this.state，但是更新状态却需要使用this.setState，不是直接在this.state上修改，就比如这样：//读取状态const count = this.state.count；//更新状态thi原创 2021-02-20 23:59:45 · 4389 阅读 · 2 评论 -
Windows 设置vscode 的 user snippets 片段
如题，最近在学习React，想着每次都把一些代码粘贴来粘贴去，很麻烦，所以，就想着用一下Vscode的超好用功能 snippet 功能，也就是你一打开空文件时，可以直接通过一些快捷的输入生成一些必要的，但没必要每次都打的代码。相当好用1、设置路径英文版：在vscode界面找到 file—>preference---->user snippet—>html.json中文版: 在vscode界面找到 文件—>首选项---->用户片段—>html.json快捷键版:1原创 2021-02-11 12:33:08 · 936 阅读 · 0 评论 -
ES6展开运算符(...)
看到一道面试题里面，有 const newBooks = [...this.state.books] 用了展开运算符，顺便来记录一下展开运算符,将一个数组转为用逗号分隔的参数序列现在有两个数组[1, 2, 3, 4]和[5, 6, 7]，想要将两个函数拼接成一个新的函数。//es5的写法let arr1 = [1, 2, 3, 4];let arr2 = [5, 6, 7];let arr = arr1.concat(arr2);console.log(arr)//[ 1,原创 2021-02-10 01:07:19 · 555 阅读 · 1 评论 -
Flexible(flex)布局入门到彻底理解
一.简介一、概述浮动在移动布局中不再重要，flex盒模型越来越重要。flexbox经历过三个版本，主要区别是2009年到2012年之间的语法变化。最新的语法和现在规范是同步的（例display:flex和“flex-{*}”属性）。在这之间的语法是2011年出现的非官方语法，只能被IE识别（例display:flexbox;display: -ms-flexbox）。最老的语法产生于2009年（例display: box;或者“box-{*}”属性）- W3C 2009年第1次草案：[dis原创 2020-07-31 10:50:07 · 17102 阅读 · 0 评论 -
Bootstrap入门与简述
Bootstrap入门一、概述1.Bootstrap简介Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都原创 2020-07-11 15:17:42 · 1413 阅读 · 0 评论 -
Vue 知识点汇总（下）--附案例代码及项目地址
文章目录Vue预备知识与后续知识及项目案例一、简介1.Vue (读音 /vjuː/，类似于 view)的简单认识2.Vue.js安装二、Vue知识量化三、内容1、Webpack 详解什么是Webpack？前端模块化**和grunt/gulp的对比**webpack安装Webpack 起步Webpack配置css-loader的使用less文件处理图片文件处理ES6语法处理Webpack 配置 Vu...原创 2020-01-14 01:53:43 · 20200 阅读 · 0 评论 -
Vue 知识点汇总（上）--附案例代码及项目地址
文章目录Vue预备知识与后续知识及项目案例一、简介1.Vue (读音 /vjuː/，类似于 view)的简单认识2.Vue.js安装二、Vue知识量化三、内容1、Vue中的MVVM（1）什么是MVVM呢？（2）Vue的MVVM2、Vue的生命周期3、基础语法Mustachev-oncev-htmlv-textv-prev-cloakv-bind基础v-bind语法糖v-bind绑定classv-b...原创 2020-01-14 00:00:47 · 40181 阅读 · 3 评论 -
前端面试题 + 面试翻车原因分析
首先，来一套面试题冷静一下笔试题目及笔试时候填的东西1、怎么实现居中效果？ [分值：6]您的回答：1、定位居中（father:position:relative, children:position:fixed）2、负边距居中（margin-top，margin-left）3、display:flex, align-items:center （简答题需要人工评分）2、请描述一下co...原创 2020-01-07 20:39:41 · 2891 阅读 · 3 评论 -
MongoDB + Express 入门及案例代码
MongoDB + ExpressMongoDB基础一、数据库概述及环境搭建1、为什么要使用数据库动态网站中的数据都是存储在数据库中的数据库可以用来持久存储客户端通过表单收集的用户信息数据库软件本身可以对数据进行高效的管理2、什么是数据库数据库即存储数据的仓库，可以将数据进行有序的分门别类的存储。它是独立于语言之外的软件，可以通过API去操作它。常见的数据库软件有：mysql...原创 2020-01-04 19:18:15 · 8568 阅读 · 0 评论 -
Node.js + Gulp 入门
文章目录Node 基础一、简介1、什么是Node.js?2、Node.js的特性3、Node的优点二、Node基础知识1、Node安装Node环境安装失败解决办法1. 错误代号2502、25032. 执行命令报错PATH环境变量多版本安装方式2、Node.js的组成基础语法全局对象global3、Node.js的模块化开发（1）JavaScript开发弊端（2）软件中的模块化开发（3）Node.j...原创 2019-12-30 21:51:38 · 17795 阅读 · 5 评论 -
HTML入门与进阶以及HTML5
目录一、简介1、前端开发最核心技术（1）HTML是什么？（2）CSS（3）JavaScript2、前端开发其他技术二、基础内容1.基础总结2.HTML的基本标签(1)HTML标签(2)head标签(3)body标签3、段落与文字(一)、段落标签(二)、网页特殊符号(三)、自闭合标签(四)、块元素和行内元素(五)、练...原创 2019-12-12 21:04:45 · 384116 阅读 · 130 评论 -
Sass 入门（基础知识点汇总）
一、Sass简介在学习Sass之前，我们先来介绍一下什么是CSS预处理器。因为Sass就是众多CSS预处理器中的其中一种。1、什么是CSS预处理器？学过CSS的小伙伴都知道，CSS只是一门描述性的语言，你只能一行一行单纯地描述，并不能像JavaScript那样使用变量、循环、运算等方式来操作。CSS预处理器的出现，使得我们可以像操作JavaScript那样以“编程”的方式来书写CS...原创 2019-12-26 20:50:42 · 3448 阅读 · 0 评论 -
JQuery 入门 - 附案例代码
为什么要学jquery使用javascript开发过程中，有许多的缺点：查找元素的方法单一，麻烦。遍历数组很麻烦，通常要嵌套一大堆的for循环。有兼容性问题。想要实现简单的动画效果，也很麻烦代码冗余。体验jquery的使用/** 1. 查找元素的方法多种多样，非常灵活* 2. 拥有隐式迭代特性，因此不再需要手写for循环了。* 3. 完全没有兼容性问题。* 4. 实现动...原创 2019-12-23 17:40:55 · 63035 阅读 · 31 评论 -
JavaScript 入门（下）
目录一、JavaScript简介二、JavaScript的特点1、动态改变页面内容2、动态改变网页的外观3、验证表单数据4、响应事件三、内容1、数组对象一、数组基础二、数组的属性和方法2、数值对象3、窗口对象一、窗口对象简介二、打开和关闭窗口三、改变窗口大小四、窗口历史五、定时器4、JavaScript对话框一、alert...原创 2019-12-22 08:52:06 · 52233 阅读 · 12 评论 -
JavaScript 入门（上）
目录一、JavaScript简介二、JavaScript的特点1、动态改变页面内容2、动态改变网页的外观3、验证表单数据4、响应事件三、内容1、JavaScript简介一、JavaScript是什么？二、JavaScript编辑工具三、JavaScript在HTML的引用方式四、JavaScript和Java的关系五、训练题2、JavaScr...原创 2019-12-21 16:45:21 · 107723 阅读 · 22 评论 -
CSS入门
目录一、CSS简介二、内容1.css的引入方式2.元素的id和class3、CSS选择器4、文本样式总结5、文本样式总结6、边框样式7、 背景样式概述8、超链接样式9、图片样式10、列表样式11、表格样式12、CSS盒子模型13、浮动布局14、定位布局预备知识与后续知识及项目案例[HTML入门与进阶以及HTML5][CSS][...原创 2019-12-17 18:44:03 · 70020 阅读 · 24 评论 -
单页面与多页面的区别
之前在一个视频面试的时候，被面试官问到这个问题，结果自己混乱答了一下，后面才发现自己混淆了它们的概念，所以特地来学习一下单页面和多页面的区别。单页面，顾名思义只有一个界面。（SinglePage Web Application，SPA）只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源 ，公共资源(js、css等)仅需加载一次，常用于PC端官网、购物等网站...原创 2019-12-14 19:26:18 · 11881 阅读 · 0 评论