摘要：
pnpm安装 一些优势：比同类工具快 2倍 左右、节省磁盘空间... https://www.pnpm.cn/ 安装方式：npm install -g pnpm 创建项目：pnpm create vue ESLint & prettier 配置代码风格 环境同步： 安装了插件 ESlint，开启保存 阅读全文
摘要：
什么是Pinia 官方文档：https://pinia.vuejs.org/zh/introduction.html Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话，你可能会认为可以通过一行简单的 export const state = re 阅读全文
摘要：
官网 https://cn.vuejs.org/guide/quick-start.html 再vue3中采用的是组合式API风格(组合式 API (Composition API)) 通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 <s 阅读全文
摘要：
打包发布 目标：明确打包的作用 说明：vue脚手架只是开发过程中，协助开发的工具，当真正开发完了，脚手架不参与上线 打包的作用： 将多个文件压缩合并成一个文件 语法降级 less sass ts 语法解析 .... 打包后，可以生成，浏览器能够直接运行的网页 命令：npm run build 打包完 阅读全文
摘要：
概述 再日常开发中，对于组件内部的方法多处存在相同的特点，往往会抽离出一个公共的方法方便调用，但是由于多个组件可能都需要用到这个方法，所以通过mixin混入的方式，将该方法独立抽离出来，方便多个组件的使用。 步骤 再src目录下创建一个mixins 再该目录下创建一个xxxx.js文件 编写对应的j 阅读全文
摘要：
Vue-加入购物车-判断token添加登录提示 目标：给未登录的用户，添加登录提示 说明：加入购物车，是一个登录后的用户 才能进行的操作，所以需要进行鉴权判断，判断用户token是否存在 若存在：继续加入购物车操作 不存在：提示用户未登录，引导到登录页，登录完回跳 addCart () { // 判 阅读全文
摘要：
自定义数字框组件如下 <template> <div class="count-box"> <button @click="handleSub" class="minus">-</button> <input :value="value" @change="handleChange" class=" 阅读全文
摘要：
搜索-历史记录管理 目标：构建搜索页的静态布局，完成历史记录的管理 需求： 搜索历史基本渲染 点击搜索（添加历史） 点击搜索按钮 或底下历史记录，都能进行搜索 若之前没有相同搜索关键字，则直接追加到最前面 若之前已有相同搜索关键字，将该原有关键字移除，在追加（相当于置顶） 清空历史：添加清空图标，可 阅读全文
摘要：
页面访问拦截 目标：基于全局前置守卫，进行页面访问拦截处理 说明：对于一个项目来说，大部分的页面，游客都可以直接访问，如遇到需要登录才能进行的操作，提示并跳转到登录，但是：对于支付页，订单页等，必须是登录的用户才能访问，游客不能进入该页面，需要做拦截处理 路由导航守卫-全局前置守卫 所有的路由一旦被 阅读全文
摘要：
概述 在实际开发场景中，我们需要对每一次的请求做一个loading效果，使得让用户知道正在提交中，此时需要给用户添加loading提示 好处 节流处理：防止用户在一次请求还没回来之前，多次进行点击，发送无效请求 友好提示：告知用户，目前是在加载中，请耐心等待，用户体验会更好 步骤 请求拦截器中，每次 阅读全文
