1. 为什么要学习vue

1.官网

https://v3.cn.vuejs.org/guide/migration/introduction.html

2.Web前端技术的发展

早期的Web应用主要是以静态页面的浏览（比如新闻浏览），这些静态页面使用HTM语音编写。1995年，Netseape公司的工程师Brendan Eich(布兰登·艾奇）设计了JavaScript脚本语言，使前端网页具有动态的效果（跑马灯，浮动广告等)，以及与用户交互能力的表单。

然而随着互联网的发展，很多的线下业务的开始向向上发展。基于Internet的 Web应用也变越复杂，用户所访问的资源已不仅仅局限于服务器硬盘上存放的静态网页，更多的应用需要根据户的请求动态生成页面信息，复杂一些的还需要从数据库中查询数据，经过一定的运算，生成一个页面返回给用户。

• 1996年，微软公司推出了ASP技术

• 1997年，Sun公司推出了JSP技术

• 1998年6月，PHP3正式发布

由此网页开启了真正动态交互的阶段。这些服务器端的动态页面技术是的网页可以获取服务器的数据信息并保持更新，推动了以Google为代表的搜索引擎和各种论坛的出现，Web开始快速发展。服务器端网页动态交互功能不断丰富，伴随的是后端逻辑复杂度的快速上升以及及代码越来越复杂。为了更好地管理后端逻辑，出现了大量后端的MVC框架。

什么是MVC

MVC( Model-View-Controller)即模型-视图-控制层，MVC框架有助于将应用程序分割成若干逻辑部件，使程序设计变得更加容易。MVC框架提供了一种按功能对各种对象进行分割的方法，其目的:将各对象间的耦合程度降到最低

动态页面实现了动态交互和数据即时存和取，当由于动态页面是由后端技术驱动的，每一次的数据交互都需要刷新一次浏览器，频繁的页面刷新非常影响用户的体验，这个问题直到Goole公司在2004年使用Ajax技术开发的Gmail和GoogleMaps的发布后才得到解决。

Ajaxt改变了传统的用户请求――等待—―响应这种web的交互模式，采用异步交互机制避免了用户对服务器响应的等待。提供了更好的用户体验，此外，它还改变了用户请求―服务器响应一-页面刷新的用户体验方式，提供了页面局部刷新数的实现机制，Ajax开启了Web2.0时代。

由于Ajax的火热，也带动了一些古老技术的复兴，css 和javascript这两个原先被程序员瞧不上的技术收到了前所未有的关注，而这一切都源于Ajax带来的全新的用户体验。

Ajax全称是:Asynchronous Javascript And Xml即异步avascript和XML。

Ajax最早是由Adaptive Path公司的咨询顾问ese James Garrett 于2005年提出的。Garrett专门写了一篇文章来讲述Ajax这一新的Web开发方式。Ajax为用户带来了更好的用户体验，在传统的web应用程序中，用户向服务器发送一个请求，然后等待，服务器对应请求进行处理，然后返回一个响应，这是一种同步的处理方式，如果服务器处理请求的时间比较长，那么用户将不得不长时间的等待。在后台执行程序的过程中，如果执行的程序出现异常还可能导致某个业务的执行出错会影响整个的体验。

为什么Ajax服务器端早期返回的是Xml，现在是Json呢?

• 不论我们通过ajax还是正常的请求/响应，其目的都是为了获取服务器的数据。渲染页面。

• 正常的请求和响应，每种语吝都有在服务器端渲染的方式，比如: jsp+标签/el表达式。这是一种服务器端渲染方式。都是一种语言，都自家人解析认识的，

• 异步请求服务端:服务端给予客户端什么样数据格式就是命题了﹖———javascript——jsp/php/asp·如果用字符串自己拼接返回，可能会你分隔符会和具体内容冲突就不适合

• 所以早起的ajax异步处理是通过xml字符串进行传输，然后js有domxml对象可以对xml进行解析获取每个点的值，然后进行渲染

• 近几年来，后面xml比较的笨重。节点过多，层级过深，解析也一个很大的问题，所以新的数据格式应运而生: json

• 从这里要明白一个道理: xml也好还是json也好，都是一种有格式的字符串。方便你解析和获取。仅此而已。

3、JS框架的诞生

之后的一段时间，前端技术的蓬勃发展主要集中在:如何简化页面的开发与交互，相机涌现出了很多前端的js框架和库。比如:

jQuery、Dojo、ExtIS、ECharts等，直到HTML5的出现，打破了这种发展格局，随着各大浏览器纷纷开始支持HTML5。前端能够实现的交互功能越来越多，也越来越丰富。相应的代码复杂度也快速的提高。以至于用后端的:MV*的架构模式开始出现在前端部分。从2010年10月出现的Backone开始，Knockout、Angular、Ember、React、Vue相继出现。这些框架的应用，使网站从Web Site进化成了WebApp时代，开启了网站应用的SPA （Single Page Application单页应用程序）时代。

*SPA Single Page Application单页应用程序,是指有一个Web页面的应用，单页应用程序是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序，浏览器一开始会加载必颈的HTML、CSS和javascript，所有操作都在这个页面上完成，由Javascript控制交互和页面的布局刷新。

优点是:

1、前后端分离;前端工作在前端部分，后端工作在后端部分，前后端彻底分离开发，并行工作，对开发人员的技能要求也会变得更加单一，

2、良好的用户体验:用户不需要重新刷新页面，数据通过Ajax异步获取，页面显示更加流畅。

3、减轻服务器压力:服务器只需要提供数据就可以了，不用负责展示邀辑和页面合成，吞吐能力会大幅提高。*

4、共用一套后端程序代码:不用修改后端程序代码就可以同时用于web界面，手机，平板电脑等多种客户端。

*缺点是

1、初次加载耗时比较多:为了实现单页Web应用功能及显示效果，需要加载页面的时候需要将Javascript 和Css统一加载，因此第一次加载会稍微慢一些。为了减少加载时的数据流量，缩短加载时间，必须对javascript和Css代码进行合并压缩处理。

2、前进后退的问题:由于单页Web应用在一个页面中显示所有的内容，所以不能使用浏览器的前进，后退功能，如果要实现浏览器的前进和后退，需要编写额外的代码手动实现。

3、SEO难度较高:由于所有的内容都在一个页面中动态替换显示，所以在SEO上有着天然的弱势，如果站点对SEO很看重，且要用单页应用，那么可以编写一些静态页面给搜索引擎，或者通过服务器端渲染技术解决。*

4.关于前端JS现状

2015年6月，ECMAScript6发布，并被正式命名为ECMASCript2015，该版本增加了很多新的语法，极大地拓展了Javascript的开发潜力。由于浏览器对ECMAScript6语法支持滞后，出现了Babel编译器，它可以将ECMAScript6代码编译成浏览器支持的ECMAScript5的代码。

目前的前端技术已经形成一个庞大的体系:

• 以GitHub为代表的代码管理仓库

• 以NPM和Yarn为代表的包管理工具

• ECMAScript6 TypeScript和Babel构成的脚本体主

• HTML5,CSS3和相应的处理技术

• React、Vue、Angular为代表的前端框架

• 以WebPack为代表的打包工具

• 以Nodejs为基础的Express和Koa后端框架。

5.前端开发模式发展·

• 静态页面

• 异步刷新，操作DOM

• MVVM，关注模型和视图

• 基于脚手架的SPA的单页开发

2.vue的前期准备工作

1. 环境的准备

• Nodejs的准备

• Vscode的准备

2.Npm项目初始化和全局安装

• nodejs下载: http://nodejs.p2hp.com/google_vignette

• 项目初始化: npm init

• 查看全局安装位置: npm root -g

• 全局安装模块: npm install -g

• 查看全局安装模块: npm list -g或者 npm Is-g

• 查看模块的版本: npm view versions

3.Npm生成环境安装和开发环境依赖模块安装

• 生产环境

npm insta1l  --save
npm insta11  -S
#或者
npm i  --save
npm i  -s

• 开发环境

npm insta11  --save-dev
npm insta11  -D
#或者
npm i  --save-dev
npm i  -D

• 两者的区别是啥?

生产环境是指未来你安装的模块都会随着项目的打包一起编译到最后的js文件中。也是项目依赖和需要的。比如jquery,vue,bootstrap等

npm instal1 vue --save
npm insta11 vue -s
npm insta11 vue@version -s

开发环境是指只在开发阶段使用。比如项目中的: eslint。

4.关于node_modules的认识

我们后续的项目都是运行在node的环境下的。后续在项目中安装的模块都是安装在一个叫node_modules的目中。项目中会存在一个。如果你使用npm install -g module会在你的用户目录下也会创建一个node_module是文件。用来存放你全局安装的信息。当然还有一个最顶级的就是: node的安装目录下。也公有一个，这个是放的node自身的核心模块。

• npm install module --save --------------------安装到项目的node_modules

• npm install module --save -dev------------------安装到项目的node_modules

• npm install module --g----------安装到项用户目录下的node_modules

• 安装nodejs的时候-------------安装目录下有一个node_modules

他们的加载顺序是;

• 先加载工程的node_ modules，如果工程没有就加载全局用户的node_ modules，然后在加载nodejs安装目录下的node_modules信息。一层层查找上去。如果没找到就报模块没安装。需要进行安装，

5.CNPM/PNPM命令的安装

pnpm

npm insta11 -g pnpm

cnpm

npm insta11 -g cnpm --registry=https://registry.npmmirror.com

3.vue的发展史

01、概述

Vue(读音/vju/，类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Nue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。js库

02、Vue的核心功能

• 去DOM中心化:使用Vue以后摒弃了传统的dom操作元素节点的过程。-

• 前端模板引擎:使用Vue可以抛弃后端的模板引擎技术，让前后端开发成为了可能。

• **响应式绑定数据:**当数据发生改变时，视图也可以自动更新，可以不用关心DOM的操作。而专心数据操作。

• 可组合的视图组件:把页面中的视图按照功能或者模块进行切分成若干基本单元，组件可以一级级组合整个应用形成一个组件树，可维护、可重用、可测试。

• 前端路由:更流畅的用户体验，灵活地在页面切换已渲染组件的显示，不需要与后端做多余的交互。

• 状态集中管理:在VVM响应式模型基础上实现多组件之间的状态数据同步与管理。

• 前端化工程:结合webpack等前端打包工具，管理多种静态资源，代码，测试，发布等整合前端大型项目，也就是后续的脚手架开发(vue-cli/vite等)

03、发展历程

• 2013年，在Google 工作的尤雨溪，受到 Angular的启发，开发出了一款轻量框架，最初命名为Seed。

• 2013年12月，更名为Vue，图标颜色是代表勃勃生机的绿色，版本号是0.6.0.

• 2014.01.24，Vue 正式对外发布，版本号是0.8.0。

• 2014.02.25，0.9.0发布，有了自己的代号: Animatrix，此后，重要的版本都会有自己的代号。

• 2015.06.13，0.12.0，代号Dragon Ball，Laravel社区（一款流行的 PHP框架的社区〉首次使用Vue，Vue在JS社区也打响了知名度。

• 2015.10.26，1.0.0Evangelion 是Vue历史上的第一个里程碑。同年，vue-router、vuex、vue-cli 相继发布，标志着Vue从一个视图层库发展为一个渐进式框架。

• 2016.10.01，2.0.0是第二个重要的里程碑，它吸收了React的虚拟Dom方案，还支持服务端渲染。自从Vue 2.0发布之后，Vue就成了前端领域的热门话题。

• 2019.02.05，Vue发布了2.6.0，这是一个承前启后的版本，在它之后，将推出3.0.0.

• 2019.12.05，在万众期待中，尤雨溪公布了Vue3源代码，目前Vue 了处于Alpha版本

• 2020年9月18日，发布了vue3.0的正式版本

4.什么是Mvvm框架

Vue的设计模式

经典的设计模式开发有MVC、MVP、MVVM

MVVM模式

• M:即Model，模型，包括数据和一些基本操作

• v:即View，视图，页面渲染结果

• VM:即View-Model，模型与视图间的双向操作（无需开发人员干涉)

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。

而MVVM中的VM要做的事情就是把DOM操宝全封装起来，开发人员不用再关心Model和View之间是如何互相影响的:

• 只要Model发生了改变，View上自然就会表现出来。

• 当用户修改了View，Model中的数据也会跟着改变。

把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上。

小结

• 好处:数据和视图分离，便于维护和升级。

• 只要Model发生了改变，View上自然就会表现出来。

• 当用户修改了View，Model中的数据也会跟着改变

• mvvm设计的理念:视图和数据完全分离。

• MVVM : Model View VIew-model

5.Vuejs 的下载和安装

npm 安装（推荐）

Vuejs的快速入门

{{title}}

6.Vuejs的插入表达式

掌握插入值表达式的使用

插入值表达式:{{插入值表达式写在这里}}

类比学习:类似于jsp中的el表达式

作用

将data中的数据获取和展位，支持四则运算和三目运算符

小结

• 插入值表达式可以使用if判断吗?可以定义变量吗?答案是:不能

• 插值表达式，不能写在指令上。

7.vue指令

1.v-text与v-html

v-text不支持标签解析,v-html支持标签解析

2.v-bind

v-bind用于class和style时，样式时相加的不是覆盖

currentIndex:{{currentIndex}}
12345

3.v-model

v-bind 的多用于将data填入html标签的属性中

v-model多用于将值填入data中

4.v-for

记得加上index

使用v-for 的时候记得修改为v-bind:key=user.id

5.v-if

6.v-on:click

登录

可以拿到button的位置坐标等等事件$event不能改

事件分类

uI事件
unload事件
load事件
resize事件
scroll事件
error事件焦点事件用于form元素上
blur在元素失去焦点时触发。这个事件不冒泡,所有浏览器都支持。
focus在元素获得焦点时触发。这个事件不冒泡,所有浏览器都支持。
focusin在元素获得焦点时触发。这个事件冒泡,某些浏览器不支持。
focusout在元素失去焦点时触发。这个事件冒泡，某些浏览器不支持。鼠标与滚轮事件
click---用户单击鼠标左键或按下回车键触发
db1click---用户双击鼠标左键触发。
mousedown---在用户按下了任意鼠标按钮时触发。
mouseenter---在鼠标光标从元素外部首次移动到元素范围内时触发。此事件不冒泡。mouseleave---元素上方的光标移动到元素范围之外时触发。不冒泡。
mousemove---光标在元素的内部不断的移动时触发。
mouseover---鼠标指针位于一个元素外部，然后用户将首次移动到另一个元素边界之内时触发。mouseout---用户将光标从一个元素上方移动到另一个元素时触发。
mouseup---在用户释放鼠标按钮时触发。键盘和文本事件--form元素
keydown:当用户按下键盘上的任意键时触发。按住不放，会重复触发。
keypress:当用户按下键盘上的字符键时触发。按住不放，会重复触发。
keyup:当用户释放键盘上的键时触发。
textInput:这是唯一的文本事件，用意是将文本显示给用户之前更容易拦截文本。

7.v-on:keyup

8.v-on:mouseenter

9v-on事件修饰符

10v-on按键修饰符

11.v-once和 v-pre

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译。

ii this wi11 not be compiled }}

v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

This wi1l never change: {{msg}}

12、v-cloak

这个指令保持在元素上直到关联实例结束编译。和CSS规则如[v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。

13vuejs指令

1. 文本指令: v-html / v-text和插值表达式，名字也必须定义在data中。

2. 事件指令: v-on:click="事件名"，缩写:@click="事件名"，注:事件名定义在: methods中

3. 属性指令: v-bind:属性名="data的key”缩写:属性名="data的key" .注意动静拼接的问题

4. 控制指令: v-model="data的key"，用于获取form控制元素的值。如果的多余3个建议使用对象去定义和获取

5. 循环指令: v-for ="(obj, index) inf data中定义数组的名字"。

6. 条件指令: v-if / v-else-if /v-else注意中间不能出现标签，否则会出现断层。

7. 显示指令: v-show控制元素的隐藏和显示。（鼠标事件+ v-show /v-if选项卡）

8vuejs的生命周期

01、场景

现在我有一个需求，就是页面初始化完毕的时候，我就需要把接口的数据通过异步的方式加载出来。这里就有二个问题:

• 我加载这个接口的方法定义在哪里?-methods

• 定义好这个方法以后，我在哪里去加载呢?

02、概述

官网:

掌握它的生命周期是为了用它的生命周期的方法:一共8个，两两一组

这些方法不用我们触发，都是由vue自己触发的方法，知道这些方法的调用时机就可以了

创建时期: beforeCreate created

挂载时期: beforeMount mounted

更新时期: beforeUpdate updated

死亡时期: beforeDestory destoryed

这些方法不用我们触发，都是由vue自己触发的方法，知道这些方法的调用时机就可以了

,

创建时期: beforeCreate created

挂载时期:beforeMount mounted

更新时期: beforeUpdate updated

死亡时期: beforeDestory destoryed

3.方法和时期的作用

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高

04、为什么要学习生命周期:

1:是因为开放的过程，有一些逻辑的数据初始化需要在页面加载完毕的时候就去执行。那么必须要知道那个地方执行即可:

created
mounted
一般在开放中我们都会使用这个两个方法去初始化和改变数据，然后给后续进行渲染和替换。不是beforeMounte不行，是因为mounted更适合。

9.vuejs计算属性:coomputed

1、概述

在一些业务的开发中，在模板中使用表达式非常的方便，但是如果在模板中表达式的逻辑过于复杂，模板就会变得臃肿不堪且难以维护。比如:

{{message.split('').reverse(.join('')

插值表达式Mustache语法中的表达式调用了3个方法来最终实现字符串的反转，逻辑过于复杂。如果在模板中还要多次引用此处的翻转字符串，就更加难以理解和处理。这时应该使用计算属性可以很好的解决这个问题。

2.计算属性定义

如果在开发中逻辑过于复杂的时候，应该考虑计算属性，计算属性是以函数形式来进行表达，定义在computed选项中定义，

10、Vuejs监控属性:watch

01、概述

在vue中还提供了一个非常通用的方式来观察和相应实例上的数据变动:监听器。当有一些数据需要随着它自身数据变化而变动时。就可以使用监听器。怎么听起来好像和计算属性的作用差不多。从功能上来说是的。但是两者还是存在很大的差别。

computed[-----watcher-----message/watch----price}

• 因为computed是一个多对一关系，而watch更多是一对一关系。

• computed是监听响应式多个响应式属性数据的变化，watch是监听响应式属性自身的变化而得到另外一个结果。

• watch更多是一种监听自身的变*，然后得到一个结果，而computed注重的是计算能力。也就是说watch可以把你监听的属性进行整容和改头换面。只能一个个监听。而jcomputed就是可以监听多个响应式属性，可以把它们一起改头换面。

watch一般用于，监听响应式属性自身的变化，得到另外一个结果，它没有返回值默认情况: computed会执行一次，而watch是不会

11.Vue3

01、Vue3初认识的Web开发和构建

官网: https://cn.vuejs.org/

01、概述

在前面的课程中我们已经学习了Vue2相关的知识，但是其实在2019年的时候，Vue2已经升级到了Vue3.x。如下:

• 2019.02.05，Vue发布了2.6.0，这是一个承前启后的版本，在它之后，将推出3.0.0.

• 2019.12.05，在万众期待中，尤雨溪公布了Vue 3源代码，目前Vue 3处于 Alpha版本。. 2020年9月18日，发布了vue3.0的正式版本

02、Vue3.0给我们带来的变化

• 更小的尺寸和更快的速度

• vue2时代,最小被压缩也得差不多20kb

• vue3以后，压缩版本只有:10kb左右，所以可以获取更快的响应和加速速度

• 更加现代化的语法特性,加强Typescript的支持

• 在vue3中，对虚拟dom进行了设计也进行了优化，这样可以让页面的渲染和编译速度更快·

• 在API设计方面，增强统一性和一致性

• 在Vue3中开始采用函数风格的API。在vue3中引入了组合式API的setup，可以让组件的逻辑更加的聚合。

• 提高了前端工程的可维护性，更强大的功能，提供开发者的效率。

03、再次理解渐进式框架

Vue是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但Web世界是十分多样化的，不同的开发者在Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue的设计非常注重灵活性和“可以被逐步集成"这个特点。根据你的需求场景，你可以用不同的方式使用Vue:

• 无需构建步骤，渐进式增强静态的HTML·在任何页面中作为Web Components嵌入·单页应用(SPA)

• 全栈/服务端渲染(SSR)

• Jamstack/静态站点生成(SSG)

• 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

如果你是初学者，可能会觉得这些概念有些复杂。别担心!理解教程和指南的内容只需要具备基础的HTML和 JavaScript知识。即使你不是这些方面的专家，也能够跟得上。

04、后续的开发模式

• Vue2+ Html网页开发

• Vue3 + Html网页开发(建议从这里开始，但是)

• Vue-cli +Vue2/Vue3+ JS/TS＋开启SPA单页时代开发

• Vite + Vue3+ JS/TS +开启SPA单页时代开发

02、何谓单文件应用程序

在大多数启用了构建工具的Vue项目中，我们可以使用一种类似HTML格式的文件来书写Vue组件，它被称为单文件组件(也被称为*.vue文件，英文Single-File Components，缩写为SFC)。顾名思义，Vue的单文件组件会将一个组件的逻辑(JavaScript)，模板(HTML)和样式(CSS)封装在同一个文件里。下面我们将用单文件组件的格式重写上面的计数器示例:

CourseView.vue

4vue2：组件通信-父向子通信-defineProps

5vue2：组件通信-子向父通信-defineEmits

6vue3组件通讯-ref的方式definEpose（）父调用子

7vue3组件通讯-使用provide/inject-子调用父

8teleport的应用

9组件的缓存

15vuejs高级编程-插槽slot

16vuejs路由v-router

1概述

2路由安装

3路由快速入门

4.路由跳转和转发

5带参数的动态路由匹配

6.嵌套路由

//1.导入router的创建对象createRouter
//web模式createWebHistory http://localhost:5173/user
// hash模式createWebHistory http://localhost:5173/#user
import {createRouter,createWebHistory} from "vue-router";
import IndexViews from '../views/IndexViews.vue'
//静态导入
//异步导入：异步导入，按需加载
//动态导入:addRoute
//2.创建路由对象
const router = createRouter({//指定路由模式history:createWebHistory(import.meta.env.BASE_URL),//定义地址和视图的配置和映射routes:[{path:"/",name:"index",component:IndexViews,children:[{path:"",name:"home",component:()=>import ('../views/home/HomeView.vue')},{path:"/bbs",name:"bbs",component:()=>import ('../views/bbs/BbsViews.vue')},{path:"/category",name:"category",component:()=>import ('../views/category/CategoryViews.vue')},{path:"/about",name:"about",component:()=>import ('../views/about/AboutViews.vue')},{path:"/bbs/detail/:id",name:"bbsdetail",component:()=>import ('../views/bbs/BbsDetailViews.vue')}]},{path:"/login",name:"login",component:()=>import ('../views/LoginViews.vue')}]
})
//3.到处路由
export default router

7.编程式路由

8.导航守护

9.捕获所有路由或404 not found 路由

17: VueJs状态管理pinia

官网: https://pinia.vuejs.org/zh/

01、pinia的简单介绍

Pinia最初是在2019年11月左右重新设计使用CompositionAPI的Vue商店外观的实验。

从那时起，最初的原则相同，但 Pinia适用于Vue 2和Vue 3

并且不需要你使用组合API.

除了安装和SSR之外，还有其他的API是一样的。

并且这些针对Vue 3，并在必要时提供 Vue 2的相关注释。

以便Vue 2和 Vue 3的用户可以阅读!

02、为什么要使用Pina?

Pinia是Vue的存储库，

允许您跨组件/页面共享状态。

如果您的组合API，您可能会认为您可以使用简单的export const state = reactive()这对于单页应用程序来说是正确的,

但如果它是服务器端的外观，将您的应用程序显示给安全漏洞。但即使在小型单页应用程序中，您也可以从使用Pinia中获得好处:

1. 开发工具支持

2. 动作、追踪的跟踪

3. 热模块更换

4. 为JS用户提供适当功能的TypeScript支持或自动完成

3.安装

4创建文件夹和文件-存放数据

4使用选项式的方式定义-permission.js

4使用组合式setup的方式定义-user.js

5.你应该选用哪种语法

6.获取store中的值第一种方法

18.vuejs高级编程-axios

封装的request.js