酒客的博客

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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时，其判断

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

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

Vue重要知识点总结(三)一、Vue CLI详解1.CLI–Command-Line Interface翻译为命令行界面，但是促成脚手架，Vue CLI 是一个官方发布的Vue.js项目脚手架，使用vue-cli可以快速搭建Vue环境以及webpack配置。​ 使用CLI的前提–Node，npm，webpack的全局安装2.CLI的使用vue-cli2的初始化方式:vue init webpack 项目名vue-cli3/cli4的初始化方式:vue ui或者Vue create 项目名3.v

Vue重要知识点总结(二)Vue.js组件化开发1.认识组件化​ 我们面对复杂的问题时，我们不太可能一次性全部搞定，但是我们可以将这个复杂的问题，进行拆解，拆解成一个一个可以处理的小问题，最后在放到整体中，这样一个很复杂的问题就会被解决。​ 组件化也是这样的思想，它提供了一种抽象，让我们可以开发出一个一个独立复用的组件来构造我们的应用。任何的应用都会被抽象成一颗组件树。2.注册组件注册组件的步骤1.创建组件构造器const cpn=Vue.extend({里面接受一个模板})2.注册组件

Vue2supermarket项目重难点解读GitHub地址：git@github.com:2019083310/supermall.git一.首页1.轮播图的封装如何实现2.数据请求结构以及实现方式Home中data的结构：goods:{ 'pop':{page:0,list:[]}, 'new':{page:0,list:[]}, 'sell':{page:0,list:[]}}在组件创建的时候，在created(){}声明周期函数中用axios网络请求,axio

Vue2重要知识点总结（一）Vue.js基础语法1.Vue.js的特点可复用的组件前端路由技术(vue-router)状态管理(vuex)虚拟DOM解耦视图和数据2.Vue.js的安装方式一:cdn引入方式二:npm包下载方式三:下载引入3.Vue中的MVVMMVVM:即M-Model(数据层),v-VIEW(视图层),VM-ViewModel(视图模型层) View层-->通常就是DOM层,给用户展示各种信息 Model层-->数据层,存放的数据，可能是固定的