随便起的名字也被占用-优快云博客

原创 leaflet，canvas渲染目标，可加载大批量数据

Leaflet-CanvasMarker: 在Canvas上绘制Marker,而不是每个marker插件一个dom节点,极大地提高了渲染效率。主要代码参考自 https://github.com/eJuke/Leaflet.Canvas-Markers，不过此插件有些Bug，github国内不方便，作者也不维护了，所以在gitee上新建一个仓库进行维护。修改版本v1.0,可以自定义画marker，使用canvas画marrker再添加到canvas上。修改的canvas渲染marker。

2024-06-20 14:08:37 1115 2

原创从 0 搭建 Vite 3 + Vue 3 Js版前端工程化项目

前言之前分享过一篇vue3+ts+vite构建工程化项目的文章，针对小的开发团队追求开发速度，不想使用ts想继续使用js，所以就记录一下从0搭建一个vite+vue3+js的前端项目，做记录分享。Vite 3 - 构建工具Vue 3Vue Router - 官方路由管理器Pinia - Vue Store你也可以选择vuexelement-plus - UI组件库Sass - CSS 预处理器Axios - 一个基于 promise 的网络请求库，可以用于浏览器和 node.js。

2023-11-28 18:24:27 1628

原创 vue3 + vite + ts + setup , 第二十一练 vue3 中使用函数式编程，h函数（一）

之前跟大家介绍了两种vue编写风格分别是template模板方式，和JSX方式感觉JSX被大家吐槽的很厉害，其实用习惯还挺好用的今天介绍第三种函数式编程。如果没有prop，那么通常可以将children作为第二个参数传入。如果会产生歧义，可以将。函数是一个用于创建VNode的实用程序。也许可以更准确地将其命名为。作为第二个参数传入，将children作为第三个参数传入。，但由于频繁使用和简洁，它被称为。...

2022-07-27 23:17:13 1243

原创 vue3.x+ts项目创建，配置流程

vue3.x 项目搭建流程

2022-07-26 23:11:47 3855

原创 vue3 + vite + ts + setup , 第二十练 vue3 中使用unocss原子化

vue3.x 使用unocss

2022-07-24 23:11:26 2108 1

原创 vue3 + vite + ts + setup , 第十九练 vue3 中使用vue-router(三)，动态路由

vue3.x使用vue-router@4.x 动态路由，动态路由设置权限

2022-07-24 16:43:37 1339

原创 vue3 + vite + ts + setup , 第十八练 vue3 中使用vue-router(二)，前置守卫、后置守卫、路由元信息、过渡动效、滚动行为

vue3.x+ts+vite 使用vue-router@4.x，路由过渡动画，路由切换滚动等

2022-07-24 14:56:12 1106

原创 vue3 + vite + ts + setup , 第十七练 vue3 中使用vue-router(一)，router跳转传参/嵌套路由/路由重定向/别名

vue3.x中使用vue-router4.x

2022-07-19 23:44:58 1382

原创 vue3 + vite + ts + setup , 第十六练 vue3 中使用pinia (三) 如何做数据持久化处理，持久化插件

pinia和vuex都有一个通病页面刷新状态会丢失vuex通常我们都会使用localStorage等做一个本地存储那么我们在vue3中对pinia做一个持久化插件在main.ts中定义一个方法在pinia中注册在piniaPlugin方法中我们可使用store.$subscribe监听state的变化然后做存储或者。...

2022-07-17 22:17:53 1237

原创 vue3 + vite + ts + setup , 第十五练 vue3 中使用pinia (二) 如何使用getters、actions、 $reset、$subscribe、$onAction

vue3中使用pinia,getter和actions的使用

2022-07-16 17:07:24 4480

原创 vue3 + vite + ts + setup , 第十四练 vue3 中使用pinia (一) 修改state的值，使用storeToRefs解构响应性

vue3.x 如何使用pinia

2022-07-14 23:56:51 2336 1

原创 vue3 + vite + ts + setup , 第十三练 vue3 开发移动端，开发页面自适应

之前开发移动端常用的rem布局，或使用媒体查询，本文研究一下postcss-px-to-viewport的使用现在有了更好用的vw vhvw 视口的最大宽度，1vw等于视口宽度的百分之一vh 视口的最大高度，1vh等于视口高度的百分之一1、创建vue项目2、安装postcss-px-to-viewport 依赖3、因为vite中已经内联了postcss，所以并不需要额外的创建 postcss.config.js文件只需要在vite.config.ts配置postcss即可vite.config.

2022-07-10 23:52:21 2254 3

原创 vue3 + vite + ts + setup , 第十二练 Vue3 css style 新特性，样式穿透，插槽选择器，全局选择器，在vue3中使用tailwindcss

样式穿透深度选择器插槽选择器全局选择器CSS Modules CSS Modules 自定义注入名称与组合式 API 一同使用可以通过 API 在和中访问注入的 class。对于使用了自定义注入名称的块，接收一个匹配的 attribute 值作为第一个参数： CSS 中的单文件组件的标签支持使用 CSS 函数将 CSS 的值链接到动态的组件状态使用示例：创建组件css.vuecssset.vue

2022-07-10 00:16:01 1428

原创 vue3 + vite + ts + setup , 第十一练 Vue3自定义全局函数和变量，vue3 如何使用自定义插件

vue3中如何关在全局函数和变量，vue3.x中如何创建自定义插件并使用

2022-07-05 23:31:03 6545 1

原创 vue3 + vite + ts + setup , 第十练自定义hooks的使用

Vue3 自定义Hook主要用来处理复用代码逻辑的一些封装这个在vue2 就已经有一个东西是Mixinsmixins就是将这些多个相同的逻辑抽离出来，各个组件只需要引入mixins，就能实现一次写代码，多组件受益的效果。弊端就是会涉及到覆盖的问题组件的data、methods、filters会覆盖mixins里的同名data、methods、filters。第二点就是变量来源不明确（隐式传入），不利于阅读，使代码变得难以维护。Vue3 的自定义的hookVue3 的 hook函数相当于 vue2 的

2022-07-03 23:47:05 741

原创 vue3 + vite + ts + setup , 第九练自定义指令directive的使用，简单封装一个拖动指令

除了 Vue 内置的一系列指令 (比如或 ) 之外，Vue 还允许你注册自定义的指令，一个自定义指令被定义为一个包含类似于组件的生命周期钩子的对象。钩子接收指令绑定到的元素。2、在setup 内部使用自定义指令在中，任何以开头的驼峰式命名的变量都可以被用作一个自定义指令。在上面的例子中，即可以在模板中以的形式使用。在模板中使用注册全局使用3、钩子参数指令的钩子会传递以下几种参数：：指令绑定到的元素。这可以用于直接操作 DOM。：一个对象，包含以下 prope

2022-06-30 22:34:55 3847

原创 vue3 + vite + ts + setup , 第八练小插曲Vue3自动引入插件unplugin-auto-import的使用；v-model的使用，自定义v-model

Vue3自动引入插件unplugin-auto-import的使用，自定义组件使用v-model,自定义v-model修饰符

2022-06-20 23:52:46 1542

原创 vue3 + vite + ts + setup , 第七练 TSX的使用

vue3.x+ts+vite 中使用tsx

2022-06-16 23:37:53 2600

原创 vue3 + vite + ts + setup , 第六练兄弟组件传值 mitt和手写eventBus 以及获取全局变量多种方法

兄弟组件传值 mitt和手写eventBus 以及获取全局变量多种方法

2022-06-12 22:32:37 1206

原创 vue3 + vite + ts + setup , 第五练依赖注入（provide/inject）的使用

vue3+ts+vite 依赖注入（provide/inject）的使用

2022-05-28 21:55:57 1117

原创 vue3 + vite + ts + setup , 第四练异步组件的使用，defineAsyncComponent和Suspense的使用

vue3+vite+ts 异步组件的使用，defineAsyncComponent和Suspense的使用

2022-04-23 22:43:45 4481

原创 vue3 + vite + ts + setup , 第三练 setup ts语法糖中如何使用全局组件，递归组件，动态组件

vue3+setup+ts Vue3 使用setup语法糖+ts中如何使用全局组件，如何使用递归组件，setup语法糖组件调用自身的问题如何解决

2022-04-20 01:03:45 4040 3

原创 vue3 + vite + ts + setup , 第二练 setup ts语法糖中实现父子组件传参

vue3 setup+ts语法糖语法父子组件如何传参

2022-04-18 23:29:44 2360

原创 vue3 + vite + ts + setup , 第一练如何使用setup ts语法糖

<template> <div v-html="message"> </div> <h1 class="h2-h" v-if="flag">布尔</h1> <button @click="isShowFun">click</button> <p :style="'color:' + ost.pColor"> <span>{{ ost.pNum }}</span&g.

2022-04-18 00:09:35 1263

原创 vue项目中，兼容vue3.0 & 1.0 & 2.0 宫格拖拽排序，特殊五小一大六宫格拖拽

前端时间写了标准宫格拖拽排序的文章 1、 2、4、9、12等等标准宫格拖拽，基于vue-grid-layout 拖拽换位无刷新vue项目中基于vue-grid-layout开发的拖拽对换位置，九宫格拖拽排序，换位_csl125的博客-优快云博客_vue九宫格拖拽安装：npm install vue-grid-layout --save&yarn add vue-grid-layout1、使用vue-grid-layout开发的一款拖拽排序，项目拖走其他自动挤进一效果如下：代码...

2022-01-17 19:08:28 1339

原创 vue项目中五小一大六宫格拖拽排序，6宫格拖拽换位，矩阵拖拽排序

背景：项目中用到1、4、6、9、12、16宫格排序，拖拽换位等场景，项目是监控的视频矩阵，用户矩阵拖拽排序换位，之前已经实现1、4、9、12、16等矩阵式排列的拖拽排序，但是六宫格要求五小一大，之前的基于vue-grid-layout开发的拖拽对换位置已经实现除了五小一大的需求图：五小一大互相可以拖拽换位排序实现方案：基于vue-dragginghttps://github.com/hilongjw/vue-dragging实现六宫格拖拽，该组件也可实现1,4、6、9等需要简单修改即可.

2022-01-12 15:12:40 1660

原创 Vue3.0学习 - 第二十四节，Vue3.x 中 Vue-Router 详解，vue-router路由的使用

Vue3.x 中 Vue-Router 详解，vue-router路由的使用

2021-12-07 18:25:12 2325

原创 Vue3.0学习 - 第二十三节，Vue3.x 中集成Typescript 使用Typescript

Vue3.x 中集成Typescript 使用Typescript

2021-12-07 17:42:50 1148

原创 Vue3.0学习 - 第二十二节，Vue3.x 中 watchEffect和watch

watchEffect立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。在响应式地跟踪其依赖项时立即运行一个函数，并在更改依赖项时重新运行它。具体什么意思呢例如：<template> <div> <h1>测试watch</h1> <hr> <h2>{{num}}</h2> <el-input v-model="state.name"&

2021-10-21 23:57:21 369

原创 Vue3.0学习 - 第二十一节，Vue3.x组件自定义事件以及mitt 实现非父子组件传值

一、父子组件介绍二、Vue3.x组件自定义事件实现子组件给父组件传值注意： Vue官方推荐你始终使用 kebab-case 的事件名。子组件DatePicker.vue<template><button @click="run">通过广播方式实现子组件给父组件传值</button></template><script>export default { // 建议定义所有发出的事件，以便更好地记录组件应该如何工作。

2021-10-14 09:29:21 618

原创 vue3.x&vue-cli3+&vue-cli4.5+项目中使用axios封装http请求

定义接口环境文件，项目打包后会部署的不同的环境，1、环境配置文件：variable.jsconst cookieExpires = 30; //cookie存储时间单位：天//接口请求环境配置let httpUrl = window.location.host;let httpBaseUrl = "http://www.baidu.com:60000";if (httpUrl.includes("cccxxxx.com")) { // 测试生产环境 httpBaseU

2021-08-05 16:09:31 927

原创 vue项目中基于vue-grid-layout开发的拖拽对换位置，九宫格拖拽排序，换位

安装：npm install vue-grid-layout --save&yarn add vue-grid-layout1、使用vue-grid-layout开发的一款拖拽排序，项目拖走其他自动挤进一效果如下：代码如下：<template> <grid-layout :layout="layout" :auto-size="false" :col-num="3" :row-height="100"

2021-07-15 00:48:59 2432 3

原创 vue2.x 常用自定义指令，项目常用自定义指令

directives.jsimport Vue from 'vue'/** * 点击元素外触发事件 * */Vue.directive('clickoutside', { bind(el, binding, vnode) { function documentHandler(e) { // 这里判断点击的元素是否是本身，是本身，则返回 if (el.contains(e.target)) { return false }

2021-07-08 11:24:09 1117 1

原创超实用：Vue 自定义指令合集

在Vue2.0中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。你可以将一些css样式抽象到指令中，也可以将一些js操作放到指令中去执行。就使用上来说，指令不用像组件一样需要引入和注册，注册后使用非常简洁方便。对于在项目中常用到的指令，在此做了一个合集介绍，附源码可以直接在项目中使用。元素点击范围扩展指令 v-expandClick使用该指令可以隐式的扩展元素的点击范围，由于借用伪元素实现，故不会影响元素在...

2021-07-08 09:23:27 687

原创 Vue3.0学习 - 第二十节，vue3中自定义组件使用 v-model

自定义事件也可以用于创建支持v-model的自定义输入组件<input v-model="searchText" />等价于：<input :value="searchText" @input="searchText = $event.target.value" />当用在组件上时，v-model则会这样：<custom-input :model-value="searchText" @update:model-value="searchT...

2021-06-27 13:05:42 4841 2

原创 Vue3.0学习 - 第十九节，vue3中如何使用 Teleport

Vue3.x中的组件模板属于该组件，有时候我们想把模板的内容移动到当前组件之外的DOM 中，这个时候就可以使用 Teleport。<teleport to="body">添加到body中 </teleport><teleport to="#app">添加在app中</teleport>使用Teleport实现一个模态对话框的组件创建一个组件 modelButton.vue<template> <telepor

2021-06-24 14:27:05 711

原创 Vue3.0学习 - 第十八节，vue3中如何使用 vuex

2021-06-23 17:35:39 1936 3

原创 vue3.x中使用深度选择器 /deep/ ＞＞＞

在vue2中使用深度选择器可以使用旧版写法：/deep/ input{ }>>> input{}在vue3.x中的写法新版写法：.user-center { &:deep(.tableheader) { background: #f0f6fc; color: #000; }}.user-center { ::v-deep .tableheader { background: #f0f6fc; col..

2021-06-22 18:53:49 5207

原创 Vue3.0学习 - 第十七节，vue3中如何使用 router、 watch、computed、和路由监听

在vue3.x中使用router和vue2 不一样了在vue2中使用方法：this.$router.push()this.$route.parma

2021-06-16 15:18:27 5746

原创 Vue3.0学习 - 第十六节，Vue3 中router-view警告解决方案vue-router4.0 keep-alive保存当前页面数据的正确写法

在学习vue3发现使用router-view竟然警告了什么鬼？[Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>.Use slot props instead:<router-view v-slot="{ Component }"> <keep-alive> <compon

2021-06-10 23:08:42 7314 14