孙婷婷的博客-优快云博客

原创 element-plus的安装（Vue3）

安装：使用pnpm工具安装Element Plus（pnpm工具安装命令：npm install -g pnpm）然后把下列代码插入到你的 `Vite` 或 `Webpack` 的配置文件中。好了可以直接使用了。

2024-04-10 16:00:01 445 1

原创 element-plus里面的抽屉Drawer的使用

思路：1，父组件定义触发按钮的方法（暂时定义空方法，不写逻辑）2. 子组件，写抽屉代码，给抽屉添加v-mode，双向绑定的变量的值为布尔值true/false，打开/关闭抽屉3.子组件向外暴露一个方法，方法内容为v-model的值等于= true，打开抽屉4. 父组件在子组件标签上面添加ref属性，用以打标记，便于引用子组件5. 定义父组件按钮的代码逻辑：引用子组件暴露的方法。打开了抽屉

2024-04-10 15:46:57 1854 1

原创启动项目报错Error: Cannot find module ‘G:\xxx\vue3xxx\node_modules\vite\bin\vite.js‘

启动项目报错Error: Cannot find module 'G:\xxx\vue3xxx\node_modules\vite\bin\vite.js'

2024-03-27 10:27:09 815 1

原创实现pinia持久化存储

【代码】实现pinia持久化存储。

2024-03-02 12:35:42 1445

原创 cnpm命令执行不了，错误？解决办法

此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。所在位置行:1 字符: 1.........运行cnpm命令下载包的时候，显示此系统上禁止运行脚本。再去使用cnpm命令吧，发现可以用了！

2024-02-29 14:49:57 914

原创安装vue-devtools谷歌浏览器扩展工具

二、选择【推荐下载】----下载成功----解压缩----打开文件夹--里面有个后缀名为 .crx 的文件。在谷歌浏览器地址栏输入：chrome://extensions/ 就会出现扩展程序页面。三、把.crx文件拖拽到页面。

2024-02-20 12:14:35 673 1

使用v-for渲染，渲染的数据源是刚刚写的计算属性filterItems，属性里面是搜索的结果。filter()：创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。那么，肯定是根据情况显示的，这时候，就需要互斥，v-if和v-else，所以，分别设置条件。搜索框输入内容时，显示过滤后的结果，不用判断直接v-else。1. 需要数据，使用v-for渲染表格列表，数据是一个数组，或者从后端获取。使用数组的filter方法，过滤包含搜索关键字的每一项，并返回。全部数据列表：加上v-if。

2023-12-01 13:23:16 1453 1

原创循环渲染多个复选框checkbox

4. 注意：isChecked的值为[ ]空数组。因为多个复选框的选中状态也不一样，需要接收多个状态，多个要用数组的形式接收。有些人使用true/false，结果一点击复选框，就会全选，全部都是一个状态。1. 定义一个div容器，里面包含多个复选框，复选框的数据来源是后台数据，为数组。主要展示通过后台数据，循环渲染多个复选框，并解决同时选中和同时取消的问题。3. 通过Input标签，获取复选框的选中状态，使用v-model。2. 在div容器标签中，接收该数组, v-for循环渲染。

2023-10-30 17:00:16 506 1