原创 vue雙端算法代碼分析、數組轉樹（tree）結構

let oldArray = [1, 2, 3, 4, 5]; let newArray = [1, 2, 6, 4, 5]; function patch(oldArr, newArr) { let oldStart = 0;

2023-10-18 14:45:06

原创 qiankun微前端的簡單使用

微前端是一種多個團隊通過獨立發佈功能的方式來共同構建現代化 web 應用的技術手段及方法策略。 微前端借鑑了微服務的架構理念，將一個龐大的前端應用拆分爲多個獨立靈活的小型應用，每個應用都可以獨立開發、獨立運行、獨立部署，再將這些小型應用聯

2023-10-12 14:24:15

原创 git 通過husky提交代碼報錯導致代碼丟失（只add了未commit的代碼）

項目中使用了eslint，以及lint-staged，在執行git commit 時會觸發 git 的 pre-commit 鉤子，對代碼做一次檢查及格式化。由於個別文件中有TS報錯，導致commit失敗，並拋出了具體文件路徑，當我在命令

2023-08-01 14:24:02 1

原创 rollup 打包按需引入

import resolve from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; import babel from '@

2023-06-30 14:26:29

原创 簡單的WebSocket對話

步驟 選擇一個WebSocket服務器,這裏選擇到的模塊是ws模塊 npm i ws 創建一個 WebSocket 服務器 新建一個 server.js 編寫如下代碼 const WebSocket = require('w

2023-06-09 14:23:39

原创 esline配置

module.exports = { root: true, env: { browser: true, node: true, es2021: true }, extends: [ 'es

2023-04-18 14:26:58

原创 vite 發佈npm包

創建一個vite+vue項目 安裝vite官網文檔來搭建項目、然後在安裝對應安裝包、運行 npm init vite@latest my-vue-app -- --template vue cd ./my-vue-app npm i ||

2023-03-23 14:34:59

原创 前端實用的一些插件

1. vuedraggable官方文檔地址：https://www.itxst.com/vue-draggable/j6vzfv6r.html 2. 開源 Web 富文本編輯器，開箱即用，配置簡單 http://www.wangeditor

2023-01-07 14:26:53

原创 騰訊經緯度轉百度，百度轉GCJ02

// 騰訊座標轉百度座標 export const txMapToBdMap = (lng, lat) => { // eslint-disable-next-line camelcase const x_pi = (3.1415

2022-12-31 14:23:31

原创 vue3 setup語法糖中component不支持字符串解決辦法

組件中 <component        :is="IndexRight"        @enterStreet="enterStreet"      /> setup 中 const componentsLeftData

2022-08-09 14:42:40

原创 vue 拖拽移動示例

<template> <div id="drag"> <div id="drag-box" class="drag-box" draggable="true" :style="{

2022-08-03 14:23:58 1

原创 vue 雙向滾動條拖動

onMounted(() => { const box = document.getElementById('gantt-box') let flag, downX, downY, scrollLeft, scrollTop

2022-08-01 14:32:48

原创 swiper 層疊輪播圖 vue3版

<template> <div style="width: 696px; height: 800px; position: relative"> <swiper :slides-per-view="2.5"

2022-07-26 14:30:37

原创 vite 自動生成路由

安裝vite插件庫 npm i vite-plugin-pages vite-plugin-vue-layouts -D vite-plugin-pages 這倆是 vite 的插件，並且僅支持 Vue3 安裝完成後在vite.c

2022-07-14 14:32:49

原创 vue3 setup中使用await頁面空白解決辦法

<Suspense> // 用Suspense包裹子組件　　<AsyncComponent/ > </Suspense> 官方介紹-----  

2022-01-11 14:30:35 5