自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

小余的前端博客

提供最优质最前列的前端技术笔记

  • 博客(130)
  • 收藏
  • 关注

原创 (了解)webpack的devServer配置信息

回环地址(Loop Back Address),表达的意思其实是我们主机自己发出去的包,直接被自己接收;而回环地址,是在网络层直接就被获取到了(会被自己捕获到),是不会经常数据链路层和物理层的。比如我们监听 127.0.0.1时,在同一个网段下的主机中,通过ip地址是不能访问的。比如我们监听 0.0.0.0时,在同一个网段下的主机中,通过ip地址是可以访问的。:监听IPV4上所有的地址,再根据端口找到不同的应用程序。webpack.comm.conf.js(公共)在Vue项目中再写详细的,暂时跳过。

2024-04-26 00:40:28 1856

原创 (理解)webpack的热模块替换HMR

我们刚刚自动更新的方式是当我们修改了一个地方,会整个浏览器都更新了一遍,但这其实是没有必要的,会浪费性能而且保存的数据也会丢失,我们只需要更新我们修改的地方。

2024-04-26 00:39:55 496

原创 (掌握)webpack开启本地服务器

【代码】(掌握)webpack开启本地服务器。

2024-04-26 00:39:22 585

原创 (理解)webpack模式-不同模式的作用

而当mode设置了’production’的时候,也相当设置了下面这些红色部分,是非常多的选项的。设置mode为’development’相当于设置了这些红色的部分。

2024-04-26 00:38:43 457

原创 (掌握)webpack插件-Define插件

但是,这个时候编译还是会报错,因为在我们的模块中还使用到一个BASE_URL的常量:但是我们并没有设置过这个常量值,所以会出现没有定义的错误这个时候我们可以使用DefinePlugin插件。

2024-04-26 00:38:11 278

原创 (掌握)webpack插件-Html插件

比如添加一个noscript标签,在用户的JavaScript被关闭时,给予响应的提示比如在开发vue或者react项目时,我们需要一个可以挂载后续组件的根标签这个我们需要一个属于自己的index.html模块:上面的代码中,会有一些类似这样的语法,这个是EJS模块填充数据的方式在配置HtmlWebpackPlugin时,我们可以添加如下配置:template:指定我们要使用的模块所在的路径title。

2024-04-26 00:37:46 328

原创 (掌握)webpack插件-Clean插件

【代码】(掌握)webpack插件-Clean插件。

2024-04-26 00:14:38 500

原创 (理解)webpack中plugin的作用和loader

安装的是 Sass 编译器,它是一个独立的工具,用于将 Sass/Scss 样式文件编译成 CSS 文件。能够自动地将 Sass/Scss 文件编译成 CSS 文件,并将其打包进最终的 JavaScript 文件中,使得我们可以直接在浏览器中使用编译后的 CSS 文件。能够使我们更方便地处理 Sass/Scss 样式文件,将其转换成能够直接在浏览器中使用的 CSS 文件,并能够将其集成到构建流程中,自动化地处理样式文件。进行转换(但也就仅此而已了,所以Loader跟plugin是很不一样的)

2024-04-26 00:14:08 424

原创 (掌握)webpack对文件路径的解析和配置

resolve.mainFiles的默认值是 [‘index’] (这就是我们引入文件夹下的index能够省略index的原因,因为这里默认找index)默认值是 [‘node_modules’],所以默认会从node_modules中查找文件。会在文件夹中根据 resolve.mainFiles配置选项中指定的文件顺序查找。我们可以通过设置别名的方式来替换初识模块路径,具体后面讲解alias的配置。的vue就是一个模块路径,会去node_modules查找)

2024-04-26 00:13:32 497

原创 (掌握)webpack对vue文件的处理打包

【代码】(掌握)webpack对vue文件的处理打包。

2024-04-26 00:13:02 410

原创 (理解)webpack对图片资源的特殊处理

如果我们一个个去安装使用插件,那么需要手动来管理大量的babel插件,我们可以直接给webpack提供一个preset,webpack会根据我们的预设来加载对应的插件列表,并且将其传递给babel。安装完预设之后,我们刚刚创建的babel.config.js就需要做出一点转变了,因为预设(presets)跟配置(plugins)是分开的。在实际开发中,我们通常会在构建工具中通过配置babel来对其进行使用的,比如在webpack中。我们可以设置一个规则,在加载js文件时,使用我们的babel。

2024-04-26 00:12:13 949 2

原创 (掌握)webpack对图片资源的基本处理

好处举例:这样自己制定规则就可以防止,打包后的图片文件名字跟原来的文件名字已经牛头不对马嘴,完全对不上了。哈希值最好保存下来,哈希值是唯一的,防止图片不小心重复,[hash:6]就是只使用前6位哈希值(基本上也够用了)[hash]:文件的内容,使用MD4的散列函数处理,生成的一个128位的hash值(32个十六进制)[ext]: 处理文件的扩展名(后缀名,比如.svg,.js,.html之类的)之前通过使用 url-loader,并且配置资源体积限制实现。[name]:处理文件的名称(原来图片的名字)

2024-04-26 00:11:22 574

原创 (掌握)webpack对图片资源的基本处理

好处举例:这样自己制定规则就可以防止,打包后的图片文件名字跟原来的文件名字已经牛头不对马嘴,完全对不上了。哈希值最好保存下来,哈希值是唯一的,防止图片不小心重复,[hash:6]就是只使用前6位哈希值(基本上也够用了)[hash]:文件的内容,使用MD4的散列函数处理,生成的一个128位的hash值(32个十六进制)[ext]: 处理文件的扩展名(后缀名,比如.svg,.js,.html之类的)之前通过使用 url-loader,并且配置资源体积限制实现。[name]:处理文件的名称(原来图片的名字)

2024-04-25 23:47:19 416

原创 (理解)webpack中postcss-loader的

我们可以将这些配置信息放到一个单独的文件中进行管理:(就不会让上面配置文件里面套太多层了,看着都密密麻麻的)事实上,在配置postcss-loader时,我们配置插件并不需要使用autoprefixer。我们可以使用另外一个插件:postcss-preset-env。注意:我们在使用某些postcss插件时,也可以直接传入字符串。

2024-04-25 23:45:26 945

原创 (掌握)webpack的less文件处理

我们配置的时候除了写less之外,我们还写了css跟style是因为,less-loader只是将less语法转化成css语法,但是css语法还得进行处理的,使用css的loader处理css语法,最后使用style的loader将其引入使用。但是在项目中我们会编写大量的css,它们如何可以自动转换呢?配置webpack.config.js。刚刚rules里面的。

2024-04-25 23:32:41 273

原创 (掌握)webpack的css处理和loader的使用

用于对 resource(资源)进行匹配的,通常会设置成正则表达式。通过JavaScript创建了一个元素,并且希望给它设置一些样式;UseEntry是一个对象,可以通过对象的属性来设置一些其他属性。: Rule.use: [ { loader } ] 的简写。:对应的值时一个数组:[UseEntry]继续编译命令 npm run build。:内联方式使用较少,因为不方便管理。

2024-04-25 23:12:12 1144

原创 (理解)webpack的形成的依赖图结构

loader:webpack默认情况下是只对我们的js进行打包,如果我们想要我们文件里面也包括了css文件、图片、字体等,就需要用到loader来解析了。从入口开始,会生成一个 依赖关系图,这个依赖关系图会包含应用程序中所需的所有模块(比如.js文件、css文件、图片、字体等)然后遍历图结构,打包一个个模块(根据文件的不同使用不同的loader来解析)事实上webpack在处理应用程序时,它会根据命令或者配置文件找到入口文件。

2024-04-25 23:11:39 267

原创 (掌握)webpack基本打包-配置文件-执行脚本

在通常情况下,webpack需要打包的项目是非常复杂的,并且我们需要一系列的配置来满足要求,默认配置必然是不可以的。不喜欢打包后的文件叫做main.js,我想叫做xiaoyu.js,能不能修改,当然可以。不喜欢入口文件叫做index.js,想叫做main.js,如何修改。我们可以通过webpack进行打包,之后运行。继续执行webpack命令,依然可以正常打包。在目录下直接执行 webpack 命令。

2024-04-25 23:10:49 348

原创 (掌握)webpack的介绍和环境搭建

比如开发过程中我们需要通过模块化的方式来开发比如也会使用一些高级的特性来加快我们的开发效率或者安全性,比如通过ES6+、TypeScript开发脚本逻辑,通过sass、less等方式来编写css样式代码比如开发过程中,我们还希望实时的监听文件的变化来并且反映到浏览器上,提高开发的效率比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化但是事实上,这三大框架的创建过程我们都是**借助于脚手架(CLI)**的。

2024-04-25 23:05:53 1022

原创 (掌握)webpack的介绍和环境搭建

比如开发过程中我们需要通过模块化的方式来开发比如也会使用一些高级的特性来加快我们的开发效率或者安全性,比如通过ES6+、TypeScript开发脚本逻辑,通过sass、less等方式来编写css样式代码比如开发过程中,我们还希望实时的监听文件的变化来并且反映到浏览器上,提高开发的效率比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化但是事实上,这三大框架的创建过程我们都是**借助于脚手架(CLI)**的。

2024-04-25 23:05:21 653 2

原创 (理解)npm发布自己的包和使用包的过程

【代码】(理解)npm发布自己的包和使用包的过程。

2024-04-25 23:03:00 325 1

原创 第十四周:*链表

如何整个链表都清除掉。

2024-04-23 23:35:52 343

原创 第13周:文件

现实是,程序通过第三方库来读写文件,很少直接读写二进制文件了。文本的缺点是程序输入输出要经过格式化,开销大。编译器会安排其中的位的排列,不具有可移植性。而二进制文件是需要专门的程序来读写的文件。文本文件的输入输出是格式化,可能经过转码。二进制的缺点是人类读写困难,而且不跨平台。移位的位数不要用负数,这是没有定义的行为。文件无非是用最简单的方式可以读写的文件。文本的优势是方便人类读写,而且跨平台。其实所有的文件最终都是二进制的。这样的二进制文件不具有可移植性。二进制的优点是程序读写快。

2024-04-23 23:34:34 877

原创 第十二周:程序结构

定义在函数外面的变量是全局变量全局变量具有全局的生存期和作用域他们和任何函数无关在任何函数内部都可以使用他们//全局变量f();return 0;//_func_是一个字符串,表达的是当前函数的名字,也就是main的名字gAll += 2;#开头的是编译预处理指令它们不是c语言的成分,但是C语言程序离不开它们#define用来定义一个宏 ,其实只是一个原始的文本替换_LINE_表达代码所在的行号_FILE_表达代码所在的文件名_DATE_编译时候的日期。

2024-04-23 23:31:51 865

原创 第十一周:结构类型

C语言提供了一个叫做typedef的功能来声明一个已有的数据类型的新名字比如:typedef int Length;使得Length成为int类型的别名。

2024-04-23 23:31:15 933

原创 第十周:字符串

在我们输入的东西(在键盘上敲出来的东西被称为行编辑的工作)的时候,那些都会被暂时放在shell里(类似缓冲区域),当我们按下回车之后,才会发送到实际上显示的地方上。scanf读入一个单词(到空格、tab或回车为止),但scanf这样是不安全的,因为不知道要读入内容的长度。并没有产生新的字符串,只是让指针s指向了t所指的字符串,对s的任何操作就是对t做的。以为char*是字符串类型,定义了一个字符串类型的变量string就可以直接使用了。C语言的字符串是以字符数组的形态存在的。以0(整数0)结尾的一串字符。

2024-04-23 23:30:30 807

原创 第九周:指针

但是运行会报错,只是刚好凑巧你传进去的整数大小跟地址大小一样,编译会拿你传进去的整数当做地址去运行,将整数传到了不该传的地方去了,所以运行就一定会出错。当要传递的参数的类型比地址大的时候,这是常用的手段:既能用比较少的字节数传递值给参数,又能避免函数对外面的变量的修改。这并没有改变p所指向的变量的类型,而是让后人用不同的眼光通过p看他所指的变量。如果这个数组是这个函数的本地变量,那么回到调用函数那里,这个数组就不存在了。为什么 int i;如果一个函数的返回类型是数组,那么它实际返回的也是数组的地址。

2024-04-23 23:29:56 599

原创 第八周:数组

1.变量名称[元素数量];2.元素数量必须是整数3.C99之前:元素数量必须是编译时刻确定的字面量(了解下就行)

2024-04-23 23:29:24 480

原创 第七周:函数

int m,n;int i;for(i=m;i

2024-04-23 23:28:34 646

原创 第六周:数据类型

类型名称:int、long、double输入输出时的格式化:%d、%ld、%lf所表达的数的范围:char

2024-04-23 23:27:32 1159

原创 第五周:循环控制

这样循环的次数是n,而循环次数结束以后,i的值是n。循环的控制变量i,是选择从0开始还是从1开始,是判断 i

2024-04-23 23:26:16 912

原创 第四周:循环

在进入循环的时候不做检查,而是在执行完一轮循环体的代码之后,再来检查循环的条件是否满足,如果满足则继续下一轮循环,不满足则循环结束。让计算机来想一个数,然后让用户来猜,用户每输入一个数,就告诉用户是大了还是小了,直到用户猜到为止,最后还要告诉用户他猜了几次。1.让用户输入一系列的正整数,最后输入-1表示输入结束,然后程序计算出这些数字的平均数,输出输入的数字的个数和平均数。3.只需要每读到一个数,就把它加到一个累加的变量里,到全部数据读完,再拿它去除读到的数的个数就可以了。

2024-04-23 23:25:39 436

原创 第三周:3.1判断

分支标号只是说明switch内部位置的路标,在执行完分支中的最后一条语句后,如果后面没有break,就会顺序执行到下面的case里去,直到遇到一个break,或者switch结束为止。1.找零计算器需要用户做两个操作:输入购买的金额,输入支付吧票面,而找零计算器则根据用户的输入做出相应的动作:计算并打印找零,或告知用户余额不足以购买。当if的条件满足或者不满足的时候要执行的语句也可以是一条if或者if-else语句,这就是嵌套的if语句。所有的关系运算符的优先级比算数运算的低,但是比赋值运算的高。

2024-04-23 23:24:59 940

原创 第二周:计算

变量定义的一边形式:int price;int amount;

2024-04-23 22:54:42 767

原创 第一周:程序设计与c语言

2.编译:借助一个程序,就像一个翻译,把你的程序翻译成计算机真正能懂的语言-机器语言-写的程序,然后,这个机器语言写的程序就能够直接执行了。2.开发效率>>学习乐趣 开发效率>>开发乐趣 日常应用很少直接用c语言编写。1.我们要让计算机做计算,就需要像这样找出计算的步骤,然后用编程语言写下来。1.操作系统,嵌入式系统,驱动程序,底层驱动,图形引擎、图像处理、声音效果。1.解释:借助一个程序,那个程序能试图理解你的程序,然后按照你的要求执行。4.编译型语言有确定的运算性能。2.常用的执行方式不同而已。

2024-04-23 22:53:03 292

原创 第十二章——动态路由

我们一般使用动态路由都是后台会返回一个前端通过调接口拿到后处理 (后端处理路由)主要使用的方法就是 router.addRoute调用接口需要安装axios,命令:npm install axios -Simport引入axios。

2024-04-22 15:53:09 302

原创 第十一章——滚动行为

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进 / 后退 按钮触发) 时才可用。使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。vue-router 可以自定义路由切换时页面如何滚动。当创建一个 Router 实例,你可以提供一个。

2024-04-22 15:52:02 244

原创 第十章——路由过渡动效

使用组件库的时候记得先安装(npm安装方式:npm install animate.css)后import引入。上面的用法会对所有的路由使用相同的过渡。如果你想让每个路由的组件有不同的过渡,你可以将。想要在你的路径组件上使用转场,并对导航进行动画处理,你需要使用。

2024-04-22 15:51:31 367

原创 第九章——路由元信息

有时我们想将一些信息附加到路由上,如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的。属性来实现,并且它可以在路由地址和导航守卫上都被访问到。定义路由的时候你可以这样配置。在组件中可以通过 this.$route.meta 来获取。如果不使用扩展 将会是 unknow 类型。中访问路由的元信息数据。

2024-04-22 15:50:57 583

原创 第八章——导航守卫-前置守卫

也不会因为间隔时间太长,使用动画卡顿不流畅,让各种网页动画效果能够有一个统一的刷新机制,从而节省系统资源,提高系统性能,改善视觉效果。那是因为前置路由守卫是看大门前面的,而后置路由守卫则是在大门的后面。另外,对于 @pages 和 @components 我们就可以直接引用了,而省去了一大堆的复杂应用,另外通过 @可以消除歧义。一方面,循环间隔必须足够短,这样。这样的作用是对你的文件起了一个别名,此处的@的别名对应的是./src。小满在这里做的是一个登录的校验,使用了组件库这里都不进行说明。

2024-04-22 15:50:21 342

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除