酒客-CSDN博客

原创 webpack知识点整理

webpack知识点整理webpack的认识什么是webpack webpack是一种前端资源构建工具，一个静态资源打包器，在webpack看来，前端所有的资源文件（js/json/css/img/less/html/…）都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。webpack的五个核心概念Entry–入口(Entry)指示webpack以那个文件为入口起点开始打包，分析构建内部依赖图Output–输出(Output)指示webpack打包后的资源

2022-03-28 20:35:10 1806

原创 axios的使用详解

axios的基本使用axios是什么前端最流行的ajax请求库，react/vue官方都推荐使用axios发送ajax请求，是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。文档:https://hithub.com/axios/axios 细节：axios包括TypeScript定义。特性从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应拦截转换请求数据和响应数据取消

2022-03-11 19:27:44 13812

原创 31_Vue项目搭建的代码规范和第三方库的集成配置

项目搭建的代码规范及第三方库的集成配置一.代码规范1.1集成editorconfig配置EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。# http://editorconfig.orgroot = true[*] # 表示所有文件适用charset = utf-8 # 设置文件字符集为 utf-8indent_style = space # 缩进风格（tab | space）indent_size = 2 # 缩进大小end_o

2022-03-09 15:16:07 710

原创 07_Typescript泛型的使用及declare声明类型

Typescript泛型的使用以及命名空间和declare声明类型认识泛型软件工程的主要目的是构建不仅仅明确和一致的API，还要让你的代码具有很强的可重用性：比如我们可以通过函数来封装一些API，通过传入不同的函数参数，让函数帮助我们完成不同的操作；但是对于参数的类型是否也可以参数化呢？什么是类型的参数化？我们来提一个需求：封装一个函数，传入一个参数，并且返回这个参数；如果我们是TypeScript的思维方式，要考虑这个参数和返回值的类型需要一致：上面的代码虽然实现了，但是不适用于其他

2022-03-07 20:24:16 7204

原创 30_Vuex的替代工具Pinia的使用

Vuex的替代工具Pinia的简单使用Pinia的简介和优势Pinia是Vue生态里Vuex的代替者，一个全新Vue的状态管理库。在Vue3成为正式版以后，尤雨溪强势推荐的项目就是Pinia。那先来看看Pinia比Vuex好的地方，也就是Pinia的五大优势。可以对Vue2和Vue3做到很好的支持，也就是老项目也可以使用Pinia。抛弃了Mutations的操作，只有state、getters和actions.极大的简化了状态管理库的使用，让代码编写更加容易直观。不需要嵌套模块，符合Vue3的C

2022-03-07 14:04:52 1387

原创 06_Typescript接口的使用

Typescript接口的使用接口的声明在前面我们通过type可以用来声明一个对象类型：对象的另外一种声明方式就是通过接口来声明：他们在使用上的区别，我们后续再来说明。接下来我们继续学习一下接口的其他特性。可选属性接口中我们也可以定义可选属性：接口中也可以定义只读属性：这样就意味着我们再初始化之后，这个值是不可以被修改的；索引类型前面我们使用interface来定义对象类型，这个时候其中的属性名、类型、方法都是确定的，但是有时候我们会遇到类似下面的对象:函数类型前面我们都是通

2022-03-06 13:57:45 241

原创 05_Typescript类的使用

Typescript类的使用认识类的使用在早期的JavaScript开发中（ES5）我们需要通过函数和原型链来实现类和继承，从ES6开始，引入了class关键字，可以更加方便的定义和使用类。TypeScript作为JavaScript的超集，也是支持使用class关键字的，并且还可以对类的属性和方法等进行静态类型检测。实际上在JavaScript的开发过程中，我们更加习惯于函数式编程：比如React开发中，目前更多使用的函数组件以及结合Hook的开发模式；比如在Vue3开发中，目前也更加推崇使

2022-03-05 13:02:03 718

原创 04_Typescript的函数详解

Typescript中函数详解TypeScript函数类型在JavaScript开发中，函数是重要的组成部分，并且函数可以作为一等公民（可以作为参数，也可以作为返回值进行传递）。那么在使用函数的过程中，函数是否也可以有自己的类型呢？我们可以编写函数类型的表达式（Function Type Expressions），来表示函数类型；TypeScript函数类型解析在上面的语法中 (num1: number, num2: number) => void，代表的就是一个函数类型：接收两

2022-03-04 19:55:56 348

原创 03_Typescript的类型补充(二)

Typescript中的类型补充(二)函数的参数类型函数是JavaScript非常重要的组成部分，TypeScript允许我们指定函数的参数和返回值的类型。参数的类型注解声明函数时，可以在每个参数后添加类型注解，以声明函数接受的参数类型：函数的返回值类型我们也可以添加返回值的类型注解，这个注解出现在函数列表的后面：和变量的类型注解一样，我们通常情况下不需要返回类型注解，因为TypeScript会根据 return 返回值推断函数的返回类型：某些第三方库处于方便理解，会明确指定返回类型，但是

2022-03-03 11:37:09 277

原创 02_Typescript数据类型和类型补充(一)

Typescript中的数据类型和类型补充(一)变量的声明我们已经强调过很多次，在TypeScript中定义变量需要指定标识符的类型。所以完整的声明格式如下：声明了类型后TypeScript就会进行类型检测，声明的类型可以称之为类型注解；var/let/const 标识符: 数据类型 = 赋值;比如我们声明一个message，完整的写法如下：注意：这里的string是小写的，和String是有区别的string是TypeScript中定义的字符串类型，String是ECMAScri

2022-03-01 19:31:02 658

原创 01_邂逅Typescript

邂逅Typescript----认识Typescript和基本使用JavaScript一门优秀的语言我始终相信：任何新技术的出现都是为了解决原有技术的某个痛点。JavaScript是一门优秀的编程语言吗？每个人可能观点并不完全一致，但是从很多角度来看，JavaScript是一门非常优秀的编程语言；而且，可以说在很长一段时间内这个语言不会被代替，并且会在更多的领域被大家广泛使用；著名的Atwood定律：Stack Overflow的创立者之一的 Jeff Atwood 在2007年提出了著

2022-03-01 11:44:51 153

原创 28_Vue3状态管理-Vuex之mutations_modules_actions的使用

Vue3状态管理-Vuex之mutations、actions、modules的使用Mutation的使用更改 Vuex 的 store 中的状态的唯一方法是提交 mutation：Mutation携带数据很多时候我们在提交mutation的时候，会携带一些数据，这个时候我们可以使用参数：payload为对象类型对象风格的提交方式Mutation常量类型定义常量：mutation-type.js定义mutation提交mutationmapMutations辅助函数我们

2022-02-28 14:58:07 3087

原创 27_ Vue3状态管理-Vuex的基本使用及state和getters的使用详解

Vue3状态管理-Vuex的基本使用及state和getters的使用详解什么是状态管理在开发中，我们会的应用程序需要处理各种各样的数据，这些数据需要保存在我们应用程序中的某一个位置，对于这些数据的管理我们就称之为是状态管理。在前面我们是如何管理自己的状态呢？在Vue开发中，我们使用组件化的开发方式；而在组件中我们定义data或者在setup中返回使用的数据，这些数据我们称之为state；在模块template中我们可以使用这些数据，模块最终会被渲染成DOM，我们称之为View；在模块中我

2022-02-27 20:54:35 2747

原创 26_Vue3路由-VueRouter之动态添加路由和导航守卫的使用

Vue3路由-VueRouter之动态添加路由和导航守卫的使用router-link的v-slot在vue-router3.x的时候，router-link有一个tag属性，可以决定router-link到底渲染成什么元素：但是在vue-router4.x开始，该属性被移除了；而给我们提供了更加具有灵活性的v-slot的方式来定制渲染的内容；v-slot如何使用呢？首先，我们需要使用custom表示我们整个元素要自定义如果不写，那么自定义的内容会被包裹在一个 a 元素中；其次，我们使

2022-02-27 11:30:12 3786

原创 25_Vue3路由-VueRouter的基本使用及动态路由和路由嵌套

Vue3路由之Vue-router的基本使用及路由嵌套和动态路由认识前端路由路由其实是网络工程中的一个术语：在架构一个网络时，非常重要的两个设备就是路由器和交换机。当然，目前在我们生活中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器：事实上，路由器主要维护的是一个映射表；映射表会决定数据的流向；路由的概念在软件工程中出现，最早是在后端路由中实现的，原因是web的发展主要经历了这样一些阶段：后端路由阶段；前后端分离阶段；单页面富应用（SPA）；后端路由阶段早期的网站

2022-02-26 17:36:41 3597

原创 24_Vue3源码学习之阅读部分重要源码

Vue3源码学习之阅读部分重要源码源码阅读之createApp源码阅读之挂载根组件组件化的初始化Compile过程Block Tree分析生命周期回调以上内容学习自coderwhy老师的Vue3+Ts课程！！！

2022-02-25 16:42:20 322

原创 23_Vue3源码学习之Mini-Vue的实现

Vue3源码学习之Mini-Vue的实现实现Mini-Vue这里我们实现一个简洁版的Mini-Vue框架，该Vue包括三个模块：渲染系统模块；可响应式系统模块；应用程序入口模块；一、渲染系统实现渲染系统，该模块主要包含三个功能：功能一：h函数，用于返回一个VNode对象；功能二：mount函数，用于将VNode挂载到DOM上；功能三：patch函数，用于对两个VNode进行对比，决定如何处理新的VNode；h函数 – 生成VNodeh函数的实现：直接返回一个VNode对象即可

2022-02-20 16:32:08 788

原创 22_Vue3源码学习之真实DOM和虚拟DOM的渲染及Vue的核心模块

Vue3源码学习之真实DOM与虚拟DOM渲染及Vue的核心模块真实的DOM渲染我们传统的前端开发中，我们是编写自己的HTML，最终被渲染到浏览器上的，那么它是什么样的过程呢？虚拟DOM的优势目前框架都会引入虚拟DOM来对真实的DOM进行抽象，这样做有很多的好处：首先是可以对真实的元素节点进行抽象，抽象成VNode（虚拟节点），这样方便后续对其进行各种操作：因为对于直接操作DOM来说是有很多的限制的，比如diff、clone等等，但是使用JavaScript编程语言来操作这些，就变得非常的简

2022-02-18 15:33:56 508 1

原创 21_Vue3高级语法的使用之自定义指令及teleport内置组件

Vue3高级语法之自定义指令及Teleport内置组件自定义指令在Vue的模板语法中我们学习过各种各样的指令：v-show、v-for、v-model等等，除了使用这些指令之外，Vue也允许我们来自定义自己的指令。注意：在Vue中，代码的复用和抽象主要还是通过组件；通常在某些情况下，你需要对DOM元素进行底层操作，这个时候就会用到自定义指令；自定义指令分为两种：自定义局部指令：组件中通过 directives 选项，只能在当前组件中使用；自定义全局指令：app的 directive 方法

2022-02-18 13:53:22 409

原创 20_Vue3_Composition_API的使用(三)之生命周期钩子及render函数

Vue3CompositionAPI的使用之生命周期、Provide/Inject、Hook的使用及render函数生命周期钩子我们前面说过 setup 可以用来替代 data 、 methods 、 computed 、watch 等等这些选项，也可以替代生命周期钩子。那么setup中如何使用生命周期函数呢？可以使用直接导入的 onX 函数注册生命周期钩子；Provide函数事实上我们之前还学习过Provide和Inject，Composition API也可以替代之前的 Provid

2022-02-17 17:23:00 750

原创 19_Vue3_Composition_API的使用(二)之computed和watch

Vue3_Composition_API的使用(二)之computed和watch及ref_API的补充Reactive判断的APIisProxy检查对象是否是由 reactive 或 readonly创建的 proxy。isReactive检查对象是否是由 reactive创建的响应式代理：如果该代理是 readonly 建的，但包裹了由 reactive 创建的另一个代理，它也会返回 true；isReadonly检查对象是否是由 readonly 创建的只读代理。toRa

2022-02-16 15:00:08 576

原创 18_Vue3_Composition_API的基础使用(一)

Vue3Composition-API的基础使用(一)认识Mixin目前我们是使用组件化的方式在开发整个Vue的应用程序，但是组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同的代码逻辑进行抽取。在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成：Mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能；一个Mixin对象可以包含任何组件选项；当组件使用Mixin对象时，所有Mixin对象的选项将被混合进入该组件本身的选项中；Mixin的基本使用Mixi

2022-02-13 15:07:15 438 2

原创 17_Vue3动画(二)之gasp库的使用及动画的钩子函数

Vue3动画之gasp库的使用及动画的钩子函数认识gsap库某些情况下我们希望通过JavaScript来实现一些动画的效果，这个时候我们可以选择使用gsap库来完成。什么是gsap呢？GSAP是The GreenSock Animation Platform（GreenSock动画平台）的缩写；它可以通过JavaScript为CSS属性、SVG、Canvas等设置动画，并且是浏览器兼容的；这个库应该如何使用呢？第一步：需要安装gsap库；第二步：导入gsap库；第三步：使用对应的ap

2022-02-12 16:45:26 4999 1

原创 16_Vue3动画(一)之动画的基本使用及animate.css库的使用

Vue3动画的基本使用及animate.css库的使用认识动画在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验：React框架本身并没有提供任何动画相关的API，所以在React中使用过渡动画我们需要使用一个第三方库react-transition-group；Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果；我们来看一个案例：Hello World的显示和隐藏；通过下面的代码实现，是不会有任何动

2022-02-12 15:33:41 2299

原创 15_Vue3组件化开发(五)之组件的生命周期及组件v-model的实现

Vue3组件化之组件的生命周期及组件v-model的实现$refs的使用某些情况下，我们在组件中想要直接获取到元素对象或者子组件实例：在Vue开发中我们是不推荐进行DOM操作的；这个时候，我们可以给元素或者组件绑定一个ref的attribute属性；组件实例有一个$refs属性：它一个对象Object，持有注册过 ref attribute 的所有 DOM 元素和组件实例。parent和parent和parent和root我们可以通过$parent来访问父元素。HelloWorl

2022-02-11 12:41:06 742

原创 14_Vue3组件化开发(四)之动态组件与异步组件

Vue3组件化开发之动态组件与异步组件切换组件案例比如我们现在想要实现了一个功能：点击一个tab-bar，切换不同的组件显示；这个案例我们可以通过两种不同的实现思路来实现：方式一：通过v-if来判断，显示不同的组件；方式二：动态组件的方式；v-if显示不同的组件我们可以先通过v-if来判断显示不同的组件，这个可以使用我们之前讲过的知识来实现：动态组件的实现动态组件是使用 component 组件，通过一个特殊的attribute is 来实现：这个currentTab的值

2022-02-10 19:14:35 2148

原创 13_Vue3组件化开发(三)之插槽的使用及事件总线

Vue3组件化之插槽的使用及事件总线非父子组件的通信在开发中，我们构建了组件树之后，除了父子组件之间的通信之外，还会有非父子组件之间的通信。这里我们主要讲两种方式：Provide/Inject；Mitt全局事件总线；Provide和InjectProvide/Inject用于非父子组件之间共享数据：比如有一些深度嵌套的组件，子组件想要获取父组件的部分内容；在这种情况下，如果我们仍然将props沿着组件链逐级传递下去，就会非常的麻烦；对于这种情况下，我们可以使用 Provide 和

2022-02-10 14:19:47 444

原创 12_Vue3组件化开发(二)之父子之间的通信

Vue3组件化开发之父子之间的通信认识组件的嵌套前面我们是将所有的逻辑放到一个App.vue中：在之前的案例中，我们只是创建了一个组件App；如果我们一个应用程序将所有的逻辑都放在一个组件中，那么这个组件就会变成非常的臃肿和难以维护；所以组件化的核心思想应该是对组件进行拆分，拆分成一个个小的组件；再将这些组件组合嵌套在一起，最终形成我们的应用程序；我们来分析一下下面代码的嵌套逻辑，假如我们将所有的代码逻辑都放到一个App.vue组件中：我们会发现，将所有的代码逻辑全部放到一个组件中，代

2022-02-09 18:48:02 204

原创 11_Vue3-CLI和Vite的使用

Vue3-Cli和Vite的基本使用Vue CLI脚手架什么是Vue脚手架？我们前面学习了如何通过webpack配置Vue的开发环境，但是在真实开发中我们不可能每一个项目从头来完成。所有的webpack配置，这样显示开发的效率会大大的降低；所以在真实开发中，我们通常会使用脚手架来创建一个项目，Vue的项目我们使用的就是Vue的脚手架；脚手架其实是建筑工程中的一个概念，在我们软件工程中也会将一些帮助我们搭建项目的工具称之为脚手架；Vue的脚手架就是Vue CLI：CLI是Com

2022-02-09 13:12:56 1465

原创 10_Vue3组件化之webpack5篇(四)

Vue3组件化之webpack5篇(四)为什么要搭建本地服务器？目前我们开发的代码，为了运行需要有两个操作：操作一：npm run build，编译相关的代码；操作二：通过live server或者直接通过浏览器，打开index.html代码，查看效果；这个过程经常操作会影响我们的开发效率，我们希望可以做到当文件发生变化时，可以自动的完成编译和展示；为了完成自动编译，webpack提供了几种可选的方式：webpack watch mode；webpack-dev-server（常用）；

2022-02-07 14:14:46 351

原创 09_Vue3组件化之webpack5篇(三)

Vue3组件化之webpack5篇(三)为什么需要babel？事实上，在开发中我们很少直接去接触babel，但是babel对于前端开发来说，目前是不可缺少的一部分：开发中，我们想要使用ES6+的语法，想要使用TypeScript，开发React项目，它们都是离不开Babel的；所以，学习Babel对于我们理解代码从编写到线上的转变过程至关重要；那么，Babel到底是什么呢？Babel是一个工具链，主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的Java

2022-02-06 18:50:04 430

原创 08_Vue3组件化之webpack5篇(二)

Vue3组件化之webpack5篇(二)加载图片案例准备为了演示我们项目中可以加载图片，我们需要在项目中使用图片，比较常见的使用图片的方式是两种：img元素，设置src属性；其他元素（比如div），设置background-image的css属性；file-loader要处理jpg、png等格式的图片，我们也需要有对应的loader：file-loaderfile-loader的作用就是帮助我们处理import/require()方式引入的一个文件资源，并且会将它放到我们输出的文件夹中

2022-02-06 13:12:55 1459

原创 07_Vue3组件化之webpack5篇(一)

Vue3组件化之webpack5篇(一)认识webpack事实上随着前端的快速发展，目前前端的开发已经变的越来越复杂了：比如开发过程中我们需要通过模块化的方式来开发；比如也会使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+、TypeScript开发脚本逻辑，通过sass、less等方式来编写css样式代码；比如开发过程中，我们还希望实时的监听文件的变化来并且反映到浏览器上，提高开发的效率；比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化；等等….但是对于很

2022-02-05 16:59:52 1628

原创 06_Vue3组件化开发(一)之注册组件

Vue3组件化开发(一)人处理问题的方式人面对复杂问题的处理方式：任何一个人处理信息的逻辑能力都是有限的所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。但是，我们人有一种天生的能力，就是将问题进行拆解。如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。认识组件化开发组件化也是类似的思想：如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展；但如果，我们讲一个

2022-02-05 12:00:40 1386

原创 05_Vue3基础语法(四)之v-model的基本使用

Vue3基础语法(四)v-model的基本使用表单提交是开发中非常常见的功能，也是和用户交互的重要手段：比如用户在登录、注册时需要提交账号密码；比如用户在检索、创建、更新信息时，需要提交一些数据；这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成：v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定；它会根据控件类型自动选取正确的方法来更新元素；尽管有些神奇，但 v-model 本质上不过是语法糖，它负

2022-02-04 19:29:35 2003

原创 04_Vue3基础语法(三)之侦听器watch和计算属性computed

Vue3基础语法(三)复杂data的处理方式我们知道，在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示；比如我们需要对多个data数据进行运算、三元运算符来决定结果、数据进行某种转化后显示；在模板中使用表达式，可以非常方便的实现，但是设计它们的初衷是用于简单的运算；在模板中放入太多的逻辑会让模板过重和难以维护；并且如果多个地方都使用到，那么会有大量重复的代码；我们有没有什么方法可以将逻辑抽离出

2022-02-04 13:01:28 509

原创 03_Vue3基础语法(二)之条件渲染和列表渲染

Vue3基础语法(二)条件渲染在某些情况下，我们需要根据当前的条件决定某些元素或组件是否渲染，这个时候我们就需要进行条件判断了。Vue提供了下面的指令来进行条件判断：v-ifv-elsev-else-ifv-showv-if、v-else、v-else-if用于根据条件来渲染某一块的内容：这些内容只有在条件为true时，才会被渲染出来；这三个指令与JavaScript的条件语句if、else、else if类似；v-if的渲染原理：v-if是惰性的；当条件为false时，其判断

2022-02-03 14:48:32 730

原创 02_Vue3基础语法(一)之Mustache语法及v-bind的使用

Vue3基础语法(一)Mustache双大括号语法如果我们希望把数据显示到模板（template）中，使用最多的语法是 “Mustache”语法 (双大括号) 的文本插值。并且我们前面提到过，data返回的对象是有添加到Vue的响应式系统中；当data中的数据发生改变时，对应的内容也会发生更新。当然，Mustache中不仅仅可以是data中的属性，也可以是一个JavaScript的表达式。另外这种用法是错误的：v-once指令v-once用于指定元素或者组件只渲染一次：当数据发生

2022-02-03 11:08:04 1687 2

原创 01_邂逅vue3开发

邂逅Vue3和Vue3初体验认识VueVue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。全程是Vue.js或者Vuejs；什么是渐进式框架呢？表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目；目前Vue在前端处于什么地位？目前前端最流行的是三大框架：Vue、React、Angular。Vue对前端工程师的重要性目前需要学习Vue3吗？在2020年的9月19日，万众期待的Vue3终于发布了正式版，命名为“On

2022-02-02 13:18:48 155

原创 js中的类型转换

javaScript中的类型转换概述JavaScript 是一种动态类型语言，变量没有类型限制，可以随时赋予任意值。var x = y ? 1 : 'a';上面代码中，变量x到底是数值还是字符串，取决于另一个变量y的值。y为true时，x是一个数值；y为false时，x是一个字符串。这意味着，x的类型没法在编译阶段就知道，必须等到运行时才能知道。虽然变量的数据类型是不确定的，但是各种运算符对数据类型是有要求的。如果运算符发现，运算子的类型与预期不符，就会自动转换类型。比如，减法运算符预期左右两侧

2022-01-17 15:32:39 485

空空如也

空空如也