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

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

原创 rollup 打包按需引入

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

原创 簡單的WebSocket對話

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

原创 esline配置

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

原创 vite 發佈npm包

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

原创 前端實用的一些插件

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

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

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

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

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

原创 vue 拖拽移動示例

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

原创 vue 雙向滾動條拖動

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

原创 swiper 層疊輪播圖 vue3版

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

原创 vite 自動生成路由

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

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

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

原创 vue3 setup方法

setup 組合式API ----------官方定義:通過創建 Vue 組件,我們可以將界面中重複的部分連同其功能一起提取爲可重用的代碼段。僅此一項就可以使我們的應用在可維護性和靈活性方面走得相當遠。然而,我們的經驗已經證明,光靠這一點

原创 vue 3 Teleport

我們在做vue2項目的時候,往往彈窗設置都挺負責的需要各種z-indx,而vue3推薦的做法是使用Teleport <!-- index.html--> <body> <div id="app"></div> <