- 博客(72)
- 收藏
- 关注
RSS订阅原创 Vue3实战Easy云盘（三）：文件删除+文件移动+目录导航+上传优化/文件过滤/搜索
（因为文件移动到哪个文件夹，文件保存到哪个文件夹都要用到，所以封装一个全局组件）别忘记在Main.js中引入src/components/FolderSelect.vue（不全面，未添加导航）-- 移动/保存到哪个文件夹组件 --><template><div>-- 弹出的对话框组件Dialog --><Dialog-- 目录导航 -->-- 文件夹列表 -->-- 每一项文件夹 --><div-- 文件类型为0时即文件夹就显示文件夹的图标 -->-- 每个文件夹的名字 -->
2024-05-13 19:14:06
191
原创 Vue3项目Easy云盘（二）：文件列表+新建目录+文件重命名+文件上传
上传任务</span><span class="tips">（仅展示本次上传任务）
2024-05-12 15:33:48
588
原创 JS代码随想录（一）：数组
错解： （未使用二分法）正解：左闭右闭： 左闭右开：三、 移除元素（快慢指针法）正确：四、有序数组的平方（双指针法） 正解：五、长度最小的子数组 （滑动窗口）正解：六、螺旋矩阵正解： 七、总结
2024-05-11 21:32:09
1030
原创 vue3实战Easy云盘（一）：创建项目+登录注册页面+构建框架页+上传头像/修改密码/退出登录
（需要前后端源码的可以评论或者私信），这一部分记录的不全面。（2）封装全局组件AvatarUpload（上传图片）（1）封装UpdatePassword.vue组件。（2）在Framework.vue引入，使用组件。（1）封装UpdateAvatar.vue组件。（3）Framework.vue中引入使用。（3）添加点击事件，点击事件回调。（2）main.js引入和配置。（4）main.js引入使用。（3）添加api接口。
2024-05-10 14:39:23
341
原创 echarts学习笔记：柱状图+雷达图+双环形图+地图可视化+数据传递关系图+关键词条图+数据总览图+AntV/G2/DataV
基于vite和tailwindcss创建项目,使用js。
2024-05-07 18:39:16
333
原创 挑战一周完成Vue3项目Day5：数据大屏+菜单权限+按钮权限
自定义指令// 获取对应的用户仓库// 全局自定义指令：实现按钮的权限// 代表使用这个全局指令的DOM|组件挂载完毕的时候会执行一次// 自定义指令右侧的数值：如果在用户信息buttons数组中没有// 从DOM树上干掉if (!},})在main.ts文件中引入自定义指令文件// 引入自定义指令文件此处以trademark作为例子，项目中其他按钮的权限都需要配置完结！后续还会复习项目总结一波！也会在做一个项目，有需要的可以关注！
2024-05-03 19:55:51
678
原创 挑战一周完成Vue3项目Day4: 用户管理+角色管理+菜单管理+首页+暗黑模式/主题切换
（2）给抽屉的身体部分添加校验规则:rules="rules"（告诉表单数据数据收集:model="userParams"并给表单项添加prop）收集到新增的职位数据》表单校验》判断》再次获取全部已有数据》清空数据》清空错误提示》将对话框隐藏（记得更新返回的是当前页还是添加上一页）需要收集参数（当前用户id,收集到的职位id）》分配用户职位（判断，提示信息，获取更新完毕用户的信息，更新后留在当前页）携带职位的id，选中节点的id，半选的id》下发权限》判断》页面刷新window。
2024-05-02 20:26:22
989
2
原创 挑战一周完成Vue3项目Day3: 品牌管理+平台属性管理+SPU管理+SKU管理
/ 定义用户相关数据的ts类型// 用户登录接口携带参数的ts类型// 定义全部接口返回数据都拥有的ts类型// 定义登录接口返回数据类型// 定义获取用户信息返回的数据类型data: {// 统一管理项目用户相关的接口// 项目用户相关的请求地址enum API {// 暴露请求函数// 登录接口// 获取用户信息// 退出登录// 已有的品牌的ts数据类型id?: number// 包含全部品牌数据的ts类型// 获取的已有全部品牌的数据ts类型data: {
2024-04-30 21:50:40
665
原创 挑战一周完成Vue3项目Day2:路由配置+登录模块+layout组件+路由鉴权
我们要做的，封装用户仓库数据ts类型的定义 ，因为之前在user.ts里面使用了很多未封装未声明类型的ts数据，写的也很长，所以需要封装一下。（1）定义小仓库数据state类型：src\store\modules\types\type.ts// 定义小仓库数据state类型（2）登录接口返回的数据类型：src\api\user\type.ts登录请求可能返回成功/失败的数据，因此类型需要dataType需要包括成功的数据token和失败的数据message，且是可选的，要加上"?token?
2024-04-24 20:27:21
1021
2
原创 vuedevtools图标不亮不能使用，显示vue.js not detected
链接: https://pan.baidu.com/s/1zKEgGxT5uAvofpD-T1Oa_w?pwd=72m5 提取码: 72m5。解决办法，在vite.config.ts添加如下代码。根本原因就是下载的vue开发者工具不对，没有编译。解压后拖拽此文件到chrome的拓展程序。下载我已经编译好的shellchrome。显示的错误不用管，这样就亮了。
2024-04-22 11:44:43
352
1
原创 挑战一周完成Vue3实战项目硅谷甄选Day1：项目初始化、项目配置、项目集成
/ 登录接口需要携带参数ts类型// 登录接口返回的数据类型// 定义服务器返回用户信息相关的数据类型data: user。
2024-04-19 11:55:28
1028
原创 （亲测有效）win7安装nodejs高版本（18.8.0）
现在学习vue3,vite,使用pnpm创建项目都需要高版本的nodejs了，win7最高只能安装13版本，好多已经不支持了。那么我们安装的16.4.0版本在写项目时基本都可以使用，当然此篇只是以安装16.4.0为例，可以替换成更高的18或者20版本，只是太高的话可能出现冲突，够用就好。希望对各位小伙伴有帮助。
2024-04-18 13:28:24
585
原创 Vue3（六）：Vue3其他API、Vue3新组件Teleport、Vue2和3区别
通过使用 [shallowRef()]和[shallowReactive()来绕开深度响应。浅层式 `API` 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本，这使得属性的访问变得更快，可提升性能。就是当你只关心修改整体的时候就可以用这两个属性。
2024-04-17 15:56:51
745
原创 Vue3（五）：组件通信详解（九种方法）
自定义事件常用于：子 => 父- 事件名是特定的（click、dbdlick、change等等）- 事件对象`$event`: 是包含事件相关信息的对象（`pageX`、`pageY`、`target`、`keyCode`）- 事件名是任意名称- 事件对象`$event`: 是调用`emit`时所提供的数据，可以是任意类型！！！vue2中 @click是自定义事件，可以通过.native修饰符变为原生DOM事件。
2024-04-16 20:41:46
683
原创 Vue3（四）：Pinia
Pinia是一个专门为Vue.js设计的状态管理库，它提供了一种简单和直观的方式来管理应用程序的状态。在使用Pinia时，可以轻松地创建定义状态的存储，然后将其与Vue组件绑定，使它们能够使用该状态。和上一个博客提到的Vuex相比，Pinia 更加简单易用，体积更小，同时具有更好的 TypeScript 支持和插件系统。在Vue.js的官网中，我们可以看到Pinia目前已经取代Vuex,成为Vue生态系统的一部分。
2024-04-15 22:11:12
636
原创 Vue3（三）：生命周期、路由、自定义hooks
hook本质是一个函数，用use开头，把setup函数中使用的Composition API进行了封装。可以更方便我们去复用处理数据的逻辑.有时候我们会写很多数据和方法，如果都写在Person.vue会很大很复杂也不好修改，所以我们可以在src下新建hooks文件夹 ，建立useDog.ts和useSum.ts，拆分Person.vue中的东西。
2024-04-14 14:31:17
1348
原创 Vue3（二）：报错调试，vue3响应式原理、computed和watch,ref,props,接口
setup`是`Vue3`中一个新的配置项，值是一个函数，它是 `Composition API`表演的舞台，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在`setup`中。- `setup`函数返回的对象中的内容，可直接在模板中使用。- `setup`中访问`this`是`undefined`。- `setup`函数会在`beforeCreate`之前调用，它是“领先”所有钩子执行的。直接写数据名即可，监视的是其`value`值的改变
2024-04-13 16:23:56
997
原创 Vue3（一）：win7使用vue-cli创建vue3工程
因为我的是 win7系统，之前在学习vue2的时候，一直用的是vue-cli 2.9.6版本。Check the features needed for your project - 多选择上 TypeScript，特别注意点空格是选择，点回车是下一步。安装完成后再次查看自己的vue-cli版本（vue -V）我的升级之后是@vue/cli 5.0.8。npm install -g @vue/cli（重新安装最新版本的vue-cli）npm install -g vue-cli（卸载之前的vue-cli）
2024-04-11 15:55:52
1120
原创 element-ui的按需引入报错解决：MoudleBuildFailed，完整引入和按需引入
官网： Element - The world's most popular Vue UI frameworknpm i element-ui -S在 main.js 中写入以下内容：App.vue（3）效果：2.按需引入（1）下载;然后，将 .babelrc 修改为：此处疑问？？？？？出现MoudleBuildError报错，按照老师的修改es2015依然报错。 （我与张天宇老师的脚手架版本不一样，我的是较低版本的vue-cli，所以有.babelrc这个文件）接下
2024-04-10 19:44:18
510
原创 Vue2（十五）：replace属性、编程式路由导航、缓存路由组件、路由组件独有钩子、路由守卫、history与hash
1、作用：控制路由跳转时操作浏览器历史记录的模式2、浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push3、如何开启replace模式：News， 加一个replace即可理解：如果你用的是默认的push，你点击进入到下一个路由的时候可以返回到上一个路由。
2024-04-10 15:12:37
1375
1
原创 Vue2（十四）：路由的使用及注意点、嵌套路由、路由的query和params参数、props配置
1、路由就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。2、key 为路径, value 可能是 function 或 component组件3、vue 的一个插件库（vue-router），专门用来实现 SPA 应用。
2024-04-08 14:27:43
931
原创 （已解决）引入本地bootstrap无效，bootstrap和jquery的引入
首先我是跟着张天宇老师下载的bootstrap文件，新建了一个css文件夹，但是这样子<link rel="stylesheet" type="text/css" src="./css/bootstrap.css">在index.html引入没有用。（老师是在index.html引入<link rel="stylesheet" type="text/css" src="./css/bootstrap.css">,把这个删了不用在这里引入）
2024-04-07 20:43:02
447
原创 Vue2（十三）：Vuex环境搭建、Vuex工作原理、几个配置项、多组件共享数据、Vuex模块化
JS执行的时候会把import提升到顶部，与摆放顺序无关，如果放在main.js里 import store from './store' 无论放到哪里都会比Vue.use(Vuex)先执行，要想把 Vue.use(Vuex) 要放到实例化之前只有放进index.js。在此文件中引入插件并使用vuex插件，使用vuex插件必须在引入store之前，如果在main.js中引入和使用vuex的话，由于js文件里所有的import语句都会提升到最开始执行，所以会报错滴。注意Vue2一定要安装vuex3，如果是。
2024-04-06 15:45:50
618
原创 报错（已解决）uncaught referenceerror:vuex/store is not defined
我把关于创建和暴露store的又。
2024-04-05 22:39:45
319
原创 Vue（十二）：脚手架配置代理，github案例，插槽
如果数据不在App中了，而在Category.vue中，然后App.vue要用到数据，这时我们就可以在Category.vue中使用slot标签给父组件App传值，写法很像当时父给子传值的props写法，在标签里搞个:games="games"，然后用到插槽的地方必须使用template标签包裹，并且配置scope属性来接收数据，接过来的是一个对象。这样的话在传数据时就要在不同的事件节点去触发全局事件并且传不同的值，比较好的做法是数据配置到对象里，传值也传一个对象，这样写起来比较方便。
2024-04-01 11:41:18
694
原创 求助（已解决）：配置脚手架代理，跨域问题proxyTable配置无效，访问后显示404？
已经在这里卡了一天了。找了很多解决办法，比如重启，修改proxytable等等，但是每次但是404，求助各位大佬，怎么解决？
2024-03-27 10:54:45
132
原创 Vue2（十一）：全局事件总线、消息订阅与发布pubsub、TodoList的编辑功能、$nextTick、过渡与动画
/挂载完成后给全局事件总线添加事件},//最好在销毁前解绑},
2024-03-25 21:32:43
1460
原创 （已解决）vue运行时出现Moudle Bulid error: this.getoptios is not a function at........
点击package.json 即可查看less-loader版本，我之前的版本是12.0，太高了，出现了不兼容的问题。我安装的是4.1.0版本。
2024-03-25 10:38:25
154
原创 Vue2（九）：浏览器本地存储、组件自定义事件、TodoList自定义事件
1、一种组件间通信的方式，适用于：子组件 ===> 父组件2、使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B的标签绑定自定义事件（事件的回调在A中，用来接收数据）。3、绑定自定义事件：<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>......（3）若想让自定义事件只能触发一次，可以使用.once修饰符，或$once方法。4、触发自定义事件：this.$emit('atguigu',数据)给谁绑的就找谁触发。
2024-03-24 17:15:42
1227
原创 Vue2（九）：尚硅谷TodoList案例（初级版）：组件化编码流程的使用
(1)拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。(2)实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：一个组件在用：放在组件自身即可。一些组件在用：放在他们共同的父组件上（状态提升）。(3)实现交互：从绑定事件开始。
2024-03-22 21:08:57
761
原创 Vue2（八）：脚手架结构、render函数、ref属性、props配置项、mixin(混入)、插件、scoped样式
定义在另一个js文件中，这里定义在mixin.js中methods: {},console.log('混合里的mounted优先调用');可以在另一个js中配置插件，然后通过import引入到main.js中看看下面的代码，复习复习之前的知识//第一个参数是Vue构造函数//后面的参数是使用者传进来的东西123//1.定义一个全局过滤器//返回值别忘了});//2.定义一个全局自定义指令,元素默认获取焦点},el.focus();},})
2024-03-19 20:54:54
1109
原创 Vue2（七）：超详细vue开发环境搭建（win7），nodejs下载与安装，安装淘宝镜像（报错已解决），配置脚手架
本来想粗略写一下的，但是搭建脚手架的时候，遇到了很多问题，浪费快两天时间，记录一下自己的解决办法希望对你们有帮助！
2024-03-19 16:26:33
1480
2
原创 Vue2（六）：生命周期、组件、组件的嵌套、VueComponent构造函数、单文件组件
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；（1）el不要写，为什么？最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。备注：使用template可以配置组件结构。（2）data必须写成函数，为什么？避免组件被复用时，数据存在引用关系，比如我父组件要多次复用一个子组件，那如果其中一个子组件做了修改数据操作，其他复用的地方数据也会被修改。看看下面的代码，就明白了。
2024-03-16 11:56:24
866
原创 Vue2（五）：收集表单数据、过滤器、内置指令和自定义指令
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理比如价格1999改成1,999等需求，复杂的用计算属性或方法）。语法：1、注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}2、使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"（第二种几乎不用）备注：1、过滤器也可以接收额外参数、多个过滤器也可以串联2、并没有改变原本的数据, 是产生新的对应的数据。
2024-03-13 18:08:08
973
原创 Vue2（四）：Vue监测数据的原理（对象，数组），Vue.set的使用方法
如果我要点击按钮实现更新冯万宁儿的信息，那么如果一个属性一个属性地改，可以修改成功，并且Vue也会检测到并更新到页面。但是我如果直接把要修改的信息写在this.persons[0] = { id: 001, name: '冯千宁儿', age: 66, sex: '女' };这里，就不行，Vue监测不到并且不更新到页面，这是为什么？
2024-03-12 17:49:18
1009
原创 Vue（三）：样式绑定、条件渲染、列表渲染、列表过滤与列表排序
绑定样式：1.class样式写法：class="xxx”xxx可以是字符串、对象、数组。字符串写法适用于：类名不确定，要动态获取。对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。2.style样式:style="{fontSize:xxx}"其中xxx是动态值。:style="[a,b]"其中a、b是样式对象。1、用于展示列表数据。
2024-03-11 18:22:52
854
原创 Vue（二）：事件处理，计算属性、监视属性及二者的区别
3. 计算属性总结定义：要用的属性不存在，要通过Vue中已有属性计算得来。原理：底层借助了Objcet.defineproperty方法提供的getter和setter。get函数什么时候执行？(1).初次读取时会执行一次。(2).当依赖的数据发生改变时会被再次调用。优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。备注：1.计算属性最终会出现在vm上，直接读取使用即可，不用加括号，和methods区别一下子。
2024-03-09 15:32:44
903
原创 Vue2（一）：初识Vue、模板语法、数据绑定、el和data的两种写法、MVVM、数据代理、事件
Vue是一套用于构建用户界面的渐进式JavaScript框架。Vue可以自底向上逐层的应用，简单应用：只需要一个轻量小巧的核心库。复杂应用：可以引入各式各样的Vue插件。4.Vue实例和容器是一一对应的；5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；7.一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新；Vue模板语法有2大类：1.插值语法：功能：用于解析标签体内容。
2024-02-17 22:13:22
837
原创 AJAX（二）：axios 和 fetch函数发送AJAX请求、同源策略、 jsonp、CORS
先配置服务端，类型改成all，然后允许接收自定义请求头。。。吧server.js里面改成再来设置三个按钮，script:在tittle的下面记得加上。
2024-01-15 15:27:47
408
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人