参考文章：pinia踩坑总结报错分析在项目中使用到了pinia，其中vue配置了CDN，开发环境下一切正常，部署后报了如下的错误：Failedtoresolvemodulespecifier"vue".Relativereferencesmuststartwitheither"/","./",or"../".随后我关闭了CDN，再次部署，报错就没了，难道问题出在了CDN配置上？但是，当我继续使用CDN，通过配置2个不同的路由页面，一个页面使用了pinia，另一个页面不使用pinia时，发现不使用pinia的页面是可以进行路由跳转的，使用了pinia的页面依然报错导致路由无法跳转，所以问题应该还
前言如果对vue3的语法不熟悉的，可以移步 Vue3.0基础入门Vue3.0基础入门快速入门。UI组件请参考官网：NaiveUi官网为什么选择naiveui不继续用elementui，因为尤大大推荐，可以尝试下，而且naiveui更贴近vue3的语法，当然易上手还是elementui好一点。github开源库：Vue3-Vite-Pinia-Naive-Jsgitee 开源库：Vue3-Vite-Pinia-Naive-Js1.安装依赖yarnaddnaive-ui-D//ornpminstallnaive-ui-D 2.在SFC(单文件组件)中使用直接引入（推荐），你可以直接导入组件并使用
VueUse函数库 VueUse是一个库，收集了在使用Vue2/Vue3CompositionAPI时可以使用的有用函数。使用CompositionAPI，您可以通过将反应变量和逻辑与组件分开来创建可重用的函数，因此您可以创建像VueUse这样的库。 在Vue的CompositionAPI中，可重用的函数（例如VueUse中包含的函数）称为可组合函数。仅Composables这个名称并不能让您了解它是什么，因此本文档解释了如何使用VueUse以及如何创建Composables功能。它还解释了如何创建可组合组件，而不仅仅是函数。 如果你看一下VueUse的功能，有一些你可以自己创建，但是注
Vuex状态管理 Vuex是一种集中管理所有组件中数据的机制。它和Pinia一样都是解决使用props和$emit事件在组件之间传递数据时，当组件之间频繁传递，层级增加时管理数据就变得困难。Vue的官方状态管理库已更改为Pinia，Pinia具有与Vue几乎完全相同它还增强的很多API的功能。Vuex虽然仍在维护中，但是它不会在添加的新功能了，Vuex应用程序迁移到Pinia它可能会是一个更好的选择。在这里我们还会讲解一下Vuex的使用方法，以方便大家在迁移Vuex的时候更加方便。Vuex官网https://vuex.vuejs.org/创建项目后，进入项目文件夹，执行npminstall命
前言说好的路由篇，怎么变成完结篇了？是这样的，本来计划这篇只写路由的，后来构思的时候发现路由篇的前置和关联知识实在太多了，我觉得权限这一块和路由一起讲比较好，但是讲到权限，那登录肯定也少不了吧，涉及到登录那axios封装自然也少不了喽，封装好了axios那么mock也要集成进来，索性就把剩下部分全讲了吧，就当是把之前拖更的补上吧。最后总结出这一篇具体讲以下几块内容常用工具类封装axios封装mock集成路由集成Pinia集成登录页路由守卫（权限等）警告！！以下内容全程干货，代码过多，为防出错，文末会提供本篇内容的源码仓库以共查缺补漏~常用工具类封装一、在src目录下新建utils/is.jsu
以下是一些Pinia的其他高阶功能：storeToRefs()：响应式解构仓库，保证解构出来的数据是响应式的数据。状态持久化：Pinia并没有内置的状态持久化功能，但你可以使用第三方库或自定义插件来实现状态的持久化。例如，你可以使用 localStorage 或 sessionStorage 来将状态保存在客户端。插件系统：Pinia允许你编写自定义插件，以扩展和定制状态管理功能。你可以创建插件来处理持久化、日志记录、错误处理等任务，以适应你的特定需求。响应式解构storeToRefs()背景在组件中访问仓库state,getters,actions时，总要在变量名前面带上仓库实例名，像下面这
一、简介Pinia是Vue的专属状态管理库，它允许你跨组件或页面共享状态。它跟Vuex有一定的相似度，但还是有很大的区别。愿意看这篇博客的人，想必已经看过了官方文档，官方文档很详细，包含各种使用情景和理论，因此本文不说理论，只说具体的使用方法，想深入研究的建议去看官方文档，本文适合拿来即用。Pinia官方文档二、使用方法1.安装yarnaddpinia#或者使用npmnpminstallpinia2.引入main.tsimport{createApp}from'vue'import{createPinia}from'pinia'importAppfrom'./App.vue'constpini
我们都知道在vue2项目里搭配状态管理vuex3XX使用，效果极好的。虽然在vue3项目里，vuex4XX仍能发挥余热，但由于缺乏对于ts的支持，使得类型推断陷入僵局。所以在vue3+ts的项目里，vuex渐被舍弃，pinia取而代之。（尤雨溪亦力荐之）pinia官网下面是在vue3+ts项目里如何使用pinia步骤这里是如何从零开始由vite构建vue3+ts项目的流程介绍1下载pinia插件npmipinia2引入和使用插件main.tsimport{createApp}from'vue'import'./style.css'importAppfrom'./App.vue'importro
报错会报两个一个是xxxStoreWEBPACK_IMPORTED_MODULE_1__.default)isnotafunction还有一个是getActivePiniawascalledwithnoactivePinia因为接到了要在路由守卫中增加判断的需求，需要用到store中的数据，于是在router里面import了store，beforeEach里use了，然后启动就报异常，去官网翻文档。（https://pinia.web3doc.top/core-concepts/outside-component-usage.html）大概的意思是要在初始化了pinia之后调用才行，得把us
使用defineStore创建一个store,每个store要设置一个唯一id；import{defineStore}from'pinia'import{ref}from'vue'//useStore可以是useUser、useCart之类的任何东西//第一个参数是应用程序中store的唯一idexportconstuseMainStore=defineStore('main',{//otheroptions...constname=ref('cherish') constcount=ref(0)return{ name,count }})改变state的值时不需要借助mutation(pin
